Flutter嵌套问题遭吐槽,全部退后,我要放大招了

发布于 1周前 作者 yuanlaile 来自 Flutter

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

先来看看这段代码:

class Test extends StatelessWidget {
  [@override](/user/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](/user/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 源码地址


Flutter嵌套问题遭吐槽,全部退后,我要放大招了

更多关于Flutter嵌套问题遭吐槽,全部退后,我要放大招了的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

18 回复

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

更多关于Flutter嵌套问题遭吐槽,全部退后,我要放大招了的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


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

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

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

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

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


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

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

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

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

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

嵌套 —
可读性 —

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

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


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


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

针对Flutter嵌套问题遭吐槽的现象,确实,在Flutter开发中,嵌套层级过深是一个常见的问题,它不仅影响代码的可读性,还可能对性能产生负面影响。以下是一些专业建议,帮助你有效应对Flutter嵌套问题:

  1. 拆分组件:将复杂的UI组件拆分成更小的、可复用的组件。这不仅可以减少嵌套层级,还能提高代码的可维护性和复用性。
  2. 使用组合而非继承:通过组合简单组件来构建复杂布局,避免通过继承来扩展功能,这有助于保持代码的清晰和简洁。
  3. 利用布局优化:使用Flex、Grid等布局容器来简化嵌套结构。这些布局容器提供了更灵活和强大的布局能力,有助于减少不必要的嵌套。
  4. 性能监控:使用Flutter的性能分析工具(如DevTools)来监控嵌套对性能的影响。及时发现并解决性能瓶颈,确保应用的流畅运行。

通过以上方法,你可以有效地解决Flutter中的嵌套问题,提升代码质量和应用性能。在Flutter开发中,保持代码的清晰和简洁是非常重要的,希望这些建议能对你有所帮助。

回到顶部