Flutte ListView 列表组件

目录

1、垂直列表

         1.1 实现用户中心的垂直列表

2、垂直图文列表

        2.1 动态配置列表

        2.2 for循环生成一个动态列表

        2.3 ListView.builder配置列表

---

列表布局是我们项目开发中最常用的一种布局方式。Flutter中我们可以通过ListView来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有以下分类:

1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表

1、垂直列表

import 'package:flutter/material.dart';
import 'package:wyze_app_live/test1/test11.dart';
import 'package:wyze_app_live/test2/main.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow),home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return ListView(children: <Widget>[ListTile(title: Text("我是一个列表")),Divider(),ListTile(title: Text("我是一个列表")),Divider(),ListTile(title: Text("我是一个列表")),Divider(),ListTile(title: Text("我是一个列表")),Divider(),ListTile(title: Text("我是一个列表")),Divider(),ListTile(title: Text("我是一个列表")),],);}
}

         1.1 实现用户中心的垂直列表

import 'package:flutter/material.dart';
import 'package:wyze_app_live/test1/test11.dart';
import 'package:wyze_app_live/test2/main.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow),home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return ListView(children: <Widget>[ListTile(leading: Icon(Icons.home, color: Colors.red),title: Text("首页"),),Divider(),ListTile(leading: Icon(Icons.dangerous, color: Colors.yellow),title: Text("全部订单"),),Divider(),ListTile(leading: Icon(Icons.h_mobiledata),title: Text("我的收藏"),trailing: Icon(Icons.chevron_right),),Divider(),ListTile(leading: Icon(Icons.wallet),title: Text("在线客服"),trailing: Icon(Icons.chevron_right),),],);}
}

2、垂直图文列表

import 'package:flutter/material.dart';
import 'package:wyze_app_live/test1/test11.dart';
import 'package:wyze_app_live/test2/main.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow),home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return ListView(// padding: EdgeInsets.all(10),padding: EdgeInsets.fromLTRB(0,40,0,0),children: <Widget>[ListTile(leading: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/26/PHOT5Lpc218n1dZ8adgabOGU250526_1000x2000.jpg"),title: Text("初夏乡村田园色块分明"),subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),),Divider(),ListTile(leading: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg"),title: Text("初夏乡村田园色块分明"),subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),),Divider(),ListTile(leading: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/26/PHOT5Lpc218n1dZ8adgabOGU250526_1000x2000.jpg"),title: Text("初夏乡村田园色块分明"),subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),trailing: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg"),),Divider(),ListTile(title: Text("初夏乡村田园色块分明"),subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),trailing: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg"),),Divider(),],);}
}

        2.1 动态配置列表

import 'package:flutter/material.dart';
import 'package:wyze_app_live/test1/test11.dart';
import 'package:wyze_app_live/test2/main.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow),home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {//自定义方法List<Widget> initList() {List<Widget> list = [];for (var i = 0; i < 20; i++) {list.add(ListTile(leading: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg",),title: Text("初夏乡村田园色块分明"),subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),),);}return list;}@overrideWidget build(BuildContext context) {return ListView(// padding: EdgeInsets.all(10),padding: EdgeInsets.fromLTRB(0, 40, 0, 0),children: initList());}
}

        2.2 for循环生成一个动态列表

import 'package:flutter/material.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow), home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {//自定义方法List<Widget> initList() {List<Widget> list = [];for (var i = 0; i < 20; i++) {list.add(ListTile(leading: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg",),title: Text("初夏乡村田园色块分明"),subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),),);}return list;}List list = [{"title": "Candy Shop","imageUrl":"https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg","author": "Mohamed Chahin",},{"title": "Candy Shop","imageUrl":"https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg","author": "Mohamed Chahin",},];//自定义方法 map方式遍历List<Widget> initList1() {//map方式遍历var template = list.map((value) {return ListTile(leading: Image.network("${value["imageUrl"]}"),title: Text("${value["title"]}"),subtitle: Text("${value["author"]}"),);});return template.toList();}//自定义方法 for方式遍历List<Widget> initList2() {List<Widget> template = [];for (var i = 0; i < list.length; i++) {template.add(ListTile(leading: Image.network("${list[i]["imageUrl"]}"),title: Text("${list[i]["title"]}"),subtitle: Text("${list[i]["author"]}"),),);}return template;}@overrideWidget build(BuildContext context) {return ListView(// padding: EdgeInsets.all(10),padding: EdgeInsets.fromLTRB(0, 40, 0, 0),children: initList2(),);}
}

        2.3 ListView.builder配置列表

import 'package:flutter/material.dart';void main() {runApp(MyTestApp());
}class MyTestApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow),home: Scaffold(appBar: AppBar(title: Text("App")),body: MyTestHomePage(),),);}
}//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {List list = [{"title": "Candy Shop","imageUrl":"https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg","author": "Mohamed Chahin",},{"title": "Candy Shop1","imageUrl":"https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg","author": "Mohamed Chahin",},];@overrideWidget build(BuildContext context) {return ListView.builder(itemCount: list.length,//循环的次数itemBuilder: (context, index) { //itemBuilderreturn ListTile( //item Infoleading: Image.network(list[index]["imageUrl"]),title: Text(list[index]["title"]),subtitle: Text(list[index]["author"]),);},);}
}