Flutter学习:Dart展开操作符 和 Control Flow Collections

2019-07-2917:12:35编程语言入门到精通Comments3,981 views字数 4812阅读模式

展开操作符(spread operators)

展开操作符 ... 能够把 list、set、map 字面量里的元素插入到一个集合中。一个对象是否可用于展开操作符取决于是否继承了Iterable,Map集合例外,对 map 进行展开操作 实际上是 调用了 Mapentries.iterator()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

在实际开发中,我们可能需要创建新的集合,集合的元素通常依赖另一个已经存在集合,然后再次基础上再添加写新的元素,如:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

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

上面的代码案例,来自官网。其中 toList() 函数会创建一个新的集合,集合里包含了 testArgs 所有元素
然后通过 级联操作符 实现链式调用来简化代码,最后通过 addAll 添加另一个集合的所有元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

但是这种写法依然非常笨重,下面来看下如何通过 展开操作符简化代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

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

Flutter 中是使用 声明式UI(declarative style), Android/iOS 是使用 命令式UI(imperative style)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

什么是 声明式UI?在 Flutter 中,如果 Widget 发生变化通过 setState 函数触发,然后 Flutter 会构建新的 Widget 实例和 Widget 子树
命令式UI 是拿到原来的 Widget 实例,然后调用该实例的方法来触发变化,而不是创建新的 Widget文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

他们之间的代码风格区别如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

 1// 声明式UI代码风格
 2return ViewB(
 3  color: red,
 4  child: ViewC(...),
 5)
 6
 7// 命令式UI代码风格
 8b.setColor(red)
 9b.clearChildren()
10ViewC c3 = new ViewC(...)
11b.add(c3)

展开操作符 在 Flutter 这种声明式 UI 中应用非常广泛,例如我们构建一个 ListView:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

 1Widget build(BuildContext context) {
 2  return CupertinoPageScaffold(
 3    child: ListView(
 4      children: [ //children 就是一个List
 5        Tab2Header(),
 6        // buildTab2Conversation()返回值也是一个List
 7        ...buildTab2Conversation(), 
 8      ],
 9    ),
10  );
11}

上面的例子是在 List 中和使用展开操作符,在 Map 集合中也是一样的,例如将 queryParams 和 formParams 合并产生一个新的 Map 集合文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

1var map = {
2    ...options.queryParameters,
3    ...options.data
4};

在 Set 中的使用展开操作符也一样的,如:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

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

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

上面的我们讲到的展开操作符,如果被展开的对象是 null,那么会抛出运行时异常文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

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

如果被展开的对象可能为 null,需要在展开操作符后面加上 ? 号 (...?):文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

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

展开操作符语义分析

List 中使用展开操作符分析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

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

像其他的集合如 Set、Map 也是类似的机制文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

控制流集合(Control Flow Collections)

控制流集合 就是在构建集合字面量的时候可以使用 if、for 控制流语句,简称 collection-if/for文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

上面我们提到 Flutter 是声明式 UI,例如:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

1Widget build(BuildContext context) {
2  return Row(
3    children: [ // 集合字面量
4      IconButton(icon: Icon(Icons.menu)),
5      Expanded(child: title),
6      IconButton(icon: Icon(Icons.search)),
7    ],
8  );
9}

如果我们想在上面的代码的基础上加一些判断,例如只在 Android 平台展示搜索按钮(Icons.search),我们可能会这么写:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

 1Widget build(BuildContext context) {
 2  // 构建button集合
 3  var buttons = [
 4      IconButton(icon: Icon(Icons.menu)),
 5      Expanded(child: title),
 6  ];
 7  // 如果是 android 平台,添加搜索按钮
 8  if (isAndroid) {
 9    buttons.add(IconButton(icon: Icon(Icons.search)));
10  }
11
12  return Row(
13    children: buttons,
14  );
15}

有了 Control Flow Collection,我们可以这样类简化代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

 1Widget build(BuildContext context) {
 2  return Row(
 3    children: [
 4      IconButton(icon: Icon(Icons.menu)),
 5      Expanded(child: title),
 6      // 如果是 android 平台,添加搜索按钮
 7      if (isAndroid) IconButton(icon: Icon(Icons.search)),
 8    ]
 9  );
10}

除了使用 if,还可以使用 else,例如在 Android 平台展示搜索按钮, 其他平台展示关于按钮 :文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

 1Widget build(BuildContext context) {
 2  return Row(
 3    children: [
 4      IconButton(icon: Icon(Icons.menu)),
 5      Expanded(child: title),
 6      if (isAndroid)
 7        IconButton(icon: Icon(Icons.search))
 8      else
 9        IconButton(icon: Icon(Icons.about)),
10    ]
11  );
12}

再比如我们需要根据一个集合然后生成另一个集合,可能会这样写:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

 1var command = [
 2  engineDartPath,
 3  frontendServer,
 4];
 5for (var root in fileSystemRoots) {
 6  command.add('--filesystem-root=$root');
 7}
 8for (var entryPointsJson in entryPointsJsonFiles) {
 9  if (fileExists("$entryPointsJson.json")) {
10    command.add(entryPointsJson);
11  }
12}
13command.add(mainPath);

有了 Control Flow Collection,我们可以这样写,可读性更强:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

1var command = [
2  engineDartPath,
3  frontendServer,
4  for (var root in fileSystemRoots) '--filesystem-root=$root',
5  for (var entryPointsJson in entryPointsJsonFiles)
6    if (fileExists("$entryPointsJson.json")) entryPointsJson,
7  mainPath
8];

还可以在构建集合字面量的时候 for 循环计算:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

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

构建 Map 字面量的时候,我们可能会这样写:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

1Map<string, widgetbuilder>.fromIterable(
2  kAllGalleryDemos,
3  key: (demo) => '${demo.routeName}',
4  value: (demo) => demo.buildRoute,
5);
</string, widgetbuilder>

collection-for 可以让我们的代码简化成如下所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

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

collection if-for 还可以组合,例如 for 循环嵌套,for-if 嵌套:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

1//for-for
2[for (var x in hor) for (var y in vert) Point(x, y)]
3
4//for-if
5[for (var i in integers) if (i.isEven) i * i]

总结

Dart 的展开操作符 (Null-aware spread、Non-null-ware spread) 和 Control flow collections(collection if/for)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

让我们编写的代码的时候代码的可读性更高文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

特别是编写 Flutter UI 的时候更符合 declarative style 代码风格文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

从中可以看出 Dart 代码的表现力还是很强的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/14503.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/ymba/14503.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定