Flutter實(shí)現(xiàn)局部刷新

更新時(shí)間：2020年07月14日 08:39:28 作者：正義啊

這篇文章主要為大家詳細(xì)介紹了Flutter實(shí)現(xiàn)局部刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在Flutter中，如果我們想要更新頁面中的某個(gè)widget的狀態(tài)的話，一般會(huì)使用setState方法重走build方法來刷新。當(dāng)頁面布局復(fù)雜的時(shí)候，這樣肯定是不行的。

下面提供了兩種局部刷新的方式，通過provider和StreamBuilder來實(shí)現(xiàn)局部刷新

1、通過provider刷新

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

# provider
provider: ^3.1.0

下面通過provider來實(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();
 }
}

頁面布局如下：

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è)沒有狀態(tài)的widget。

通過在TimerModel中調(diào)用notifyListeners();實(shí)現(xiàn)刷新的效果。

2、StreamBuilder實(shí)現(xià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);
 });
 }
}

使用StreamBuilder來局部刷新，通過sink.add方法向streamController.sink中添加一個(gè)事件流，這個(gè)流會(huì)被StreamBuilder中stream接收，然后觸發(fā)builder方法。
最后在頁面銷毀的時(shí)候釋放資源。

效果圖