Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter中是使用RxDart代替Stateful

Flutter中是使用RxDart代替Stateful

作者头像
我不是码神
发布于 2022-07-28 06:31:26
发布于 2022-07-28 06:31:26
1.2K20
代码可运行
举报
文章被收录于专栏:流媒体技术流媒体技术
运行总次数:0
代码可运行

本文先列举一个最简单的例子,以后遇到比较典型的例子再分享:

先看一个常规的写法,首页上面有两个tab的例子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class MainTabPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MainTabPageState();
  }
}

class MainTabPageState extends State<MainTabPage> {
  int _currentIndex = 0;
  final pageList = [
    TabInfo(Home(), "首页", Icons.home),
    TabInfo(Text(""), "我的", Icons.person)
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        child: Scaffold(
            backgroundColor: Color(0xFFF5F5F5),
            bottomNavigationBar: BottomNavigationBar(
              items: pageList.map((info) => BottomNavigationBarItem(
                  title: Text(info.title), icon: Icon(info.icon))).toList(),
              currentIndex: _currentIndex,
              type: BottomNavigationBarType.fixed,
              onTap: (int index) {
                setState(() {
                  _currentIndex = index;
                });
              },
            ),
            body: pageList[_currentIndex].widget),
        length: pageList.length);
  }
}

其中_currentIndex记录了当前tab的索引,onTap中调用setState来更新视图,没毛病。

现在使用RxDart改写这个页面。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class MainTabPage extends StatelessWidget {
  final pageList = [
    TabInfo(Home(), "首页", Icons.home),
    TabInfo(Text(""), "我的", Icons.person)
  ];
  final changeTabStream = PublishSubject<int>();
  @override
  Widget build(BuildContext context) => DefaultTabController(
        child: StreamBuilder<int>(
            initialData: 0,
            stream: changeTabStream,
            builder: (context, snapshot) => Scaffold(
                  backgroundColor: Color(0xFFF5F5F5),
                  bottomNavigationBar: BottomNavigationBar(
                    items: pageList
                        .map((info) => BottomNavigationBarItem(
                            title: Text(info.title), icon: Icon(info.icon)))
                        .toList(),
                    currentIndex: snapshot.data,
                    type: BottomNavigationBarType.fixed,
                    onTap: changeTabStream.add,
                  ),
                  body: pageList[snapshot.data].widget,
                )),
        length: pageList.length,
      );
}

我们看到不需要再定义_currentIndex,然后我们只需要继承StatelessWidget 。取而代之的是我们定义了changeTabStream,这是一个PublishSubject用来发送事件,Flutter官方提供了StreamBuilder来响应这种事件流,很贴心。

