如何在BLOC的Flutter中设置BottomNavigationBar中的currentIndex?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在BLOC的Flutter中设置BottomNavigationBar中的currentIndex?相关的知识,希望对你有一定的参考价值。

我想使用一个StatelessWidget和BottomNavigationBar,我将从BLOC控制它。我可以将Scaffold的主体和BottomNavigationBar的onTap连接到BLOC(参见代码)。但我不明白如何从BLOC(来自Observable)设置BottomNavigationBar的currentIndex。

有没有什么好的解决方案,或者我需要在https://stackoverflow.com/a/53019841/936780中使用StatefulWidget,这与我的例子类似。

BLOC代码:

class Bloc { 
  final _currentTabSink = PublishSubject<int>();
  final _currentTabIndex = BehaviorSubject<int>();

  Observable<int> get currentTabIndex => _currentTabIndex.stream;
  Function(int) get setTabIndex => _currentTabSink.sink.add;

  Bloc() {
    _currentTabSink.stream.pipe(_currentTabIndex);
  }

  dispose() {
    _currentTabSink.close();
    _currentTabIndex.close();
  }
}

小部件代码:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bloc = Provider.of(context);

    final List<Widget> _children = [
      AaWidget(),
      BbWidget(),
      CcWidget(),
      DdWidget(),
      EeWidget()
    ];

    return Scaffold(
        appBar: AppBar(
          title: Text(Localizations.of(context).appName),
        ),
        body: setBody(_children, bloc), // hook to BLOC
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 1, // ?? how to hook up to BLOC ??
          onTap: (index) {
            bloc.setTabIndex(index); // hook to BLOC
            },
          items: [
            addAa(context),
            addBb(context),
            addCc(context),
            addDd(context),
            addEE(context),
          ],
        ));
  }

  Widget setBody(List<Widget> children, Bloc bloc) {
    return StreamBuilder(
      stream: bloc.currentTabIndex,
      builder: (context, AsyncSnapshot<int> snapshot) {
        if (snapshot.hasData) {
          return children[snapshot.data];
        }
      },
    );
  }

  ...
}
答案

我认为您需要将Scaffold包装在带有初始数据集的StreamBuilder中,然后才能访问快照数据。像这样的东西(我必须对你的代码进行一些修改,以便它为我构建)

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bloc = Bloc();

    final List<Widget> _children = [
      Container(color: Colors.blue, child: Center(child: Text("1"))),
      Container(color: Colors.red, child: Center(child: Text("2"))),
      Container(color: Colors.green, child: Center(child: Text("3"))),
      Container(color: Colors.yellow, child: Center(child: Text("4"))),
      Container(color: Colors.orange, child: Center(child: Text("5"))),
    ];

    return StreamBuilder<int>(
      stream: bloc.currentTabIndex,
      initialData: 0,
      builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
        if (!snapshot.hasData) {
          return Container();
        }

        return Scaffold(
          appBar: AppBar(
            title: Text("Test"),
          ),
          body: _children[snapshot.data],
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: snapshot.data,
            onTap: (index) {
              bloc.setTabIndex(index);
            },
            items: _children
                .map((child) => BottomNavigationBarItem(
                    icon: Icon(Icons.add),
                    title: Text("Test"),
                    backgroundColor: Colors.black))
                .toList(),
          ),
        );
      },
    );
  }
}

这对我有用,唯一的缺点就是每次索引改变时你都会不必要地重建AppBar

以上是关于如何在BLOC的Flutter中设置BottomNavigationBar中的currentIndex?的主要内容,如果未能解决你的问题,请参考以下文章

来自完整开发人员指南课程 Udemy 165 的 Flutter Bloc 模式问题

如何在 Flutter 中设置闹钟?

如何在 Flutter 中设置不同的 firebase 环境

如何在 Xcode 中设置 Flutter 构建选项

如何在 Flutter 中设置主屏幕的背景颜色?

如何在 Flutter 的 decimalPattern 中设置 maximumFractionDigits?