1.基本使用：
在Flutter中spread (...)展开运算符可以说是一种比较有用并且有快速的语法形式，常用于数组的添加以及合并操作等。
数组操作想必都比较熟悉:
///第一种方式 addAll
List totalsList = [];
totalsList.addAll(nameList);
totalsList.addAll(animalList);
print("totalsList = $totalsList");
List nameList = ["小明", "小张", "小丽", "人家"];
List animalList = ["monkey", "panda", "cat", "dog"];
print: totalsList = [小明, 小张, 小丽, 人家, monkey, panda, cat, dog]
///第二种方式 数组相加 + 运算符
List totalsList = list1 + list2;
List totalsList = nameList + animalList;
print: totalsList = [小明, 小张, 小丽, 人家, monkey, panda, cat, dog]
///第三种方式 spread (...)
List totalsList = [...animalList, ...nameList];
print("totalsList = $totalsList");
List totalsList = [...animalList, ...nameList];
print("totalsList = $totalsList");
flutter: totalsList = [monkey, panda, cat, dog, 小明, 小张, 小丽, 人家]
2.UI中使用
今天其实主要是学习和记录一下spread运算符在UI中减少代码以及使用方法。
Column(
children: [
ListTile(
title: Text("你好"),
),
ListTile(
title: Text("你好"),
),
ListTile(
title: Text("你好"),
),
ListTile(
title: Text("你好"),
),
ListTile(
title: Text("你好"),
),
ListTile(
title: Text("你好"),
),
ListTile(
title: Text("你好"),
),
Row(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.redAccent, width: 1),
borderRadius: BorderRadius.circular(5)),
margin: const EdgeInsets.only(left: 10),
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
child: Text(
'widget1',
),
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.redAccent, width: 1),
borderRadius: BorderRadius.circular(5)),
margin: const EdgeInsets.only(left: 10),
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
child: Text(
'widget2',
),
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.redAccent, width: 1),
borderRadius: BorderRadius.circular(5)),
margin: const EdgeInsets.only(left: 10),
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
child: Text(
'widget3',
),
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.redAccent, width: 1),
borderRadius: BorderRadius.circular(5)),
margin: const EdgeInsets.only(left: 10),
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
child: Text(
'widget4',
),
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.redAccent, width: 1),
borderRadius: BorderRadius.circular(5)),
margin: const EdgeInsets.only(left: 10),
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
child: Text(
'widget5',
),
)
],
)
],
)
Simulator Screen Shot - iPhone 14 Plus - 2022-11-28 at 17.32.38.png
上面代码可以看出来，有很多重复的ListTitle和Container，那我们接下来就用spread（..）来减少这种重复性代码。
Column(
children: [
...List.generate(
7,
(index) => const ListTile(
title: Text("你好啊"),
)),
Row(
children: [
...List.generate(
5,
(index) => Container(
decoration: BoxDecoration(
border:
Border.all(color: Colors.redAccent, width: 1),
borderRadius: BorderRadius.circular(5)),
margin: const EdgeInsets.only(left: 10),
padding: const EdgeInsets.symmetric(
vertical: 3, horizontal: 5),
child: const Text(
'widget1',
),
))
],
)
],
)
Simulator Screen Shot - iPhone 14 Plus - 2022-11-28 at 18.04.13.png
一开始，刚看到的时候，我也想为什么在children：[]内没有报错，经过查阅和学习，原因是children：[]内的Containers 是一个List并且也可以使用spread(...)运算符，将现有的List添加到children：[]内可接收的数据类型List内，所以完美处理了widget展示出来的问题。
生活需要动力，而动力需要自驱，加油，搬砖人~😄
