Flutter系列文章目录导读:
(一)Flutter学习之Dart变量和类型系统
(二)Flutter学习之Dart展开操作符 和 Control Flow Collections
(三)Flutter学习之Dart函数
(四)Flutter学习之Dart操作符、控制流和异常处理
(五)Flutter学习之Dart面向对象
(六)Flutter学习之Dart异步操作详解
(七)Flutter 学习之开发环境搭建
(八)Flutter 和 Native 之间的通信详解
(九)Android 项目集成 Flutter 模块
(十)Flutter FutureBuilder 优雅构建异步UI
更新中…
展开操作符 ...
能够把 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,那么会抛出运行时异常
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 也是类似的机制
控制流集合
就是在构建集合字面量的时候可以使用 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 代码的表现力还是很强的
关于 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 思维导图: