Flutter启动页以及下拉刷新学习

页面刷新以及启动图加载

1.启动图制作

drawable下

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/launch_image"></item>
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="fill"
android:mipMap="true"
//你的加载图片
android:src="@mipmap/launch_image" />
</item>
</layer-list>

2.实现页面刷新

​ 参考文档:https://www.cnblogs.com/upwgh/p/11435721.html

当列表的数据非常多时,需要使用长列表,比如淘宝后台的订单列表,手机通讯录等,这些列表项数据很多,长列表也是使用ListView作为基础组件,只不过需要添加一个列表项构造器itemBuilder。Flutter的长列表组件其实相当于Android中的RecyclerView,它会自动为您回收列表元素。在创建ListView.builder时,需要传入两个参数,一个列表的初始长度,一个itemBuilder函数。ListVIew还支持基于Sliver的延迟构建模型。

​ 基于Sliver的延迟构建模式:

通常可滚动组件的子组件可能会非常多,占用的总高度也会非常大,如果要一次性将子组件全部构建出将会导致性能差的问题出现,为此,Flutter中提出一个Sliver(中文为”薄片”的意思)概念,如果一个可滚动组件支持Sliver模型,那么该滚动组件可以将子组件分成好多个薄片(Sliver),只有当Sliver出现在视口时才会去构建它,这种模型也成为”基于Sliver的延迟构建模型”。可滚动组件中有很多都支持基于Sliver的延迟构建模型,如ListView、GridView,但是也有不支持该模型的,如SingleChildScrollView。

1.使用ListVIew.separated给列表项之间添加一个分割组件

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
import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget {

//初始化数据源
final List<String> items = new List<String>.generate(200, (i)=>"Item $i");

@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'SingleChildScrollView Demo',
home: new Scaffold(
appBar: AppBar(
title: new Text('SingleChildScrollView Demo'),
),
body:new ListView.separated(
//列表滑动到边界时,显示iOS的弹出效果
physics: BouncingScrollPhysics(),
itemCount: items.length,
//列表项构造器
itemBuilder: (context,index){
return ListTile(title: new Text('${items[index]}'),);
},
//分割构造器
separatorBuilder: (context,index){
//分割组件
return new Divider(color: Colors.blue,);
},
),
),
);
}
}
  • 下拉刷新

    Flutter给我们提供了下拉刷新功能RefreshIndicator的组件,先整体说明一下下面Demo的代码逻辑,其实很简单,body返回一个RefreshIndicator组件,在该组件内的子组件是一个ListView,重点说一下RefreshIndicator的下拉回调方法onRefresh,在回调方法内延迟2秒中后将list内容清空,并且重新给list列表添加新的数据。

代码

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
import 'package:flutter/material.dart';
import 'package:flutterlogin/file/uploadFile.dart';
import 'package:flutterlogin/file/custome_router.dart';

class AirplayScreen extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new _Refresh();
}

}
class _Refresh extends State<AirplayScreen>{

var _items = new List<String>();

@override
void initState() {
// TODO: implement initState
super.initState();
getData();

}
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: '消息',
home: new Scaffold(
appBar: new AppBar(
title: new Text('消息'),
),
body: new RefreshIndicator(
onRefresh: _onRefresh,
child: new ListView.separated(itemBuilder: (context,index){
return ListTile(
title: new Text('${_items[index]}'),
);
},
//分割构造器
separatorBuilder: (context,index){
return new Divider(color: Colors.blue,);
},
//_items.length + 1是为了给最后一行的加载loading留出位置
itemCount:_items.length
),
),
),
);
}
void getData() {
//初始数据源
for (int i=0;i<20;i++){
_items.insert(_items.length, "第${_items.length}条原始数据");
print(_items[i]);
}
}
Future<void> _onRefresh() async {
await Future.delayed(Duration(seconds: 2)).then((e){
setState(() {
_items.clear();
for (int i=0;i<20;i++){
_items.insert(_items.length, "第${_items.length}条下拉刷新后的数据");
}
});
});
}
@override
void dispose() {
super.dispose();
}
}

这里需要注意的是,onRefresh回调方法要增加async….await,不然会出现下拉刷新的loading不会消失的问题:

1
2
3
4
5
6
7
8
9
10
Future<void> _onRefresh() async {
await Future.delayed(Duration(seconds: 2)).then((e){
setState(() {
_items.clear();
for (int i=0;i<20;i++){
_items.insert(_items.length, "第${_items.length}条下拉刷新后的数据");
}
});
});
}

效果:

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×