Flutter实现局部刷新
在Flutter中,如果我们想要更新页面中的某个widget的状态的话,一般会使用setState方法重走build方法来刷新。当页面布局复杂的时候,这样肯定是不行的。
下面提供了两种局部刷新的方式,通过provider和StreamBuilder来实现局部刷新
1、通过provider刷新
首先在pubspec.yaml中添加provider依赖
# provider provider: ^3.1.0
下面通过provider来实现一个发送验证码的案例。
创建一个TimerModel文件
import 'dart:async'; import 'package:flutter/material.dart'; import 'package:rxdart/rxdart.dart'; class TimerModel extends ChangeNotifier{ StreamSubscription _subscription; int _count = 0;///当前计数 int get count => 10 - _count;///剩余时间 _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("短信倒计时"), ), 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 ? "获取验证码" : '${timerModel.count} 秒后重发', style: timerModel.count == 0 ? TextStyle(color: Colors.blue, fontSize: 14) : TextStyle(color: Colors.grey, fontSize: 14), ), ); }), ), ), ) ); } }
可以看到MyApp是继承自 StatelessWidget的,是一个没有状态的widget。
通过在TimerModel中调用notifyListeners();实现刷新的效果。
2、StreamBuilder实现局部刷新
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("短信倒计时"), ), 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 ? "获取验证码" : '${snapshot .data} 秒后重发', 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中添加一个事件流,这个流会被StreamBuilder中stream接收,然后触发builder方法。
最后在页面销毁的时候释放资源。
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)