V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
luckybilly
V2EX  ›  Flutter

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

  •  
  •   luckybilly ·
    luckybilly · 2020-01-05 12:08:52 +08:00 · 10472 次点击
    这是一个创建于 1769 天前的主题,其中的信息可能已经有所发展或是发生改变。

    当你在为嵌套问题苦恼的时候,可以尝试一下用 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 源码地址

    17 条回复    2020-01-06 12:19:06 +08:00
    locoz
        1
    locoz  
       2020-01-05 12:40:23 +08:00 via Android
    稍微好了一点,但是还是看得脑壳疼…
    daimubai
        2
    daimubai  
       2020-01-05 12:41:11 +08:00 via iPhone
    头皮发麻
    winterbells
        3
    winterbells  
       2020-01-05 12:46:28 +08:00
    好奇一件事,AS 4.0 加了 jetpack compose 功能,还有之前 jetbrains 出的 anko (好像凉了)
    都和 flutter 一样代码画页面,以后的趋势是什么样的?哪天谷歌又要推 jetpack compose 写跨平台吗 =。=
    dremy
        4
    dremy  
       2020-01-05 12:48:56 +08:00 via iPhone
    强行把声明式写成了命令式,脑壳更疼了……
    murmur
        5
    murmur  
       2020-01-05 12:50:46 +08:00
    和 jsx 比还是头疼,jsx 一下就能看出层次结构,flutter 原来恶心也就是嵌套恶心,你这个改完之后我更迷茫了
    ArJun
        6
    ArJun  
       2020-01-05 12:54:42 +08:00
    本来很直观的代码,被这框架一搞好像是高级了,其实还是一个样···
    IGJacklove
        7
    IGJacklove  
       2020-01-05 12:57:34 +08:00
    模仿又不丢人。。就不能搞个 flx 吗?有种当 bz 立牌坊的感觉
    DOLLOR
        8
    DOLLOR  
       2020-01-05 13:22:39 +08:00 via Android
    @IGJacklove
    他们会跟你说,XML 落伍了,都 2020 年了还用啥 XML,你们先接触的 XML 和 HTML 才会觉得 JSX 好用的遗老遗少。🙄
    IGJacklove
        9
    IGJacklove  
       2020-01-05 13:27:27 +08:00
    @DOLLOR 我有点理解 dart 为什么干不过 typescript 了。。
    hoyixi
        10
    hoyixi  
       2020-01-05 13:42:19 +08:00
    Flutter 的发明者应该是个 Java 程序员
    mxT52CRuqR6o5
        11
    mxT52CRuqR6o5  
       2020-01-05 18:53:49 +08:00 via Android
    @IGJacklove 要实现 flx,要么大改所有组件的 api,要么实现出来的 flx 和 xml 会差很多
    hyy1995
        12
    hyy1995  
       2020-01-05 21:22:08 +08:00
    看哭了。。。我还是 rn 好了
    lzm956902416
        13
    lzm956902416  
       2020-01-06 04:29:12 +08:00 via iPhone
    嵌套 —
    可读性 —
    wanguorui123
        14
    wanguorui123  
       2020-01-06 08:23:28 +08:00 via iPhone
    这语法和 QT 的布局器语法有什么区别?
    IGJacklove
        15
    IGJacklove  
       2020-01-06 09:36:04 +08:00
    @mxT52CRuqR6o5 flutter 没有虚拟 dom 吗?有虚拟 dom 应该对 api 不会有什么影响吧,就像 rn 的 jsx 和 React.createElement
    mxT52CRuqR6o5
        16
    mxT52CRuqR6o5  
       2020-01-06 12:16:21 +08:00
    @IGJacklove
    在 jsx 写法中的组件 content,是传给 props.children 的
    在 flutter,有些组件的 content 只能是一个元素传给 child 或者是传给第一个入参,有些组件的 content 可以是多个参数传给 children,这咋处理呢
    mxT52CRuqR6o5
        17
    mxT52CRuqR6o5  
       2020-01-06 12:19:06 +08:00
    @lzm956902416
    这种面条代码仿佛回到了 jquery 时代
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3449 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 10:33 · PVG 18:33 · LAX 02:33 · JFK 05:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.