Flutter ListView 的使用
ListView 的使用
记录一下我使用ListView的经历。刚开始接触Flutter的时候,我避开了这种一看就更加复杂的东西,先去使用了Text,Icon,但做的项目需要达到的动态加载相似item,看看是避不开了。
1. 垂直列表,通过children添加子组件
这种方式算是我自己研究出来的用法,刚开始有个页面,只要动态加载相似条目,然后每个条目里有个按钮会触发回调就行,我看了listview里有个children,那好办,我就提供了个List
Container(
width: 1000,
height: 500,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2),
),
child: ListView(
children: refreshListWidget(),
),
),
//这边生成列表,连的myListItem,是自己写的StatefulWidget,带一个回调
List<Widget> refreshListByValueList(List<Value> value) {
List<Widget> tempList = [];
int index = 0;
String name = "";
for (var i = 0; i < value.length; i++) {
setState(() {
index = i;
name = value[i].name;
});
print('refreshListWidget: ${index},${name}');
tempList.add(myListItem(
i,
name,
ItemCallback: refreshListWidget,
));
}
return tempList;
}
2. 垂直列表,通过Builder添加子组件
如果写的程序,上面这种方式够用的话,也就不回来研究这种方式了,这次是因为要研究Listview单选效果,使用上面的方式,没有办法通知其他item改成不选中状态,查了点资料,使用了Listview.Builder来做的。
Container(
width: 1000,
height: 500,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2),
),
child: refreshListWidget(),
),
),
//同样放在refreshListWidget里了, listData的定义和赋值就不放进来了
Widget refreshListWidget() {
print('refreshListWidget now');
return ListView.builder(
itemCount: listData.length,
itemBuilder: (BuildContext context, int index) {
var item = listData[index];
return ListTile(
title: Text(item.listItem.name, ),
selected: item.isSelected,
selectedTileColor: Colors.lightBlueAccent[100],
selectedColor: Colors.black,
onTap: () {
setState(() {
for (var i = 0; i < listData.length; i++) {
if (i == index) {
listData[i].isSelected = !listData[i].isSelected;
} else {
listData[i].isSelected = false;
}
}
});
},
);
});
}
3. 水平列表,通过children添加子组件
这里有一个问题是,调整外层SizedBox的高度是有效的,代码里四个不同色块的高度会跟着改变,里面的容器高度看起来不起作用。
代码如下:
SizedBox(
// width: double.infinity,
height: 102,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 100,height: 40,child: ColoredBox(color: Colors.orange,),),
Container(width: 100,height: 40,child: ColoredBox(color: Colors.red,),),
Container(width: 100,height: 40,child: ColoredBox(color: Colors.yellow,),),
Container(width: 100,height: 40,child: ColoredBox(color: Colors.pink,),)
]),
)
4. 水平列表,通过Builder添加子组件
之所以记录水平列表的创建方法,是我第一次直接改写垂直列表的时候,只修改了scrollDirection属性,结果界面创建报错,所以感觉还是要记录下没有出错的代码。
同样,内部设置的高度看起来没有作用
代码如下:
Container(
height: 100,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 5,
itemBuilder: (context, index) {
return Container(
width: 100, // 你可以根据需要设置宽度
height: 50, // 你可以根据需要设置高度
color: Colors.blue, // 你可以根据需要设置颜色
child: Center(child: Text('123')),
);
},
)
)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)