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方法。
最后在页面销毁的时候释放资源。

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。