FlutterUI标准库widgets

async

FutureBuilder

1
2
3
4
5
6
7
8
9
10
11
FutureBuilder({
  this.future, //通常是一个异步耗时任务
  this.initialData,//初始数据
  required this.builder,//Widget构造器，该builder会在Future执行的不同阶段被调用多次
})

final AsyncWidgetBuilder<T> builder;

//snapshot包含当前异步任务的状态信息及结果
typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnapshot<T> snapshot);

实例

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


Widget build(BuildContext context) {
  return Center(
    child: FutureBuilder<String>(
      future: mockNetworkData(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        // 请求已结束
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            // 请求失败，显示错误
            return Text("Error: ${snapshot.error}");
          } else {
            // 请求成功，显示数据
            return Text("Contents: ${snapshot.data}");
          }
        } else {
          // 请求未结束，显示loading
          return CircularProgressIndicator();
        }
      },
    ),
  );
}

enum ConnectionState {
  /// 当前没有异步任务，比如[FutureBuilder]的[future]为null时
  none,

  /// 异步任务处于等待状态
  waiting,

  /// Stream处于激活状态（流上已经有数据传递了），对于FutureBuilder没有该状态。
  active,

  /// 异步任务已经终止.
  done,
}


Read More
FlutterUI标准库widgets

media_query

MediaQuery

MediaQuery 用于查询解析给定数据的媒体信息（例如，window宽高/横竖屏/像素密度比等信息）官方提供这个组件让开发者可以获取想要的数据。它主要用于不同尺寸大小设备的适配。

Object > DiagnosticableTree > Widget > ProxyWidget > InheritedWidget > MediaQuery

常用属性

data → MediaQueryData：MediaQueryData是MediaQuery.of获取数据的类型。

使用MediaQuery必须要MaterialApp 或者WidgetsApp去包裹我们的Widget，这样才能够提供正常使用它，否则会出现错误。

1
2
3
4
var deviceData = MediaQuery.of(context); // 返回 MediaQueryData
var width = deviceData.size.width; //返回context所在的窗口宽度
var height = deviceData.size.height;//返回context所在的窗口高度

Read More