Dart 2.3 | 讓集合操做更加 fancy

時間 2019-11-08

原文原文鏈接

前言

Flutter 做爲 Dart 語言的一個重要框架，在過去的一年中取得了驚人的成長。這意味着將有很是多的開發者在使用 Dart 語言便攜大型深層嵌套表達式的 UI。爲了使 Dart 可以更好的編寫聲明式具備高可讀性的 UI，最新發布的 Dart 2.3 版本爲集合操做帶來了更強的新特性！這篇文章將從如下主要幾個方面帶你們詳細地討論這些變化。git

Spread 語法
Collection if
Collection for

Whats New

Spread

相信各位在使用 Flutter 進行開發的時候常常會遇到這樣的場景，當咱們使用 Multiple child 組件時，會想要在 children 中添加一個集合，就像下面這樣。 github

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> 在集合中添加另外一個集合！app

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 語句。less

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

這樣咱們能夠更加方便的在一個集合中判斷是否須要顯示這個小部件。而且這個操做能夠和 Spread 結合使用。ide

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中一樣適用。有關更改的完整詳細信息，請參閱這個官方提案。ui

注意：const 集合當前不支持這些功能。在未來的版本中，Dart 團隊打算放寬這個限制，並容許if在 const 集合中傳播和收集。spa

如何使用 Dart 2.3

目前 Flutter 1.5.5-pre.19 • channel master 可使用 Dart 2.3,你能夠經過依次執行下面的操做來更新到這個版本。code

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)
複製代碼