前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter中是使用RxDart代替Stateful

Flutter中是使用RxDart代替Stateful

作者头像
我不是码神
发布2022-07-28 14:31:26
1.2K2
发布2022-07-28 14:31:26
举报
文章被收录于专栏:流媒体技术

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

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

代码语言:javascript
复制
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
复制
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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档