谈谈我对 Flutter 将来发展 和 “嵌套地狱” 的浅显见解

Flutter 将来发展

提到 Flutter 就不得不提到 Fuchsia 系统，这是一个还没有正式发布的操做的系统，引用 Android 和 Chrome 的高级副总裁 Hiroshi Lockheimer 在一档播客节目中对 Fuchsia 的介绍是：

不只仅是手机和我的电脑，在物联网的世界里，愈来愈多的设备须要操做系统、新的软件运行环境等支持。我认为，在具备不一样优点和专业化的诸多操做系统中还存在很大的发展空间。Fuchsia 就是其中之一，因此，请继续保持关注。

是的，Fuchsia 系统是为物联网研发的操做系统，物联网简称 IoT，如今全世界都在押注 IoT，包括华为、小米等国内公司。

那 Flutter 和 Fuchsia 又有什么关系呢？

Flutter 是 Fuchsia 官方指定的惟一UI开发框架。

如今有不少物联网操做系统 ，Fuchsia 就必定能够脱颖而出吗？

不必定，将来的事情谁说的准呢，但在我看来 Fuchsia 是最有可能发展起来的物联网操做系统，由于一个操做系统的发展除了自己优秀之外，最大的阻碍实际上是生态，而 Fuchsia 在生态方面具备自然的优点， 国外的一篇报道曾说：

Google 但愿将 Android App 无缝移植到 Fuchsia 上，并且一直在作相关工做。

试想一下，一旦 Google 将 Android App 无缝移植到 Fuchsia 上，其余物联网操做系统如何与之抗衡。

这里引用 Google 公众号底部的一句话送给你们：

预测将来不如创造将来

在跨平台技术上 Flutter 还有不少竞争对手，好比 HTML五、React Native、Weex、快应用、小程序等，我曾在[跨平台技术发展简介]() 中详细说明了各个跨平台技术的发展历史及优缺点。

Flutter 的出现会终结其余跨平台技术？我想不会的， React Native 发展了这么多年也没有彻底干掉 HTML5，应为 HTML5 有其独特的应用场景，好比 营销活动场景、新闻或者博客详情页面等，这些场景很是适合 HTML5。所以 Flutter 也不可能终结其余跨平台技术，总结一句话就是：

将来很长一段时间，将会是跨平台技术共存的时代，但 Flutter 适用场景更为广阔。

Flutter 嵌套地狱

如今网络上对 Flutter 吐槽最多大概就是 Flutter “嵌套地狱”写法了，为何会出现这种现象？我的认为最大的缘由就是目前大部分开源的 Flutter 项目都是这种嵌套写法（包括我本身之前也是如此），致使后来的初学者认为这么写没有问题，当项目愈来愈复杂时，这种嵌套写法给项目的维护带来了巨大的挑战。下面说说如何避免这种嵌套写法？

好比实现以下效果：

嵌套地狱 的写法：

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Container(
        height: 45,
        child: Row(
          children: <Widget>[
            SizedBox(
              width: 30,
            ),
            Icon(
              Icons.notifications,
              color: Colors.blue,
            ),
            SizedBox(
              width: 30,
            ),
            Expanded(
              child: Text('消息中心'),
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.all(Radius.circular(50)),
                  color: Colors.red),
              child: Text(
                '2',
                style: TextStyle(color: Colors.white),
              ),
            ),
            SizedBox(
              width: 15,
            ),
          ],
        ),
      ),
      Divider(),
      //相似上面的布局写6个
    ],
  );
}

上面还仅仅是第一项的布局，下面还有7个，一个30多行代码，7个就是200多行的布局代码，这还仅仅是布局代码，若是加上逻辑，都不敢想象啊。

或许有一点封装思想开发者会将每个 Item封装为一个方法，写法以下：

_buildItem(IconData iconData, Color iconColor, String title, Widget widget) {
  return Container(
    height: 45,
    child: Row(
      children: <Widget>[
        SizedBox(
          width: 30,
        ),
        Icon(
          iconData,
          color: iconColor,
        ),
        SizedBox(
          width: 30,
        ),
        Expanded(
          child: Text('$title'),
        ),
        widget,
        SizedBox(
          width: 15,
        ),
      ],
    ),
  );
}

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
    ],
  );
}

这样看起来好多了，基本解决了嵌套地狱问题，但这样写还存在一个很是大的问题-性能问题，一旦其中一个数字发生变化，整个页面都要重建，Flutter 开发中很是重要的一个原则就是 尽量少的重建组件，所以将上面封装到方法中组件变为一个 Widget。

class SettingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _SettingItem(
          iconData: Icons.notifications,
          iconColor: Colors.blue,
          title: '消息中心',
          suffix: _NotificationsText(
            text: '2',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.thumb_up,
          iconColor: Colors.green,
          title: '我赞过的',
          suffix: _Suffix(
            text: '121篇',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.grade,
          iconColor: Colors.yellow,
          title: '收藏集',
          suffix: _Suffix(
            text: '2个',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.shopping_basket,
          iconColor: Colors.yellow,
          title: '已购小册',
          suffix: _Suffix(
            text: '100个',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.account_balance_wallet,
          iconColor: Colors.blue,
          title: '个人钱包',
          suffix: _Suffix(
            text: '10万',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.location_on,
          iconColor: Colors.grey,
          title: '阅读过的文章',
          suffix: _Suffix(
            text: '1034篇',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.local_offer,
          iconColor: Colors.grey,
          title: '标签管理',
          suffix: _Suffix(
            text: '27个',
          ),
        ),
      ],
    );
  }
}

class _SettingItem extends StatelessWidget {
  const _SettingItem(
      {Key key, this.iconData, this.iconColor, this.title, this.suffix})
      : super(key: key);

  final IconData iconData;
  final Color iconColor;
  final String title;
  final Widget suffix;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 45,
      child: Row(
        children: <Widget>[
          SizedBox(
            width: 30,
          ),
          Icon(iconData,color: iconColor,),
          SizedBox(
            width: 30,
          ),
          Expanded(
            child: Text('$title'),
          ),
          suffix,
          SizedBox(
            width: 15,
          ),
        ],
      ),
    );
  }
}

class _NotificationsText extends StatelessWidget {
  final String text;

  const _NotificationsText({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.all(Radius.circular(50)),
          color: Colors.red),
      child: Text(
        '$text',
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

class _Suffix extends StatelessWidget {
  final String text;

  const _Suffix({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      '$text',
      style: TextStyle(color: Colors.grey.withOpacity(.5)),
    );
  }
}

封装为一个个单独的小组件，将有变化的组件尽可能单独封装，这样就不会重建整个控件树，加强了可读性和可维护性，并且对性能有很大的提高。

最后总结一句：

虽然 Flutter 一切皆是组件，但并不表明一切都要写在组件中。

固然这仅仅是我我的的见解，若是您有更好的方法欢迎一块儿讨论，从我作起，规范写法，为 Flutter 发展贡献作出一点微不足道的贡献。

交流

老孟Flutter博客地址（330个控件用法）：http://laomengit.com

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：