Dart 如何在BLOC的Flatter中的底部导航栏中设置currentIndex？

我想使用一个带有BottomNavigationBar的无状态小部件，我可以从一个组中控制它。我可以将Scaffold的主体和BottomNavigationBar的onTap连接到BLOC（参见代码）。但我不明白如何从BLOC（从Observable）设置BottomNavigationBar的currentIndex

有没有什么好的解决方案，或者我是否需要使用StatefulWidget，因为其中类似于我的示例

集团代码：

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集团{
最终_currentTabSink=PublishSubject（）；
final _currentTabIndex=行为主体（）；
可观察的get-currentTabIndex=>\u currentTabIndex.stream；
函数（int）get setTabIndex=>\u currentTabSink.sink.add；
集团（）{
_currentTabSink.stream.pipe（_currentTabIndex）；
}
处置{
_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];
        }
      },
    );
  }

  ...
}

类MyWidget扩展了无状态Widget{
@凌驾
小部件构建（构建上下文）{
final bloc=Provider.of（上下文）；
最终列表_子项=[
AaWidget（），
BbWidget（），
CcWidget（），
DdWidget（），
EeWidget（）
];
返回脚手架(
appBar:appBar(
标题：文本（本地化.of（context）.appName），
),
body:setBody（_children，bloc），//钩住bloc
底部导航栏：底部导航栏(
当前索引：1，//？如何连接到BLOC？？
onTap：（索引）{
setTabIndex（index）；//挂钩到bloc
},
项目：[
addAa（上下文），
addBb（上下文），
addCc（上下文），
addDd（上下文），
附录（上下文），
],
));
}
小部件setBody（列出子项，Bloc-Bloc）{
返回流生成器(
流：bloc.currentTabIndex，
生成器：（上下文，异步快照）{
if（snapshot.hasData）{
返回子项[snapshot.data]；
}
},
);
}
...
}

我认为您需要使用初始数据集将

脚手架

包装在

StreamBuilder

中，然后才能访问快照数据。类似这样的东西（我必须对你的代码做一些更改，这样它才能为我构建）

类MyWidget扩展了无状态Widget{
@凌驾
小部件构建（构建上下文）{
最终集团=集团（）；
最终列表_子项=[
容器（颜色：Colors.blue，子对象：中心（子对象：文本（“1”）），
容器（颜色：Colors.red，子对象：中心（子对象：文本（“2”）），
容器（颜色：Colors.green，子对象：中心（子对象：文本（“3”）），
容器（颜色：Colors.yellow，子对象：中心（子对象：文本（“4”）），
容器（颜色：Colors.orange，子对象：中心（子对象：文本（“5”）），
];
返回流生成器(
流：bloc.currentTabIndex，
初始数据：0，
生成器：（BuildContext上下文，异步快照）{
如果（！snapshot.hasData）{
返回容器（）；
}
返回脚手架(
appBar:appBar(
标题：文本（“测试”），
),
正文：_子项[snapshot.data]，
底部导航栏：底部导航栏(
当前索引：snapshot.data，
onTap：（索引）{
集团setTabIndex（指数）；
},
项目：_儿童
.map（（子项）=>BottomNavigationBarItem(
图标：图标（Icons.add），
标题：文本（“测试”），
背景颜色：颜色。黑色）
.toList（），
),
);
},
);
}
}

---

这对我来说很有效，唯一的缺点是每次索引更改时都会不必要地重建

AppBar

。

这是正确的解决方案，因为我也需要重建AppBar，因为它将包含绑定到索引的操作-当索引更改时，它们需要更改。非常感谢。

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(),
          ),
        );
      },
    );
  }
}