欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Flutter实现局部刷新

程序员文章站 2022-04-25 20:28:31
在flutter中,如果我们想要更新页面中的某个widget的状态的话,一般会使用setstate方法重走build方法来刷新。当页面布局复杂的时候,这样肯定是不行的。下面提供了两种局部刷新的方式,通...

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

下面提供了两种局部刷新的方式,通过providerstreambuilder来实现局部刷新

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中添加一个事件流,这个流会被streambuilderstream接收,然后触发builder方法。
最后在页面销毁的时候释放资源。

效果图

Flutter实现局部刷新

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