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展示出来的问题。

生活需要动力，而动力需要自驱，加油，搬砖人~😄