Dart 2.3 | 让集合操做更加 fancy

前言

Flutter 做为 Dart 语言的一个重要框架，在过去的一年中取得了惊人的成长。这意味着将有很是多的开发者在使用 Dart 语言便携大型深层嵌套表达式的 UI。为了使 Dart 可以更好的编写声明式具备高可读性的 UI，最新发布的 Dart 2.3 版本为集合操做带来了更强的新特性！这篇文章将从如下主要几个方面带你们详细地讨论这些变化。

• Spread 语法
• Collection if
• Collection for

Whats New

Spread

相信各位在使用 Flutter 进行开发的时候常常会遇到这样的场景，当咱们使用 Multiple child 组件时，会想要在 children 中添加一个集合，就像下面这样。

class App extends StatelessWidget {
  final List<String> data = ['name', 'theme', 'about us'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: ListView(
            children: [
          DrawerHeader(
              child: CircleAvatar(
            foregroundColor: Colors.blue,
          )),
        ]..addAll(data
                .map((text) => ListTile(
                      title: Text(text),
                    ))
                .toList())),
      ),
    );
  }
}
复制代码

在上面这段代码中，咱们想向 children 里添加一个 List\<Widget> 咱们只能经过 addAll 进行处理。看起来有点难受对吧，这样的作法大大下降了咱们代码的可读性。但有了 Dart 2.3 的 Spread 语法，你将能够直接经过 ...List\<Widget> 在集合中添加另外一个集合！

class App extends StatelessWidget {
  final List<String> data = ['name','theme','about us'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: ListView(children: <Widget>[
          DrawerHeader(child: CircleAvatar(foregroundColor: Colors.blue,)),
        ...data.map((text)=>ListTile(title: Text(text),)).toList(),
        ],),
      ),
    );
  }
}
复制代码

Awsome！这样的代码明显更有声明式的味道！而且你也能够很轻松的改变集合中元素的顺序。

Collection if

Dart 2.3 还支持在集合中使用 if 语句。

ListView(
    children: <Widget>[
        ...data.map((text) => ListTile(title: Text(text))).toList(),
        if (isGuest) Container(height: 200, color: Colors.amber)
      ],
    ),
复制代码

这样咱们能够更加方便的在一个集合中判断是否须要显示这个小部件。而且这个操做能够和 Spread 结合使用。

ListView(
    children: <Widget>[
        if (isGuest)...data.map((text) => ListTile(title: Text(text))).toList(),
        Container(height: 200, color: Colors.amber)
      ],
    ),
复制代码

Collection for

不只是 if 操做，如今你还可以在集合中使用 for 来处理每个元素。

ListView(
    children: <Widget>[
        for(var text in data) ListTile(title: Text('action: $text'),),
        if (isGuest) for(var text in data) ListTile(title: Text('action: $text'),),
      ],
    ),
复制代码

如你所见，以上三个功能均可以自由组合。而且它们在 map、set literals中一样适用。有关更改的完整详细信息，请参阅这个官方提案。

注意：const 集合当前不支持这些功能。在未来的版本中，Dart 团队打算放宽这个限制，并容许if在 const 集合中传播和收集。

如何使用 Dart 2.3

目前 Flutter 1.5.5-pre.19 • channel master 能够使用 Dart 2.3,你能够经过依次执行下面的操做来更新到这个版本。

• flutter channel master
• flutter doctor
• flutter upgrade

完成上述操做以后，你能够运行 flutter --version 来查看本身升级以后的版本，就像这样。

192:~ litavadaski$ flutter --version
Flutter 1.5.5-pre.19 • channel master • https://github.com/flutter/flutter.git
Framework • revision ac7f875778 (8 hours ago) • 2019-04-22 21:41:18 -0400
Engine • revision 0523870e0b
Tools • Dart 2.3.0 (build 2.3.0-dev.0.1 cf4444b803)
复制代码

写在最后

此外，Dart 2.3 还更新了核心库及工具， 更多信息参阅CHANGELOG：github.com/dart-lang/s…

文章如有不对之处还请各位高手指出，欢迎在下方评论区以及个人邮箱1652219550a@gmail.com留言，我会在24小时内与您联系！