Flutter - 列表实现

列表布局在手机上是最最常用的控件了。iOS的UITableView和Android上的RecycleView尤其的强大。
Flutter中也给我们提供了ListView,就目前的体验来看,流畅度跟原生的比还是有一点差距的,滑动起来还是丢帧。

基于ListView实现水平和垂直方式滚动的列表

  • 如何实现垂直滚动的列表?
  • 如何实现水平滚动列表?

如何实现垂直滚动列表?

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
34
35
36
37
38
39
40
import 'package:flutter/material.dart';

void main() => runApp(MyApp());
const CITY_NAMES = [ '北京', '上海', '广州', '深圳', '杭州', '苏州', '成都', '武汉', '郑州', '洛阳', '厦门', '青岛', '拉萨' ];

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Basic List';

return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
children: _buildList(),
),
),
);
}

List<Widget> _buildList() {
return CITY_NAMES.map((city) => _item(city)).toList();
}

Widget _item(String city) {
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.teal),
child: Text(
city,
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
}
}

如何实现水平滚动列表?

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
34
35
36
37
38
39
40
41
42
43
44
import 'package:flutter/material.dart';

void main() => runApp(MyApp());
const CITY_NAMES = [ '北京', '上海', '广州', '深圳', '杭州', '苏州', '成都', '武汉', '郑州', '洛阳', '厦门', '青岛', '拉萨' ];

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = '水平';

return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Container(
height: 200,
child: ListView(
scrollDirection: Axis.horizontal,
children: _buildList(),
),
),
),
);
}

List<Widget> _buildList() {
return CITY_NAMES.map((city) => _item(city)).toList();
}

Widget _item(String city) {
return Container(
width: 160,
margin: EdgeInsets.only(right: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.teal),
child: Text(
city,
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
}
}

下拉刷新与上拉加载

  • 如何实现列表下拉刷新?
  • 如何实现上拉加载更多?

如何实现列表下拉刷新?

在Flutter中有一个RefreshIndicator,它是一个下拉刷新的widget,通过它我们可以实现列表的下拉刷新。

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import 'package:flutter/material.dart';

void main() => runApp(MyApp());
List<String> cityNames = [ '北京', '上海', '广州', '深圳', '杭州', '苏州', '成都', '武汉', '郑州', '洛阳', '厦门', '青岛', '拉萨' ];

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
final title = '高级功能列表下拉刷新与上拉加载更多功能实现';

return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: RefreshIndicator(
onRefresh: _handleRefresh,
child: ListView(
children: _buildList(),
),
),
),
);
}

Future<Null> _handleRefresh() async {
await Future.delayed(Duration(seconds: 2));
setState(() {
cityNames = cityNames.reversed.toList();
});
return null;
}

List<Widget> _buildList() {
return cityNames.map((city) => _item(city)).toList();
}

Widget _item(String city) {
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.teal),
child: Text(
city,
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
}
}

如何实现上拉加载更多?
为了给列表添加上了加载更多的功能,我们可以借助ScrollController,列表支持设置controller参数,通过ScrollController监听列表滚动的位置,来实现加载更多的功能。

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import 'package:flutter/material.dart';

void main() => runApp(MyApp());
List<String> cityNames = [ '北京', '上海', '广州', '深圳', '杭州', '苏州', '成都', '武汉', '郑州', '洛阳', '厦门', '青岛', '拉萨' ];

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
ScrollController _scrollController = ScrollController();

@override
void initState() {
_scrollController.addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
_loadData();
}
});

super.initState();
}

@override
void dispose() {
_scrollController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
final title = '高级功能列表下拉刷新与上拉加载更多功能实现';

return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: RefreshIndicator(
onRefresh: _handleRefresh,
child: ListView(
controller: _scrollController,
children: _buildList(),
),
),
),
);
}

_loadData() async {
await Future.delayed(Duration(milliseconds: 200));
setState(() {
List<String> list = List<String>.from(cityNames);
list.addAll(cityNames);
cityNames = list;
});
}

Future<Null> _handleRefresh() async {
await Future.delayed(Duration(seconds: 2));
setState(() {
cityNames = cityNames.reversed.toList();
});
return null;
}

List<Widget> _buildList() {
return cityNames.map((city) => _item(city)).toList();
}

Widget _item(String city) {
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.teal),
child: Text(
city,
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
}
}