列表有以下分类：
1、垂直列表
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: ListView (children: const [
Icon(Icons.search, color: Colors.red, size: 50),
SizedBox(height: 100),
Icon(ItyingIcon.weix, size: 50, color: Color.fromARGB(255, 9, 240, 151)),
SizedBox(height: 100),
Icon(ItyingIcon.gouwu, size: 50, color: Colors.black),
SizedBox(height: 100),
Icon(ItyingIcon.weix, size: 50, color: Color.fromARGB(255, 27, 71, 54)),
],)
);
}
}
2、垂直图文列表
class MyApp1 extends StatelessWidget { const MyApp1({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return ListView( padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), children: <Widget>[ Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), ], ); } }
3、水平列表
scrollDirection: Axis.horizontal
class MyApp2 extends StatelessWidget { const MyApp2({super.key}); @override Widget build(BuildContext context) { return SizedBox( //指定固定尺寸 // width: 100.0, height: 100.0, child: ListView( scrollDirection: Axis.horizontal, //水平 padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), children: <Widget>[ Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), Image.network( "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"), ], ) ); } }
4、动态列表
(1)for循环实现动态列表
class MyApp3 extends StatelessWidget { MyApp3({Key? key}) : super(key: key) { print(ListText); } List<Widget> _initListData() { List<Widget> list = []; for (var i = 0; i < ListText.length; i++) { list.add(ListTile( leading: Image.network("${ListText[i]["imageUrl"]}"), title: Text("${ListText[i]["title"]}"), subtitle: Text("${ListText[i]["author"]}"), )); } return list; } @override Widget build(BuildContext context) { return ListView(children: _initListData()); } }
(2)map实现动态列表
class MyApp4 extends StatelessWidget { MyApp4({Key? key}) : super(key: key) { print(ListText); } List<Widget> _initListData() { var list = ListText.map((value) { return ListTile( leading: Image.network("${value["imageUrl"]}"), title: Text("${value["title"]}"), subtitle: Text("${value["author"]}"), ); }); return list.toList(); } @override Widget build(BuildContext context) { return ListView(children: _initListData()); } }
(3)ListView.builder实现动态列表
class MyApp5 extends StatelessWidget { List<String> list = []; MyApp5({Key? key}) : super(key: key) { for (var i = 0; i < 30; i++) { list.add("数据$i"); } } @override Widget build(BuildContext context) { return ListView.builder( itemCount: list.length, //循环的次数 itemBuilder: (context, index) { return ListTile( title: Text("${list[index]}"), ); }, ); } }
ListView.builder 里的 ScrollController
ScrollController({ double initialScrollOffset = 0.0, // 初始滚动位置 bool keepScrollOffset = true, // 是否保持滚动位置 String? debugLabel, // 调试标签 String? name, // 标识符 ScrollPosition? initialScrollPosition, // 初始滚动位置对象 ScrollPhysics? physics, // 滚动物理行为 ScrollController? parent, // 父级滚动控制器 String? restorationId, // 恢复ID })
-
initialScrollOffset: 这个参数用于设置滚动视图初始化时的滚动位置。默认值为0.0，表示滚动视图初始时显示在开始位置。如果您希望滚动视图初始化时显示在其他位置，可以设置这个参数。 -
keepScrollOffset: 这个参数控制当ScrollController被销毁时，是否保存滚动位置。默认值为true，即Flutter会尝试保持滚动位置不变，当ScrollController被重新创建时，可以恢复到以前的滚动位置。 -
debugLabel: 主要用于调试目的。当您在应用中使用多个ScrollController时，为每个ScrollController设置一个debugLabel可以帮助您更容易地区分它们。 -
name: 类似于debugLabel，name用于标识ScrollController。不同之处在于name可以用于生产环境中，例如在分析用户滚动行为时区分不同的滚动控制器。 -
initialScrollPosition: 这是一个高级参数，用于提供一个自定义的ScrollPosition。ScrollPosition控制滚动视图的位置，并响应用户的滚动输入。通常，您不需要手动设置这个参数，因为ScrollController会根据其他参数自动创建一个ScrollPosition。 -
physics: 定义滚动视图的物理特性，如滚动速度、滚动方向、弹簧效果等。Flutter提供了多种预定义的滚动物理行为，如BouncingScrollPhysics、ClampingScrollPhysics等，您可以通过这个参数自定义滚动行为。 -
parent: 允许将当前的ScrollController与一个父ScrollController关联起来。这在需要同步多个滚动视图的滚动行为时非常有用。例如，您可以通过设置parent参数，使得一个ListView和一个GridView滚动时保持同步。 -
restorationId: 用于在应用重启或页面重新创建时恢复滚动位置。设置这个参数后，Flutter会尝试在应用重新启动后，自动滚动到上次保存的滚动位置。
List.generate
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final List<Map<String, dynamic>> pages = [ {'color': Colors.red, 'text': 'Page 1'}, {'color': Colors.green, 'text': 'Page 2'}, {'color': Colors.blue, 'text': 'Page 3'}, {'color': Colors.yellow, 'text': 'Page 4'}, // 假设使用Colors.yellow替代重复的Colors.blue {'color': Colors.pink, 'text': 'Page 5'}, // 假设使用Colors.pink替代重复的Colors.blue ]; return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('List.generate Example'), ), body: ListView( children: List.generate( pages.length, (index) { final page = pages[index]; return Container( color: page['color'], height: 100, child: Center( child: Text( page['text'], style: TextStyle(color: Colors.white, fontSize: 24), ), ), ); }, ), ), ), ); } }
浙公网安备 33010602011771号