这个例子还看不出Rx的明显优势,但是大家可以思考一下,Rx的好处在哪里。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-03-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
2 条评论
热度
最新
优势好处到底再哪里呀 ┭┮﹏┭┮ 怎么看不出来呀
优势好处到底再哪里呀 ┭┮﹏┭┮ 怎么看不出来呀
11点赞举报
这是flutter刚出来时玩的,现在flutter估计已经发生了很大变化了
这是flutter刚出来时玩的,现在flutter估计已经发生了很大变化了
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
Vue常用特性-计算属性computed 和 侦听器 watch
1.4.computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
梨涡浅笑
2020/12/02
5800
Vue常用特性-计算属性computed 和 侦听器  watch
一文快速上手Vue之计算属性和侦听器,过滤器
过滤器不改变真正的`data`,而只是改变渲染的结果,并返回过滤后的版本。在很多不同的 情况下,过滤器都是有用的,比如尽可能保持 API 响应的干净,并在前端处理数据的格式。
一个风轻云淡
2022/11/15
3670
一文快速上手Vue之计算属性和侦听器,过滤器
Vue2(二)侦听器和计算属性
当我们给某个数据对象加上侦听器后,一旦该对象的值发送改变,就会触发我们在监听器上自定义的函数,从而执行我们在函数中定义的的操作。
CodeGoat24
2022/02/09
6130
Vue2(二)侦听器和计算属性
Vue常用特性
需求:输入框中输入姓名,失去焦点时验证是否存在,如果已 经存在,提示从新输入,如果不存在,提示可以使用。
星辰_大海
2022/05/10
1.6K0
Vue常用特性
03 . Vue基础之计算属性,过滤器
vue计算属性 /* 复杂逻辑,模板难以维护 1. 基础例子 2. 计算缓存 VS methods - 计算属性是基于他们的依赖进行缓存的. - 计算属性只
iginkgo18
2020/11/24
1.8K0
03 . Vue基础之计算属性,过滤器
前端基础-计算属性与侦听器
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。因此我们可以使用方法,来进行运算并返回数据:
cwl_java
2020/03/26
8080
Vue 学习笔记 —— 常用特性 (二)
做一名在校大学生,我的梦想是做一名独立的开发者,具备全栈思维额能力的一名开发者,我的技术栈是 SpringBoot + Vue 学习记录来自
Gorit
2021/12/08
4.9K0
Vue 学习笔记 —— 常用特性 (二)
Vue创建项目及基本语法 一
​ 本文档仅作为个人学习笔记、详细内容可以查看官网文档,官方文档有更详细的使用说明及案例
梅花
2020/09/28
1.2K0
Vue学习笔记(一)
MVVM 的工作原理:ViewModel 作为 MVVM 的核心,它把当前页面的数据源(Model)和页面的结构(View)连在一起。
赤蓝紫
2023/01/01
4.3K0
Vue学习笔记(一)
Vue常用特性
a)、Input单行文本。   b)、textarea多行文本。   c)、select下拉多选。   d)、radio单选框。   e)、checkbox多选框。
别先生
2020/04/24
2.2K0
Vue常用特性
vue快速上手教程03--axios、过滤器、侦听器
数组:every some map filter reduce foreach …
张哥编程
2024/12/13
1640
vue快速上手教程03--axios、过滤器、侦听器
前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染(render)函数,使用可选的
张果
2018/03/30
4.9K0
前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
【Vue.js】005-Vue.js计算属性和侦听器
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
訾博ZiBo
2025/01/06
1140
【Vue.js】005-Vue.js计算属性和侦听器
2.vue常用指令
注意:写插值语句的时候,只有的id=app的元素下面才可以使用插值语句,所以,尽可能创建一个标签,将所要渲染的数据,都写入当前标签中
张哥编程
2024/12/13
1260
2.vue常用指令
Vue有什么特性,相对于其他框架都有那些优势!
Vue所提供的一些相对高级的特性,表单操作,自定义指令,计算属性,过滤器,侦听器,生命周期。
达达前端
2020/02/18
1.5K0
Vue有什么特性,相对于其他框架都有那些优势!
前端三大框架之Vue-day02
Vue常用特性 表单基本操作 获取单选框中的值 通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值,我们只需要实时监控他的值就可以了 --> <input type="radio" id="male" value="1
用户10169043
2022/11/16
1.7K0
vue2你该知道的一切(上)
Vue知识点众多,这两章记录一下Vue2.x版本的常规使用方法。如果你是一名使用Vue框架开发的前端工程师,那么这两章的内容会让你对Vue的知识点记得更牢固。
kai666666
2024/07/11
1320
【Vue】day02-Vue基础入门
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码
陶然同学
2023/10/14
2700
【Vue】day02-Vue基础入门
软件测试|测试平台Vue3 - 表单的输入与绑定
输入框输入文本,对应以前都是操作DOM树结构进行的绑定。现在学习了VUE不建议大家通过DOM树进行绑定获取数据。
霍格沃兹测试开发Muller老师
2022/12/29
4400
02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定
如果想注册局部指令,组件中接受一个directives的选项,位于vue实例参数里面,局部指令只能在本组件使用
iginkgo18
2020/11/24
4.6K0
02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定
相关推荐
Vue常用特性-计算属性computed 和 侦听器 watch
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验