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)
复制代码