页面刷新以及启动图加载 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,); }, ), ), ); } }
代码
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}条下拉刷新后的数据"); } }); }); }
效果: