当前位置：首页 > ai >正文

Flutter Listview的基本使用

ai 2025/8/12 20:28:35

Listview()

前端页面常见的一个以列表方式显示内容的组件。可垂直或水平滚动的列表。

属性	说明
scrollDirection	设置滚动的方向，取值包括horizontal、vertical
reverse	设置是否翻转，默认值false
itemExtent	设置滚动方向子元素的长度，垂直方向为高度；水平方向即为宽度
padding	设置内边距

请添加图片描述

class MyState extends State {@overrideWidget build(BuildContext context) {Random random = Random();List<Widget> list = [];for (int i = 0; i < 100; i++) {int r = random.nextInt(255);int g = random.nextInt(255);int b = random.nextInt(255);Container container = Container(alignment: Alignment.center,child: Text(i.toString()),color: Color.fromARGB(255, r, g, b),padding: EdgeInsets.fromLTRB(0, 20, 0, 20),);list.add(container);}ListView listView = ListView(children: list);return Scaffold(appBar: AppBar(title: Text(""), centerTitle: true),body: listView,);}
}

Listview.builder

一般用于来源于网络的数据。数据量大、数据条数不可预见的情况。
itemCount显示的数据条数。

ListView.builder(itemCount: nums,itemBuilder: (context, index) {return list[index];},);

点击添加按钮每次多显示10条数据。
请添加图片描述

class MyState extends State {int nums = 10;@overrideWidget build(BuildContext context) {Random random = Random();List<Widget> list = [];for (int i = 0; i < 100; i++) {int r = random.nextInt(255);int g = random.nextInt(255);int b = random.nextInt(255);Container container = Container(alignment: Alignment.center,child: Text(i.toString()),color: Color.fromARGB(255, r, g, b),padding: EdgeInsets.fromLTRB(0, 20, 0, 20),);list.add(container);}ListView listView2 = ListView.builder(itemCount: nums,itemBuilder: (context, index) {return list[index];},);return Scaffold(appBar: AppBar(title: Text(""), centerTitle: true),body: listView2,floatingActionButton: FloatingActionButton(onPressed: () {setState(() {nums = nums + 10;});},child: Text("添加"),),);}
}

Listview.separated

用于在列表项之间的分割线。

请添加图片描述

class MyState extends State {@overrideWidget build(BuildContext context) {Random random = Random();List<Widget> list = [];for (int i = 0; i < 100; i++) {int r = random.nextInt(255);int g = random.nextInt(255);int b = random.nextInt(255);Container container = Container(alignment: Alignment.center,child: Text(i.toString()),color: Color.fromARGB(255, r, g, b),padding: EdgeInsets.fromLTRB(0, 20, 0, 20),);list.add(container);}ListView listView3 = ListView.separated(itemBuilder: (context, index) {return list[index];},separatorBuilder: (context, index) {return Container(width: MediaQuery.of(context).size.width,height: 5,color: Colors.white,);},itemCount: list.length,);return Scaffold(appBar: AppBar(title: Text(""), centerTitle: true),body: listView3,);}
}