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')),
        );
      },
  )
)
posted @   行走的泡泡鱼  阅读(116)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
点击右上角即可分享
微信分享提示