前言
Flutter的ListView列表组件学习笔记
ListView列表组件
ListTile()：列表元素
title：列表标题
subtitle：列表二级标题
leading：前置组件
trailing：后置组件
Divider()：一条直线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("文本内容"),
),
body: const App(),
),
));
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: const <Widget>[
ListTile(
title: Text("文本内容")
),
Divider(),
ListTile(
title: Text("文本内容2")
),
],
);
}
}
|
在标题前面添加一个组件
添加一个图片组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("文本内容"),
),
body: const App(),
),
));
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: const <Widget>[
ListTile(
leading: Image(image: NetworkImage("<src>")),
title: Text("文本内容"),
)
],
);
}
}
|
添加一个图标组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("文本内容"),
),
body: const App(),
),
));
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: const <Widget>[
ListTile(
leading: Icon(Icons.home),
title: Text("文本内容"),
)
],
);
}
}
|
在标题后面添加一个组件
添加一个图标组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("文本内容"),
),
body: const App(),
),
));
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: const <Widget>[
ListTile(
title: Text("文本内容1"),
trailing: Icon(Icons.chevron_right_sharp),
)
],
);
}
}
|
在ListView中添加任意组件
添加Container
- 在垂直列表中添加的Container宽度是自适应的，指定宽度无效，可以指定高度
- 在水平列表中添加的Container高度是自适应的，指定高度无效，可以指定宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("文本内容"),
),
body: const App(),
),
));
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Container(
height: 10,
decoration: const BoxDecoration(
color: Colors.red
),
),
],
);
}
}
|
指定列表方向
Axis.vertical：缺省值，垂直列表，可以垂直滑动
Axis.horizontal：水平列表，可以水平滑动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("文本内容"),
),
body: const App(),
),
));
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
...
],
);
}
}
|
通过build()方法遍历数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("文本内容"),
),
body: App(),
),
));
}
class App extends StatelessWidget {
List<int> list = [];
App({Key? key}) : super(key: key) {
for (var i = 0; i < 20; i++) {
list.add(i);
}
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) {
return ListTile(
title: Text("${list[index]}"),
);
}
);
}
}
|
完成
参考文献
哔哩哔哩——筱筱知晓