1.setState(){}

這種方法最常見(jiàn)，但是有些地方引用的話，刷新的成本比較大，刷新的是整個(gè)頁(yè)面，數(shù)據(jù)太多加載太慢的話，會(huì)有閃爍的現(xiàn)象

2.利用GlobalKey進(jìn)行局部刷新

參考鏈接：https://blog.csdn.net/mubowen666/article/details/103988777
其他類似文章：http://www.lxweimin.com/p/23a2e8a96a79

這種方法類似于iOS中的set方法，通過(guò)設(shè)置某個(gè)屬性的時(shí)候，去刷新某個(gè)控件。在flutter中這種刷新方式，是對(duì)上面setState(){}方法的改進(jìn)，根本的方法還是setState(){}，只不過(guò)是通過(guò)方法去刷新某個(gè)控件。如下：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int count = 0;
  GlobalKey<_TextWidgetState> textKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            TextWidget(textKey), //需要更新的Text
            FlatButton(
              child: new Text('按鈕 $count'),
              color: Theme.of(context).accentColor,
              onPressed: () {
                count++; // 這里我們只給他值變動(dòng)，狀態(tài)刷新交給下面的Key事件
                textKey.currentState.onPressed(count);  //其實(shí)這個(gè)count值已經(jīng)改變了 但是沒(méi)有重繪所以我們看到的只是我們定義的初始值
              },
            ),
          ],
        ),
      ),
    );
  }
}

//封裝的widget
class TextWidget extends StatefulWidget {
  final Key key;

  const TextWidget(this.key);

  @override
  _TextWidgetState createState() => _TextWidgetState();
}

class _TextWidgetState extends State<TextWidget> {
  String text = "0";

  void onPressed(int count) {
    setState((){
      text = count.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Text(text);
  }
}

3.通過(guò)provider進(jìn)行局部刷新

內(nèi)容來(lái)源：https://cloud.tencent.com/developer/article/1719264

首先在pubspec.yaml中添加provider依賴

# provider 
provider: ^3.1.0

下面通過(guò)provider來(lái)實(shí)現(xiàn)一個(gè)發(fā)送驗(yàn)證碼的案例。

創(chuàng)建一個(gè)TimerModel文件

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';

class TimerModel extends ChangeNotifier{

 StreamSubscription _subscription;
 int _count = 0;///當(dāng)前計(jì)數(shù)

 int get count =  10 - _count;///剩余時(shí)間

 _setCount(){
 _count++;
 notifyListeners();
 }

 startTimer(){
 _count = 0;
 _subscription = Observable.periodic(Duration(seconds: 1))
  .startWith(10)
  .take(10)
  .listen((t){
  _setCount();
 });
 }

 @override
 void dispose() {
 _subscription?.cancel();
 super.dispose();
 }

頁(yè)面布局如下：

void main() =  runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
  home: Scaffold(
  appBar: AppBar(
   title: Text("短信倒計(jì)時(shí)"),
  ),
  body: Center(
   child: ChangeNotifierProvider<TimerModel (
   builder: (context) =  TimerModel(),
   child: Consumer<TimerModel (builder: (context, timerModel, _) {
    return RaisedButton(
    onPressed: () async {
     if (timerModel.count == 0) {
     timerModel.startTimer();
     }
    },

    child: Text(
     timerModel.count == 0 ? "獲取驗(yàn)證碼" : '${timerModel.count} 秒后重發(fā)',
     style: timerModel.count == 0
      ? TextStyle(color: Colors.blue, fontSize: 14)
      : TextStyle(color: Colors.grey, fontSize: 14),
    ),
    );
   }),
   ),
  ),
  )
 );
 }
}

可以看到MyApp是繼承自 StatelessWidget的，是一個(gè)沒(méi)有狀態(tài)的widget。
通過(guò)在TimerModel中調(diào)用notifyListeners();實(shí)現(xiàn)刷新的效果。

這種刷新方法，有點(diǎn)類似于iOS中的通知、觀察者模式(KVO)，通過(guò)監(jiān)聽(tīng)某個(gè)屬性的變化，對(duì)頁(yè)面進(jìn)行相應(yīng)的處理。

4.StreamBuilder實(shí)現(xiàn)局部刷新

承接第3點(diǎn)，作者文章后半部分提到了結(jié)合StreamBuilder對(duì)頁(yè)面進(jìn)行刷新：

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:rxdart/rxdart.dart';

void main() =  runApp(MyApp());

class MyApp extends StatelessWidget {

 final StreamController _streamController = StreamController<int ();

 int count = 10;

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
  home: Scaffold(
  appBar: AppBar(
   title: Text("短信倒計(jì)時(shí)"),
  ),
  body: Center(
   child: StreamBuilder<int (
    stream: _streamController.stream,
    initialData: 0,
    builder: (BuildContext context, AsyncSnapshot<int  snapshot) {
    return RaisedButton(
     onPressed: () async {
     if (snapshot.data == 0) {
      startTimer();
     }
     },

     child: Text(
     snapshot.data == 0 ? "獲取驗(yàn)證碼" : '${snapshot
      .data} 秒后重發(fā)',
     style: snapshot.data == 0
      ? TextStyle(color: Colors.blue, fontSize: 14)
      : TextStyle(color: Colors.grey, fontSize: 14),
     ),
    );
    }
   ),
  ),
  )
 );
 }


 startTimer(){
 count = 10;
 Observable.periodic(Duration(seconds: 1))
  .take(10)
  .listen((t){
  _streamController.sink.add(--count);
 });
 }
}

此方法是通過(guò)sink.add方法向streamController.sink中添加一個(gè)事件流，StreamBuilder接收到這個(gè)stream流后，觸發(fā)builder方法，去重繪頁(yè)面，最后在頁(yè)面小會(huì)的時(shí)候釋放掉資源。

StreamBuilder其實(shí)有更多的用處，不單單說(shuō)是簡(jiǎn)單的局部刷新用處，例如下面的，一個(gè)網(wǎng)絡(luò)請(qǐng)求方法不斷的接收stream圖片流事件，需要將這些圖片流展示在Image控件上，這樣就能夠?qū)崿F(xiàn)讓圖片變成視頻的效果：flutter一次請(qǐng)求多次接收值