（二）Flutter 学习之 Dart 展开操作符和 Control Flow Collections

Flutter系列文章目录导读：

（一）Flutter学习之Dart变量和类型系统
（二）Flutter学习之Dart展开操作符 和 Control Flow Collections
（三）Flutter学习之Dart函数
（四）Flutter学习之Dart操作符、控制流和异常处理
（五）Flutter学习之Dart面向对象
（六）Flutter学习之Dart异步操作详解
（七）Flutter 学习之开发环境搭建
（八）Flutter 和 Native 之间的通信详解
（九）Android 项目集成 Flutter 模块
（十）Flutter FutureBuilder 优雅构建异步UI
更新中…

---

展开操作符(spread operators)

展开操作符 ... 能够把 list、set、map 字面量里的元素插入到一个集合中。一个对象是否可用于展开操作符取决于是否继承了Iterable，Map集合例外，对 map 进行展开操作 实际上是 调用了 Map 的 entries.iterator()

在实际开发中，我们可能需要创建新的集合，集合的元素通常依赖另一个已经存在集合，然后再次基础上再添加写新的元素，如：

var args = testArgs.toList()
  ..add('--packages=${PackageMap.globalPackagesPath}')
  ..add('-rexpanded')
  ..addAll(filePaths);

上面的代码案例，来自官网。其中 toList() 函数会创建一个新的集合，集合里包含了 testArgs 所有元素
然后通过 级联操作符 实现链式调用来简化代码，最后通过 addAll 添加另一个集合的所有元素

但是这种写法依然非常笨重，下面来看下如何通过 展开操作符简化代码：

var args = [
  ...testArgs, // 通过展开操作符将testArgs集合解包然后将里面的元素逐个放进args里
  '--packages=${PackageMap.globalPackagesPath}',
  '-rexpanded',
  ...filePaths // 通过展开操作符将filePaths集合解包然后将里面的元素逐个放进args里
];

在 Flutter 中是使用 声明式UI(declarative style), Android/iOS 是使用 命令式UI(imperative style)

什么是 声明式UI？ 在 Flutter 中，如果 Widget 发生变化通过 setState 函数触发，然后 Flutter 会构建新的 Widget 实例和 Widget 子树
而 命令式UI 是拿到原来的 Widget 实例，然后调用该实例的方法来触发变化，而不是创建新的 Widget

他们之间的代码风格区别如下：

// 声明式UI代码风格
return ViewB(
  color: red,
  child: ViewC(...),
)

// 命令式UI代码风格
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)

展开操作符 在 Flutter 这种声明式 UI 中应用非常广泛，例如我们构建一个 ListView：

Widget build(BuildContext context) {
  return CupertinoPageScaffold(
    child: ListView(
      children: [ //children 就是一个List
        Tab2Header(),
        // buildTab2Conversation()返回值也是一个List
        ...buildTab2Conversation(), 
      ],
    ),
  );
}

上面的例子是在 List 中和使用展开操作符，在 Map 集合中也是一样的，例如将 queryParams 和 formParams 合并产生一个新的 Map 集合

var map = {
    ...options.queryParameters,
    ...options.data
};

在 Set 中的使用展开操作符也一样的，如：

var items = [2, 3, 4];
var set = { 1, 2, ...items };

可空的展开操作符(Null-aware spread)

上面的我们讲到的展开操作符，如果被展开的对象是 null，那么会抛出运行时异常

var oops = null;
//NoSuchMethodError: The getter 'iterator' was called on null
var list = [...oops];

如果被展开的对象可能为 null，需要在展开操作符后面加上 ? 号 (...?)：

var oops = null;
var list = [...?oops];

展开操作符语义分析

List 中使用展开操作符分析

var list  = [elem_1 ... elem_n]
1. 首先会创建新的集合，用于保存集合字面量里的元素
2. 遍历字面量里的所有元素
    1)把元素表达式(展开操作符)赋值给value遍历
    2)如果遍历的元素是展开操作符
        a)如果使用的是可空的展开操作符，并且 value 是 null，直接 continue
        b)将 value.iterator 赋值给 iterator 变量
        c)然后遍历 iterator，将里面的元素追加到上面新建的集合里
    3)如果遍历的元素不是展开操作符，直接将元素添加到集合中
3. 就这样，集合字面量的元素全部在上面新建的集合里了

像其他的集合如 Set、Map 也是类似的机制

控制流集合(Control Flow Collections)

