gpt4 book ai didi

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

转载 作者:IT王子 更新时间:2023-10-29 06:40:19 27 4
gpt4 key购买 nike

我想将 StatelessWidgetBottomNavigationBar 一起使用,我将从 BLOC 控制它。我可以将 ScaffoldbodyBottomNavigationBaronTap 连接到 BLOC(参见代码) .但我不明白如何从 BLOC(来自 Observable)设置 BottomNavigationBarcurrentIndex

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

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

关于dart - 如何在 BLOC 的 Flutter 的 BottomNavigationBar 中设置 currentIndex?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54200260/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com