如何为Flutter curved_navigation_bar组件的图标添加对应标签？

curved_navigation_bar 组件的 items 参数本身支持传入任意 Widget 类型，你只需要将原有的单个 Icon 组件替换为图标+文本的组合布局即可，具体实现如下：

完整代码示例 #

import 'package:curved_navigation_bar/curved_navigation_bar.dart';

// 定义当前选中索引，用来适配选中/未选中样式
int _selectedIndex = 0;

CurvedNavigationBar(
  // 按需调整导航栏高度，默认高度60，加了标签建议调到70-75避免显示不全
  height: 70,
  // 其他原有配置保留，比如颜色、背景色、动画参数等
  color: Colors.blue,
  backgroundColor: Colors.white,
  onTap: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  items: [
    // 带Home标签的首页项
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.home, size: 30, color: _selectedIndex == 0 ? Colors.white : Colors.grey[300]),
        SizedBox(height: 2),
        Text(
          'Home',
          style: TextStyle(
            fontSize: 12,
            color: _selectedIndex == 0 ? Colors.white : Colors.grey[300],
          ),
        )
      ],
    ),
    // 带Live Cam标签的直播项
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.videocam_outlined, size: 30, color: _selectedIndex == 1 ? Colors.white : Colors.grey[300]),
        SizedBox(height: 2),
        Text(
          'Live Cam',
          style: TextStyle(
            fontSize: 12,
            color: _selectedIndex == 1 ? Colors.white : Colors.grey[300],
          ),
        )
      ],
    ),
    // 剩余其他导航项按同样规则添加即可
  ],
)

注意事项 #

• 文本的颜色、字号可以根据你的导航栏主题自行调整，适配亮/暗模式
• 如果导航栏高度已经调大还是出现文本截断，适当缩小文本字号或者减少图标尺寸即可

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