我正在将
NavigationBar
小部件实现为 Scaffold中的
bottomNavigationBar:
。我的导航栏中有三个 NavigationDestination
项目。
其中两项具有 多彩
indicatorColor:
,其中一项是透明。因此,我添加了一个基于项目的 index 的条件来处理颜色。
但是,当选择具有 透明 指示器颜色的项目并点击任何具有 彩色 指示器颜色的项目时,透明 项目上会出现一个颜色斑点,如下视频所示:
我正在使用
go_router
进行路线管理。 body:
部分中的navigationShell来自go_router
这是我的代码片段:
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key, required this.navigationShell})
: super(key: key ?? const ValueKey('ScaffoldWithNestedNavigation'));
final StatefulNavigationShell navigationShell;
@override
Widget build(BuildContext context) {
return Scaffold(
body: navigationShell,
bottomNavigationBar: NavigationBar(
height: 80.h,
selectedIndex: navigationShell.currentIndex,
indicatorColor: navigationShell.currentIndex == 0
? Colors.transparent
: AppColors.bottomNavIconGreen,
surfaceTintColor: Colors.white,
backgroundColor: Colors.white,
destinations: [
NavigationDestination(
label: 'Chat',
icon: Icon(
Icons.chat_bubble_outline,
size: 24.h,
)),
NavigationDestination(
label: 'History',
icon: Icon(
Icons.access_time,
size: 24.h,
)),
NavigationDestination(
label: 'Account',
icon: Icon(
CupertinoIcons.person_crop_circle,
size: 24.h,
)),
],
onDestinationSelected: (index) {
index != 0
? navigationShell.goBranch(
index,
initialLocation: index == navigationShell.currentIndex,
)
: context.pushNamed('chat');
}
),
);
}
}
我该如何解决这个问题?
*** 我还想将所选
NavigationDestination项目的
label:
设为粗体。
我真的很感谢您的帮助。
NavigationBar 的默认
animationDuartion:
为 500 毫秒
animationDuration: Duration.zero
将动画持续时间设置为零解决了我的问题。