如需转载,请注明出处:Flutter学习笔记(31)--异步更新UI
大家都知道,子线程不能操作UI控件,在我们Android的日常开发中,经常会遇到网络请求数据通过线程间通信,将数据发送到UI线程中去更新UI,在Flutter中是如何处理异步更新UI的呢?
今天我们介绍一下FutureBuilder。
const FutureBuilder({
Key key,
this.future,
this.initialData,
@required this.builder,
})
构造参数说明:
feture:接收一个Future对象,用于处理耗时操作。
initialData:默认数据。
builder:widget构建器,会在future的不同阶段多次调用。构建器签名如下:
Widget Function(BuildContext context, AsyncSnapshot<T> snapshot);
模拟一个网络请求数据回来后更新UI的场景,先看下整体的示例
import 'dart:async';
import 'package:flutter/material.dart';
class FutureBuilderDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _FutureBuilderDemoState();
}
}
class _FutureBuilderDemoState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FutureBuilderDemo',
home: new Scaffold(
appBar: AppBar(
title: new Text('FutureBuilderDemo'),
),
body: new Center(
child: FutureBuilder<String>(
future: mockNetworkData(),
initialData: '我是默认的数据',
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasError) {
return new Text('erro');
} else {
return new Text(snapshot.data);
}
},
),
),
),
);
}
Future<String> mockNetworkData() async {
return Future.delayed(Duration(seconds: 11), () => '我是网络请求的数据');
}
}
snapshot:会包含当前异步任务的状态信息及结果信息 ,比如我们可以通过snapshot.connectionState
获取异步任务的状态信息、通过snapshot.hasError
判断异步任务是否有错误等等
以上就是今天下拉刷新和上拉加载的全部内容了,如果有错误的地方或者有任何疑问,欢迎留言!!!