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

Posted 2023-02-23

【中文标题】如何在 BLOC 的 Flutter 中的 BottomNavigationBar 中设置 currentIndex？

【英文标题】：How to set currentIndex in BottomNavigationBar in Flutter from BLOC?

【发布时间】：2019-06-09 13:08:54

【问题描述】：

我想将 StatelessWidget 与 BottomNavigationBar 一起使用，我将从 BLOC 中控制它。我可以将 Scaffold 的 body 和 BottomNavigationBar 的 onTap 连接到 BLOC（参见代码） .但我不明白如何从 BLOC（来自 Observable）设置 BottomNavigationBar 的 currentIndex。

有什么好的解决方案，或者我需要像https://***.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];
        
      ,
    );
  

  ...

【参考方案1】：

我认为您需要将 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。

【讨论】：

这是正确的解决方案，因为我还需要重建 AppBar，因为它将包含与索引相关的操作 - 当它更改时，它们需要更改。谢谢。