目錄

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"]),);},);}
}