Flutter局部刷新

在Flutter中，如果我们想要更新页面中的某个widget的状态的话，一般会使用setState方法重走build方法来刷新。当页面布局复杂的时候，这样肯定是不行的。

下面提供了两种局部刷新的方式，通过provider和StreamBuilder来实现局部刷新

1、通过provider刷新

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

  # providerprovider: ^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();});}@overridevoid dispose() {_subscription?.cancel();super.dispose();}
}

页面布局如下：

void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget 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;@overrideWidget 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方法。
最后在页面销毁的时候释放资源。

效果图

Flutter局部刷新相关推荐

flutter 局部刷新
前提框架:fish Redux 第一种方式:ValueNotifier State中初始化ValueNotifier: ValueNotifier<int> planCounter = V ...
flutter怎么手动刷新_flutter局部刷新的实现示例
局部刷新我们在做项目的时候,都需要单独的去刷新一个值,而不是把整个界面都重绘.大家都知道setState是进行重绘的一个方法,他会执行生命周期的一个build,这将会使得整个界面来进行重绘.当然我们 ...
Flutter ListView 局部刷新数据、ListView点赞收藏
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒随时随记每日积累随心而过 [x2]各种系列的视频教程 ...
Flutter Provider局部刷新
1.添加Provider依赖 dependencies:provider: ^4.0.4flutter:sdk: flutter 最新版本https://pub.dev/packages/provid ...
flutter怎么手动刷新_Flutter 小技巧实现通用的局部刷新
请移步评论用官方的吧前言在使用GlobalKey局部刷新方式中介绍了如何通过GlobalKey实现局部刷新优化性能,只是每次我们进行局部刷新的时候都需要定义widget.定义state.实现b ...
flutter comsumer局部刷新的问题
网络上说用provider的comsumer可以实现局部刷新,但是实际操作起来效果并不是特别好.comsumer外面的也会跟着刷新. 可以使用selector Selector(builder: (B ...
php div图片局部刷新,前端jquery 后端 thinkphp 实现局部刷新
本例用jquery 实现通过把一个标签的变量传递给后台处理后,然后返回给前台另外一个变量大致流程是这样的:前端编写html代码 ,加入要局部刷新的 jquery代码并指定要响应的url, 首先 ...
redux 局部刷新_如何使用Redux Observables和刷新令牌API获取新的访问令牌
redux 局部刷新 by Sachin Kumar 由Sachin Kumar 如何使用Redux Observables和刷新令牌API获取新的访问令牌 (How to get a new acc ...
struts2 jquery ajax 局部刷新遇到的各种问题
我们的网站一开始都是由前台提交表单到action,每次一个小操作整个页面都会刷新,影响用户体验,这次由我实现部分功能的局部刷新,但是初学ajax遇到不少问题 1.我们在struts.xml外扩展了一个 ...

Flutter局部刷新

1、通过provider刷新

2、StreamBuilder实现局部刷新

效果图

Flutter局部刷新相关推荐

最新文章

热门文章