flutter刷新頁(yè)面的方法

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)求多次接收值
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
禁止轉(zhuǎn)載,如需轉(zhuǎn)載請(qǐng)通過(guò)簡(jiǎn)信或評(píng)論聯(lián)系作者。

推薦閱讀更多精彩內(nèi)容