控制流集合 就是在构建集合字面量的时候可以使用 if、for 控制流语句，简称 collection-if/for

上面我们提到 Flutter 是声明式 UI，例如：

Widget build(BuildContext context) {
  return Row(
    children: [ // 集合字面量
      IconButton(icon: Icon(Icons.menu)),
      Expanded(child: title),
      IconButton(icon: Icon(Icons.search)),
    ],
  );
}

如果我们想在上面的代码的基础上加一些判断，例如只在 Android 平台展示搜索按钮(Icons.search)，我们可能会这么写：

Widget build(BuildContext context) {
  // 构建button集合
  var buttons = [
      IconButton(icon: Icon(Icons.menu)),
      Expanded(child: title),
  ];
  // 如果是 android 平台，添加搜索按钮
  if (isAndroid) {
    buttons.add(IconButton(icon: Icon(Icons.search)));
  }

  return Row(
    children: buttons,
  );
}

有了 Control Flow Collection，我们可以这样类简化代码：

Widget build(BuildContext context) {
  return Row(
    children: [
      IconButton(icon: Icon(Icons.menu)),
      Expanded(child: title),
      // 如果是 android 平台，添加搜索按钮
      if (isAndroid) IconButton(icon: Icon(Icons.search)),
    ]
  );
}

除了使用 if，还可以使用 else，例如在 Android 平台展示搜索按钮， 其他平台展示关于按钮 :

Widget build(BuildContext context) {
  return Row(
    children: [
      IconButton(icon: Icon(Icons.menu)),
      Expanded(child: title),
      if (isAndroid)
        IconButton(icon: Icon(Icons.search))
      else
        IconButton(icon: Icon(Icons.about)),
    ]
  );
}

再比如我们需要根据一个集合然后生成另一个集合，可能会这样写：

var command = [
  engineDartPath,
  frontendServer,
];
for (var root in fileSystemRoots) {
  command.add('--filesystem-root=$root');
}
for (var entryPointsJson in entryPointsJsonFiles) {
  if (fileExists("$entryPointsJson.json")) {
    command.add(entryPointsJson);
  }
}
command.add(mainPath);

有了 Control Flow Collection，我们可以这样写，可读性更强：

var command = [
  engineDartPath,
  frontendServer,
  for (var root in fileSystemRoots) '--filesystem-root=$root',
  for (var entryPointsJson in entryPointsJsonFiles)
    if (fileExists("$entryPointsJson.json")) entryPointsJson,
  mainPath
];

还可以在构建集合字面量的时候 for 循环计算：

var integers = [for (var i = 1; i < 5; i++) i]; // [1, 2, 3, 4]
var squares = [for (var n in integers) n * n]; // [1, 4, 9, 16]

构建 Map 字面量的时候，我们可能会这样写：

Map.fromIterable(
  kAllGalleryDemos,
  key: (demo) => '${demo.routeName}',
  value: (demo) => demo.buildRoute,
);

collection-for 可以让我们的代码简化成如下所示：

return {
  for (var demo in kAllGalleryDemos)
    '${demo.routeName}': demo.buildRoute,
};

collection if-for 还可以组合，例如 for 循环嵌套，for-if 嵌套：

//for-for
[for (var x in hor) for (var y in vert) Point(x, y)]

//for-if
[for (var i in integers) if (i.isEven) i * i]

总结

Dart 的展开操作符 (Null-aware spread、Non-null-ware spread) 和 Control flow collections(collection if/for)

让我们编写的代码的时候代码的可读性更高

特别是编写 Flutter UI 的时候更符合 declarative style 代码风格

从中可以看出 Dart 代码的表现力还是很强的

Reference

• 关于 Dart 展开操作符 和 Control Flow Collections 就讲到这里, 更多的关于 Android 学习资料可以查看我的GitHub: https://github.com/chiclaim/AndroidAll

• https://flutter.dev/docs/get-started/flutter-for/declarative

• https://github.com/dart-lang/language/blob/master/accepted/2.3/spread-- collections/feature-specification.md

• https://github.com/dart-lang/language/blob/master/accepted/2.3/control-flow-collections/feature-specification.md

---

如果你觉得本文帮助到你，给我个关注和赞呗！

另外，我为 Android 程序员编写了一份：超详细的 Android 程序员所需要的技术栈思维导图。

如果有需要可以移步到我的 GitHub -> AndroidAll，里面包含了最全的目录和对应知识点链接，帮你扫除 Android 知识点盲区。 由于篇幅原因只展示了 Android 思维导图：