Flutter學習筆記（31）--非同步更新UI

如需轉載，請註明出處：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判斷非同步任務是否有錯誤等等

以上就是今天下拉刷新和上拉載入的全部內容了，如果有錯誤的地方或者有任何疑問，歡迎留言！！！