Spread在Flutter中的使用

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容