flutter 循环组件生成方法

万志鹏

已于 2025-05-28 17:42:38 修改

阅读量2.3k

点赞数

于 2022-03-11 15:49:43 首次发布

本文链接：https://blog.youkuaiyun.com/python4_1/article/details/123426920

版权

flutter 同时被 3 个专栏收录

14 篇文章

订阅专栏

ios

11 篇文章

订阅专栏

android

9 篇文章

订阅专栏

本文介绍了如何通过遍历、ListView构建、for循环和静态列表生成法在Flutter中创建常用循环组件。实例涵盖了列表数据处理、ListView的动态生成以及不同循环方式的应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单介绍几种常用循环组件生成的方法

列表循环的原数据

List listViewTabs = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'] ;
list tabs=[{},{},{}];
list tab = ['A','B','C','D','E'}

遍历获取List的索引值来生成列表

ListView(
	children:tabs.asMap().keys.map((index) {
	return ........;
	}).toList(),
)

等价于

var ls = tab .map((e) => Text(e)).toList();

ListView(
	children:ls ,
)

flutter组件自带功能，

//以ListView.builder举例，并不代表只有这一种组件
ListView.builder(
      itemBuilder: (context, index) {
        return .......;
      },
      itemCount: tabs.length,
    ),

for循环生成

//这种最适合封装起来做公共组件使用
static List<Widget> _listData(){
        List<Widget> list = new List();
        for(int i =0;i<20;i++){
            list.add(ListTile(
                title:Text("$i")
            ));
        }
        return list;  
    }

这种方式用的比较少，但是也可以达到目的

ListView(
          children: <Widget>[
            ...listview.map(
              (e) => Text(e),
            )
          ],
        ),

数据循环（是否有索引值）

 GridView.count(
              shrinkWrap: true,
              padding:
                  EdgeInsets.symmetric(horizontal: 25.rpx, vertical: 20.rpx),
              crossAxisCount: 2,
              mainAxisSpacing: 15.rpx,
              crossAxisSpacing: 15.rpx,
              children: poolList.asMap().entries.map((entry) {
                final index = entry.key; // 索引值 (0, 1, 2...)
                final item = entry.value; // 单个池形状数据

                return poolShapeWidget(
                  index, // 传递索引
                  item["shape"], // 图形资源
                  item["title"], // 标题
                );
              }).toList(),
            ),


//拿索引值来区分使用
poolList.asMap().entries.map((entry) {
                final index = entry.key; // 索引值 (0, 1, 2...)
                final item = entry.value; // 单个池形状数据

                return poolShapeWidget(
                  index, // 传递索引
                  item["shape"], // 图形资源
                  item["title"], // 标题
                );
              }).toList(),



poolList.map((e) => poolShapeWidget(e["shape"], e["title"]))
                  .toList(),