Flutter中ListView用法
ListView加载自带图标和自定义图标
Flutter SDK自带的有很多图标，引用Icons类在Icons属性后点之后便会有很多自带图标可以引用。
如图布局完整代码如下：
import 'package:flutter/material.dart';
import 'package:flutter_demo/iconFonts.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.yellow),
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView(
children: const [
ListTile(
leading: Icon(Icons.home),
title: Text("首页"),
),
Divider(),
ListTile(
leading: Icon(
Icons.assignment,
color: Colors.red,
),
title: Text("全部订单"),
),
Divider(),
ListTile(
leading: Icon(
Icons.payment,
color: Colors.green,
),
title: Text("待付款"),
),
Divider(),
ListTile(
leading: Icon(
Icons.favorite,
color: Colors.lightGreen,
),
title: Text("我的收藏"),
trailing: Icon(Icons.chevron_right_sharp),
),
Divider(),
ListTile(
leading: Icon(
Icons.people,
color: Colors.black54,
),
title: Text("在线客服"),
trailing: Icon(Icons.chevron_right_sharp),
),
Divider(),
ListTile(
leading: Icon(
IconFonts.gouwuchekong,
color: Colors.orange,
),
title: Text("购物车"),
trailing: Icon(Icons.chevron_right_sharp),
),
Divider(),
],
);
}
} 自定义图标用法差不多，首先在矢量图标库下载代码
下载后导入字体文件和图标json文件
然后加入字体文件配置代码
flutter:
uses-material-design: true
assets:
- images/2.0x/pic1.png
fonts:
- family: myIcon
fonts:
- asset: fonts/iconfont.ttf
- family: iconWeixin
fonts:
- asset: fonts/weixin.ttf然后新建自定义图标类
import 'package:flutter/material.dart';
class IconFonts {
static const IconData gouwuchekong =
IconData(0xe66e, fontFamily: "myIcon");
static const IconData zhiwen = IconData(0xe6ae, fontFamily: "myIcon");
static const IconData dingwei = IconData(0xe69b, fontFamily: "myIcon");
static const IconData weixin = IconData(0xf0106, fontFamily: "iconWeixin");
static const IconData yingshi = IconData(0xe694, fontFamily: "iconWeixin");
}
最后依赖类后直接通过IconFonts.gouwuchekong,直接引用就可以了
ListView加载网络图片和布局
完整代码：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.yellow),
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(10),//四周边距
children: [
ListTile(
leading: Image.network("https://www.itying.com/images/flutter/1.png"),
title: const Text("罕见！中央巡视为何点名足球腐败？"),
),
const Divider(),
ListTile(
leading: Image.network("https://www.itying.com/images/flutter/2.png"),
title: const Text("罕见！中央巡视为何点名足球腐败？"),
),
const Divider(),
ListTile(
leading: Image.network("https://www.itying.com/images/flutter/3.png"),//主图
title: const Text("罕见！中央巡视为何点名足球腐败？"),//主标题
subtitle: const Text(//副标题（内容）
"中央巡视是党章规定的一项重要制度，是加强党的建设的重要举措，是从严治党、维护党纪的重要手段，是加强党内监督的重要形式。"),
trailing:
Image.network("https://www.itying.com/images/flutter/4.png"),//尾图
),
const Divider(),
ListTile(
title: const Text("罕见！中央巡视为何点名足球腐败？"),
trailing:
Image.network("https://www.itying.com/images/flutter/5.png"),
),
const Divider(),
],
);
}
}
ListView默认纵向布局
完整代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.yellow),
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(10),
children: [
Image.network("https://www.itying.com/images/flutter/1.png"),
Container(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
height: 40,
child: const Text(
"图一",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 22),
),
),
Image.network("https://www.itying.com/images/flutter/2.png"),
Container(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
height: 40,
child: const Text(
"图二",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 22),
),
),
Image.network("https://www.itying.com/images/flutter/3.png"),
Container(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
height: 40,
child: const Text(
"图三",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 22),
),
),
Image.network("https://www.itying.com/images/flutter/4.png"),
Container(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
height: 40,
child: const Text(
"图四",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 22),
),
),
Image.network("https://www.itying.com/images/flutter/5.png"),
Container(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
height: 40,
child: const Text(
"图五",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 22),
),
),
Image.network("https://www.itying.com/images/flutter/6.png"),
Container(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
height: 40,
child: const Text(
"图六",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 22),
),
),
],
);
}
}
ListView横向布局
完整代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.yellow),
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
height: 160,
child: ListView(
scrollDirection: Axis.horizontal, //水平列表
padding: const EdgeInsets.all(10),
children: [
Container(
width: 160,
decoration: const BoxDecoration(color: Colors.white),
child: Column(
children: [
SizedBox(
height: 110,
child: Image.network(
"https://www.itying.com/images/flutter/1.png",
fit: BoxFit.cover,
),
),
const Text("图一"),
],
),
),
Container(
width: 160,
decoration: const BoxDecoration(color: Colors.white),
child: Column(
children: [
SizedBox(
height: 110,
child: Image.network(
"https://www.itying.com/images/flutter/2.png",
fit: BoxFit.cover,
),
),
const Text("图二"),
],
),
),
Container(
width: 160,
decoration: const BoxDecoration(color: Colors.white),
child: Column(
children: [
SizedBox(
height: 110,
child: Image.network(
"https://www.itying.com/images/flutter/3.png",
fit: BoxFit.cover,
),
),
const Text("图三"),
],
),
),
Container(
width: 160,
decoration: const BoxDecoration(color: Colors.white),
child: Column(
children: [
SizedBox(
height: 110,
child: Image.network(
"https://www.itying.com/images/flutter/4.png",
fit: BoxFit.cover,
),
),
const Text("图四"),
],
),
),
Container(
width: 160,
decoration: const BoxDecoration(color: Colors.white),
child: Column(
children: [
SizedBox(
height: 110,
child: Image.network(
"https://www.itying.com/images/flutter/5.png",
fit: BoxFit.cover,
),
),
const Text("图五"),
],
),
),
Container(
width: 160,
decoration: const BoxDecoration(color: Colors.white),
child: Column(
children: [
SizedBox(
height: 110,
child: Image.network(
"https://www.itying.com/images/flutter/6.png",
fit: BoxFit.cover,
),
),
const Text("图六"),
],
),
),
Container(
width: 160,
decoration: const BoxDecoration(color: Colors.white),
child: Column(
children: [
SizedBox(
height: 110,
child: Image.network(
"https://www.itying.com/images/flutter/7.png",
fit: BoxFit.cover,
),
),
const Text("图七"),
],
),
),
],
),
);
}
}
ListView动态加载数据
自定义数据
List listData = [
{
"title": "图一",
"author": "程序员",
"imageUrl": "https://www.itying.com/images/flutter/1.png",
},
{
"title": "图二",
"author": "程序员",
"imageUrl": "https://www.itying.com/images/flutter/2.png",
},
{
"title": "图三",
"author": "程序员",
"imageUrl": "https://www.itying.com/images/flutter/3.png",
},
{
"title": "图四",
"author": "程序员",
"imageUrl": "https://www.itying.com/images/flutter/4.png",
},
{
"title": "图五",
"author": "程序员",
"imageUrl": "https://www.itying.com/images/flutter/5.png",
},
{
"title": "图六",
"author": "程序员",
"imageUrl": "https://www.itying.com/images/flutter/6.png",
},
];引入自定义数据
import 'res/listData.dart';完整代码
import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
//第一种方法
/* List _list() {
List list = [];
for (var i = 0; i < listData.length; i++) {
list.add(ListTile(
leading: Image.network("${listData[i]["imageUrl"]}"),
title: Text("${listData[i]["title"]}"),
subtitle: Text("${listData[i]["author"]}"),
));
}
return list;
}*/
//第二种方法
List _list() {
var list = listData.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: _list(),
);
}
}
import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: listData.length,
itemBuilder: (context, index) {
return ListTile(
leading: Image.network(listData[index]["imageUrl"]),
title: Text(listData[index]["title"]),
subtitle: Text(listData[index]["author"]),
);
},
);
}
}