gpt4 book ai didi

flutter - 重建页面时Flutter重建底部导航栏

转载 作者:行者123 更新时间:2023-12-03 04:44:08 35 4
gpt4 key购买 nike

当其中一个页面被重建时,如何重建底部导航栏?
例如,我有一个setState调用来重建页面,但是它不重建导航栏,因为它用作页面返回的Scaffold中bottomNavigationBar属性的一部分:

    return SafeArea(child: Scaffold(
bottomNavigationBar: CustomBottomNavigationBar(0),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: buttonCards,
)
));
如何重建导航栏?
编辑:这是我的 CustomBottomNavigationBar实现,以供引用:
class CustomBottomNavigationBar extends StatefulWidget {

int _currentIndex = 0;

CustomBottomNavigationBar(this._currentIndex);

@override
CustomBottomNavigationBarState createState() => CustomBottomNavigationBarState(_currentIndex);

}

class CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> with TickerProviderStateMixin {

int _currentIndex = 0;
List<_NavigationIconView> _navigationViews;

CustomBottomNavigationBarState(this._currentIndex);

@override
void didChangeDependencies() {
super.didChangeDependencies();
if (_navigationViews == null) {
_navigationViews = <_NavigationIconView>[
_NavigationIconView(
icon: Icon(Icons.home),
title: "Home",
route: HomePage.route,
vsync: this,
) ,
_NavigationIconView(
icon: const Icon(Icons.casino),
title: "Game",
route: GameStartPage.route,
vsync: this,
),
_NavigationIconView(
icon: const Icon(Icons.settings),
title: "Settings",
route: SettingsPage.route,
vsync: this,
),
];

_navigationViews[_currentIndex].controller.value = 1;
}
}

BottomNavigationBar build(BuildContext context) {

var bottomNavigationBarItems = _navigationViews
.map<BottomNavigationBarItem>((navigationView) => navigationView.item)
.toList();

return BottomNavigationBar(
showUnselectedLabels: false,
items: bottomNavigationBarItems,
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
onTap: (index) {
setState(() {
_navigationViews[_currentIndex].controller.reverse();
_currentIndex = index;
_navigationViews[_currentIndex].controller.forward();
Navigator.pushNamed(context, _navigationViews[_currentIndex].route);
});
},
selectedItemColor: Theme
.of(context)
.colorScheme
.primaryLight,
unselectedItemColor: Theme
.of(context)
.colorScheme
.primaryLight
.withOpacity(0.38),
);
}

@override
void dispose() {
for (final view in _navigationViews) {
view.controller.dispose();
}
super.dispose();
}
}

class _NavigationIconView {
_NavigationIconView({
this.title,
this.icon,
this.route,
TickerProvider vsync,
}) : item = BottomNavigationBarItem(
icon: icon,
title: Text(title),
),
controller = AnimationController(
duration: kThemeAnimationDuration,
vsync: vsync,
);

final String title;
final Widget icon;
final String route;
final BottomNavigationBarItem item;
final AnimationController controller;
}

最佳答案

您将需要在CustomBottomNavigationBar上调用set状态,因为它具有自己的生成方法。这实际上是一件好事,因为它不是在每次重新构建父窗口小部件时都构建的。
我在stackoverflow上找到了一个答案,可以用来调用setstate here
通常,我建议您使用BLOC模式或“范围模型”模式,以便将viewmodel用于任何逻辑。当以这种方式进行操作时,我通常使用消息总线(使用flutter库event_bus)将事件发送到其他订阅该事件的 View 模型,并且可能需要更新其 View 并调用setState的形式。如果需要,我也可以提供一个示例。

关于flutter - 重建页面时Flutter重建底部导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62598676/

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