Flutter中如何移除或调整NavigationBar选中项的装饰效果

NavigationBar 默认的选中项圆角高亮装饰无需修改源码，通过组件自带属性即可快速调整，覆盖「移除默认装饰」「自定义增强装饰」两类需求：

移除默认选中装饰 #

默认的选中高亮块由指示器颜色属性控制，只需新增2行配置即可完全隐藏默认装饰，修改后的完整代码如下：

NavigationBar(
        elevation: 0,
        selectedIndex: navIndex,
        onDestinationSelected: (index) => setState(() {
          navIndex = index;
        }),
        backgroundColor: Colors.transparent,
        // 核心配置：将指示器、表面渲染色设为透明，彻底隐藏默认选中块
        indicatorColor: Colors.transparent,
        surfaceTintColor: Colors.transparent,
        labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
        destinations: const [
          NavigationDestination(
            icon: Text('Your subscriptions'),
            label: '',
          ),
          NavigationDestination(
            icon: Text('Upcoming bills'),
            label: '',
          ),
        ],
      )

默认选中装饰效果参考：

自定义增强选中装饰 #

如果需要调整默认指示器的显示效果，可通过以下两个属性灵活配置：

• indicatorColor：控制选中指示器的填充颜色，支持设置透明度、自定义主题色
• indicatorShape：控制指示器的形状、边框、圆角大小，支持所有ShapeBorder子类实现

举个常用的带边框圆角指示器配置示例：

NavigationBar(
  // 其余基础属性（elevation/selectedIndex/onDestinationSelected等）保持原有代码不变
  indicatorColor: Colors.blue.withOpacity(0.12),
  indicatorShape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
    side: const BorderSide(color: Colors.blue, width: 1.2),
  ),
  // destinations等其余配置不变
)

如果需要实现更复杂的选中效果（比如选中项文字加粗、缩放动画、图标切换），可以直接在构建NavigationDestination时，根据当前选中的navIndex和对应项的索引判断选中状态，自定义返回不同样式的组件即可，示例：

NavigationDestination(
  icon: Text(
    'Your subscriptions',
    style: TextStyle(
      // 选中时加粗、显示主题色，未选中时常规字重、灰色
      fontWeight: navIndex == 0 ? FontWeight.w600 : FontWeight.normal,
      color: navIndex == 0 ? Colors.blue : Colors.black54,
    ),
  ),
  label: '',
)

内容的提问来源于stack exchange，提问作者Njordww