Flutter StreamBuilder 实现局部刷新 Widget

Stream 就是事件流或者管道,是基于事件流驱动设计代码,然后监听订阅事件,并针对事件变换处理响应。

Stream 分单订阅流和广播流,单订阅流在发送完成事件之前只允许设置一个监听器,并且只有在流上设置监听器后才开始产生事件,取消监听器后将停止发送事件.

核心使用代码为:

本页面实现 Demo 效果如下

程序入口

Dart 复制代码
main() {
  runApp(MaterialApp(
    //不显示 debug标签
    debugShowCheckedModeBanner: false,
    //显示的首页面
    home: DemoStreamBuilder(),
  ));
}

DemoStreamBuilder 主页面

Dart 复制代码
///代码清单
class DemoStreamBuilder extends StatefulWidget {
  @override
  _DemoStreamBuilderState createState() => _DemoStreamBuilderState();
}

class _DemoStreamBuilderState extends State<DemoStreamBuilder> {

  int _count = 0;
  //流Stream 控制器
  StreamController<int> _streamController = StreamController();

  @override
  void dispose() {
    //销毁
    _streamController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    //
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          _count++;
          //发送消息
          _streamController.add(_count);
        },
      ),
      appBar: AppBar(
        title: Text("StreamBuilder"),
      ),
      body: Container(
        padding: EdgeInsets.all(30),
        child: Column(
          children: [
            //接收消息
            StreamBuilder<int>(
              //初始值
              initialData: _count,
              //绑定Stream
              stream: _streamController.stream,
              builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
                return Text("测试使用 ${snapshot.data}");
              },
            ),

            Text("测试使用"),
            Text("测试使用"),
          ],
        ),
      ),
    );
  }
}

Flutter StatefulBuilder 用来实现局部数据刷新

1 作用描述

用来实现局部数据刷新的功能,官网描述如下:

  • A platonic widget that both has state and calls a closure to obtain its child widget. 一个柏拉图式的小部件,它既有状态,又调用一个闭包来获取它的子小部件。
  • The StateSetter function passed to the builder is used to invoke a rebuild instead of a typical State's State.setState.传递给构建器的StateSetter函数用于调用重构,而不是典型的State的State. setstate。
  • Since the builder is re-invoked when the StateSetter is called, any variables that represents state should be kept outside the builder function.由于在调用StateSetter时将重新调用构建器,所以表示状态的任何变量都应该保留在构建器函数之外。

2 基本使用核心代码

Dart 复制代码
class DemoStatefulBuilderPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //状态构建器
      body: buildStatefulBuilder(),
    );
  }
}
Dart 复制代码
int _count = 0;
  StatefulBuilder buildStatefulBuilder() {
    return StatefulBuilder(
      //构建状态改变的Widget
      builder: (BuildContext context, void Function(void Function()) setState) {
        //居中
        return Center(
          //手势识别
          child: GestureDetector(
            child: Text("早起的年轻人 $_count"),
            //单击事件
            onTap: () {
              //刷新当前  StatefulBuilder 中的状态
              setState(() {
                _count++;
              });
            },
          ),
        );
      },
    );
  }

Flutter 实现局部刷新

当widget需要进行刷新时,我们可以通过调用widget的setState方法来实现,setState随后会调用State的build方法来进行重建

Dart 复制代码
//请求刷新
  setState((){
    
  });


  #State<T extends StatefulWidget>
  @override
  Widget build(BuildContext context) {
    //构建新的Widget
    return new Text(_text);
  }

那么,如果 我们能将 build方法中的 return new Text(_text) 暴漏出去,我们就可以实现通用的 局部刷新 Widget。

实现方案

  1. 接口回调,将return new Text(_text);暴露出去:

用typedef function实现

Dart 复制代码
//定义函数别名
 typedef BuildWidget = Widget Function();

将函数别名 BuildWidget 作为参数,传递到State.build方法即可

完整代码

Dart 复制代码
import 'package:flutter/material.dart';

//封装 通用局部刷新工具类
//定义函数别名
typedef BuildWidget = Widget Function();

class PartRefreshWidget extends StatefulWidget {

  PartRefreshWidget(Key key, this._child): super(key: key);
  BuildWidget _child;

  @override
  State<StatefulWidget> createState() {
    return PartRefreshWidgetState(_child);
  }

}

class PartRefreshWidgetState extends State<PartRefreshWidget> {

  BuildWidget child;

  PartRefreshWidgetState(this.child);

  @override
  Widget build(BuildContext context) {
    return child.call();
  }

  void update() {
    print('update');
    setState(() {

    });
  }
  
}

使用:

Dart 复制代码
import 'package:flutter/material.dart';

import 'PartRefreshWidget.dart';

class GlobalKeyDemo extends StatefulWidget {
  @override
  _GlobalKeyDemoState createState() => _GlobalKeyDemoState();
}

class _GlobalKeyDemoState extends State<GlobalKeyDemo> {
  int _count = 0;

  //使用1 创建GlobalKey
  GlobalKey<PartRefreshWidgetState> globalKey = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    print('----------------build');

    return Scaffold(
        appBar: AppBar(
          title: Text("inheritedWidget"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              //使用2 创建通用局部刷新widget
              PartRefreshWidget(globalKey, () {
                ///创建需要局部刷新的widget
                return Text(
                  '变化的:$_count',
                  style: TextStyle(color: Colors.green),
                );
              }),
              Text('不变的: $_count'),
              RaisedButton(
                onPressed: () {
                  //点击
                  _count++;
                  //使用3调用刷新方法
                  globalKey.currentState.update();
                },
              ),
            ],
          ),
        )
    );
  }
}

效果如下图所示:

相关推荐
懒大王爱吃狼31 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
阿伟*rui2 小时前
配置管理,雪崩问题分析,sentinel的使用
java·spring boot·sentinel
XiaoLeisj4 小时前
【JavaEE初阶 — 多线程】单例模式 & 指令重排序问题
java·开发语言·java-ee
paopaokaka_luck4 小时前
【360】基于springboot的志愿服务管理系统
java·spring boot·后端·spring·毕业设计
dayouziei4 小时前
java的类加载机制的学习
java·学习
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
Yaml45 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
小小小妮子~6 小时前
Spring Boot详解:从入门到精通
java·spring boot·后端
hong1616886 小时前
Spring Boot中实现多数据源连接和切换的方案
java·spring boot·后端