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估计已经发生了很大变化了
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
Flutter入门(四)
自定义的好处是可以在addListener中增加监听,通过setState修改状态
用户3112896
2019/12/27
1.5K0
Flutter 中 BottomNavigationBar 定义底部导航条
BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,在Scaffold 组件中通过配置bottomNavigationBar来实现该功能。
越陌度阡
2020/12/23
1.3K0
Flutter 中 BottomNavigationBar 定义底部导航条
Flutter布局基础——BottomNavigationBar
Flutter中BottomNavigationBar类似于 iOS 中的UITabbarController,是导航控制器的一种,常用于首页 Tab 切换。
莫空9081
2021/08/18
3.2K0
Flutter实例一--底部规则导航栏制作
StatefulWidget具有可变状态(state)的窗口组件(widget)。使用时要根据变化状态,调整State值,
wfaceboss
2019/04/08
1.5K0
Flutter实例一--底部规则导航栏制作
Flutter定义tabbar底部导航路由跳转
第一步 把三个页面放到tabs里 Category.dart || Home.dart || Setting.dart 在这里我只展示Home.dart 另外两个页面相同
明知山
2020/09/03
1.8K0
Flutter实现侧边栏功能
实现侧边栏功能是用到drawer组件,该项目是用来练手的,代码比较冗余 import 'package:flutter/material.dart'; import 'tabs/Home.dart'; import 'tabs/Category.dart'; import 'tabs/Setting.dart'; class Tabs extends StatefulWidget { final index; Tabs({Key key, this.index = 0}) : super(ke
明知山
2020/09/03
2.2K0
Flutter 简易新闻项目目标效果对比简介代码代码地址
使用flutter快速开发 Android 和 iOS 的简易的新闻客户端 API使用的是 showapi(易源数据) 加载热门微信文章
gwk_iOS
2018/12/05
1.3K0
Flutter BottomNavigation 底部导航详解 及问题记录
这里多数一句 Flutter 提供了两套预设的主题UI 这些UI有很多的常量可以直接引入使用
拿我格子衫来
2022/01/24
3.5K0
Flutter  BottomNavigation 底部导航详解 及问题记录
【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
BottomNavigationBar 组件是底部导航栏 , 用于设置给 Scaffold 组件的 bottomNavigationBar 字段 ;
韩曙亮
2023/03/28
2.6K0
【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
Flutter-从入门到项目 06: 微信项目搭建
前面几篇都是关于环境配置和基础语法学习. 在我个人认为学习一门新的语言(快速高效学习) 一定是通过实践,最好的就是带着项目实操,如果你能够仿写下一个项目那么基本就差不多了! 这里我就用微信项目作为本次案例仿写,希望大家喜欢!
CC老师
2021/03/11
4620
Flutter-从入门到项目 06: 微信项目搭建
flutter鸿蒙版本通过底部导航栏的实现熟悉架构及语法
在这篇博客中,我们将深入分析一个 Flutter 应用的完整代码,该应用实现了一个底部导航栏,允许用户在不同页面之间切换。我们将逐行讲解代码,帮助大家理解 Flutter 的结构、状态管理以及组件之间的交互。
淼学派对
2024/10/08
2270
Flutter底部tab切换保持页面状态的几种方法
通过视频我们可以看到,当通过底部tabBar将页面在“首页”和“分类”之间进行切换的时候,每一次进入页面的时候该页面的数据都会重新加载。那么如何让页面保持原来的状态,而不是每次都要重新加载刷新数据呢?有两种方式。
拉维
2019/09/17
6.4K0
掌握Flutter底部导航栏:畅游导航之旅
在移动应用开发中,底部导航栏是一种常见且非常实用的用户界面元素。它提供了快速导航至不同功能模块或页面的便捷方式,使用户可以轻松访问应用程序的各个部分。在Flutter中,底部导航栏也是一项强大的功能,开发者可以利用Flutter框架提供的丰富组件和灵活性,轻松实现各种样式和交互效果的底部导航栏。
繁依Fanyi
2024/03/30
1.1K0
Flutter中命名路由模块化及传参
上面的代码中分别引入了三个页面:Form.dart 和 Search.dart 以及 Tabs.dart。
越陌度阡
2020/12/28
1.6K0
使用BottomNavigationBar来定义底部导航栏
在iOS中,底部导航栏使用UITabBar就可以实现;在Flutter中,类似的效果可以通过BottomNavigationBar这个组件实现。
拉维
2019/08/16
1.6K0
Flutter跨平台移动端开发丨底部导航栏实例
使用flutter实现底部导航栏还是比较简单的,主要用到的组件是 Scaffold + BottomNavigationBar + BottomNavigationBarItem
码脑
2019/07/03
1.1K0
Flutter跨平台移动端开发丨底部导航栏实例
Flutter 中的按钮组件
1. onPressed 按下按钮时触发的回调方法,为必填参数,如果值为 null 表示禁用按钮,会显示禁用相关样式;
越陌度阡
2020/12/31
3.4K0
flutter中的底部导航栏切换
做android原生开发时,底部导航栏是通过自定义布局,图片自己上网找,点击之后还要变色,在切换的时候使用fragment,切换下一个的同时上一个隐藏…… 现在,来看flutter怎么实现吧
徐建国
2021/11/30
4K0
flutter中的底部导航栏切换
11.Flutter学习之BottomNavigationBar自定义底部导航栏,以及页面切换
BottomNavigationBar是底部导航栏,可以让我们定义底部tab切换,bottomNavigationBar是之前讲到的Scaffold组件的参数 常见属性:
易帜
2022/02/09
1.4K0
11.Flutter学习之BottomNavigationBar自定义底部导航栏,以及页面切换
15.Flutter学习之路按钮组件系列
Flutter中有很多Button组件,例如RaisedButton、FlatButton、IconButtton、OutlineButton、ButtonBar、FloatingActionButton等。 RaisedButton:凸起的按钮,其实就是Material Design风格的Button. FlatButton:扁平化的按钮 OutlineButton:线框按钮 ButtonBar:按钮组 FloatingActionButton:浮动按钮
易帜
2022/02/09
6100
15.Flutter学习之路按钮组件系列
推荐阅读
相关推荐
Flutter入门(四)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验