Flutter StreamBuilder 实现局部刷新 Widget

简介: Flutter StreamBuilder 实现局部刷新 Widget

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

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

核心使用代码为:

本页面实现 Demo 效果如下

程序入口

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

DemoStreamBuilder 主页面

 
///代码清单
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 基本使用核心代码

class DemoStatefulBuilderPage extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //状态构建器
      body: buildStatefulBuilder(),
    );
  }
}
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方法来进行重建

//请求刷新
  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实现

//定义函数别名
 typedef BuildWidget = Widget Function();

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

完整代码

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(() {
 
    });
  }
  
}

使用:

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();
                },
              ),
            ],
          ),
        )
    );
  }
}

效果如下图所示:

相关文章
|
4天前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
|
2月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
2月前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
2月前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
2月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
2月前
|
前端开发 开发者 UED
Flutter的自定义Painter:深入探索自定义绘制Widget的技术实现
【4月更文挑战第26天】Flutter的自定义Painter允许开发者根据需求绘制独特UI,通过继承`CustomPaint`类和重写`paint`方法实现。在`paint`中使用`Canvas`绘制图形、路径等。创建自定义Painter类后,将其作为`CustomPaint` Widget的`painter`属性使用。此技术可实现自定义形状、渐变、动画等复杂效果,提升应用视觉体验。随着Flutter的进化,自定义Painter将提供更丰富的功能。
|
2月前
|
开发框架 搜索推荐 Android开发
Flutter的Widget基础:概念、分类与深入探索
【4月更文挑战第26天】Flutter Widget详解:基础、分类与工作原理。Widget是Flutter UI的核心,描述界面外观而非直接渲染。分为基础、布局、可滚动及状态管理四大类。基于响应式编程,状态变化时自动更新UI。了解其概念、分类和原理,能助开发者高效构建精美应用。随着Flutter生态发展,Widget系统潜力无限。
|
11月前
Flutter源码分析笔记:Widget类源码分析
本文记录阅读与分析Flutter源码 - Widget类源码分析。
76 0
Flutter源码分析笔记:Widget类源码分析
|
10月前
|
Dart 前端开发 开发工具
谷歌移动UI框架Flutter教程之Widget
谷歌移动UI框架Flutter教程之Widget
|
12月前
|
API Android开发 容器
Flutter控件之基类Widget封装
基类的Widget主要确定以下几个方面,第一就是,自定义一个抽象类还是非抽象类,第二、继承方式,采取有状态还是无状态,第三、关于组件的点击方式,如何进行实现。
129 0