更改导航目标时导航栏指示器颜色会闪烁

问题描述 投票:0回答:1

我正在将

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: 设为粗体。

我真的很感谢您的帮助。

flutter navigationbar
1个回答
0
投票

NavigationBar 的默认

animationDuartion:
为 500 毫秒

animationDuration: Duration.zero

将动画持续时间设置为零解决了我的问题。

© www.soinside.com 2019 - 2024. All rights reserved.