大家都在吐槽 Flutter 的嵌套问题，全部退后，我要放大招了

[luckybilly]

当你在为嵌套问题苦恼的时候，可以尝试一下用 widget_chain 链式调用来部分替换代码中的嵌套。

先来看看这段代码：

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo'),),
      body: Container(
        child: Offstage(
          offstage: false,
          child: ListView(
            children: <Widget>[
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(20),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.phone),
                    Text("amy"),
                  ],
                ),
              ),
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(20),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.phone),
                    Text("billy"),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

用 widget_chain 后的效果：

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Demo'),),
        body: ["amy", "billy"]
            .buildAllAsWidget((name) =>
              WidgetChain
              .addNeighbor(Icon(Icons.phone))
              .addNeighbor(Text(name))
              .intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
              .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),)
            )
            .intoListView()
            .intoOffstage(offstage: false)
            .intoContainer()
    );
  }
}

详细介绍请看这篇文章

GitHub 源码地址

[locoz]

稍微好了一点，但是还是看得脑壳疼…

[daimubai]

头皮发麻

[winterbells]

好奇一件事，AS 4.0 加了 jetpack compose 功能，还有之前 jetbrains 出的 anko （好像凉了）
都和 flutter 一样代码画页面，以后的趋势是什么样的？哪天谷歌又要推 jetpack compose 写跨平台吗 =。=

[dremy]

强行把声明式写成了命令式，脑壳更疼了……

[murmur]

和 jsx 比还是头疼，jsx 一下就能看出层次结构，flutter 原来恶心也就是嵌套恶心，你这个改完之后我更迷茫了

[ArJun]

本来很直观的代码，被这框架一搞好像是高级了，其实还是一个样···

[IGJacklove]

模仿又不丢人。。就不能搞个 flx 吗？有种当 bz 立牌坊的感觉

[DOLLOR]

@IGJacklove
他们会跟你说，XML 落伍了，都 2020 年了还用啥 XML，你们先接触的 XML 和 HTML 才会觉得 JSX 好用的遗老遗少。🙄

[IGJacklove]

@DOLLOR 我有点理解 dart 为什么干不过 typescript 了。。

[hoyixi]

Flutter 的发明者应该是个 Java 程序员

[mxT52CRuqR6o5]

@IGJacklove 要实现 flx，要么大改所有组件的 api，要么实现出来的 flx 和 xml 会差很多

[hyy1995]

看哭了。。。我还是 rn 好了

[lzm956902416]

嵌套 —
可读性 —

[wanguorui123]

这语法和 QT 的布局器语法有什么区别？

[IGJacklove]

@mxT52CRuqR6o5 flutter 没有虚拟 dom 吗？有虚拟 dom 应该对 api 不会有什么影响吧，就像 rn 的 jsx 和 React.createElement

[mxT52CRuqR6o5]

@IGJacklove
在 jsx 写法中的组件 content，是传给 props.children 的
在 flutter，有些组件的 content 只能是一个元素传给 child 或者是传给第一个入参，有些组件的 content 可以是多个参数传给 children，这咋处理呢

[mxT52CRuqR6o5]

@lzm956902416
这种面条代码仿佛回到了 jquery 时代