Flutter新手求助：如何将现有BottomNavigationBar改造为TabItems

原有需求 #

我是Flutter开发新手，跟随油管教程实现了如下BottomNavigationBar底部导航组件，现在想要将其改造为TabItems形式。我查找了很多TabItems相关的资料，但还是不知道该如何转换现有代码。

原有实现代码 #

class BottomNavigationEzyMember extends StatefulWidget {
  const BottomNavigationEzyMember({Key? key}) : super(key: key);

  @override
  _BottomNavigationEzyMemberState createState() =>
      _BottomNavigationEzyMemberState();
}

class _BottomNavigationEzyMemberState extends State<BottomNavigationEzyMember> {
  int _selectedIndex = 0;

  var bottomTextStyle =
      GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w500);

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 64,
      decoration: BoxDecoration(
        color: mFillColor,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            spreadRadius: 2,
            blurRadius: 15,
            offset: const Offset(0, 5),
          )
        ],
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(24),
          topRight: Radius.circular(24),
        ),
      ),
      child: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: _selectedIndex == 0
                ? SvgPicture.asset('assets/icons/home_colored.svg')
                : SvgPicture.asset('assets/icons/home.svg'),
            title: Text('Home', style: bottomTextStyle),
          ),
          BottomNavigationBarItem(
            icon: _selectedIndex == 1
                ? SvgPicture.asset('assets/icons/order_colored.svg')
                : SvgPicture.asset('assets/icons/order.svg'),
            title: Text(
              'My Card',
              style: bottomTextStyle,
            ),
          ),
          BottomNavigationBarItem(
            icon: _selectedIndex == 2
                ? SvgPicture.asset('assets/icons/watch_colored.svg')
                : SvgPicture.asset('assets/icons/watch.svg'),
            title: Text(
              'Watch List',
              style: bottomTextStyle,
            ),
          ),
          BottomNavigationBarItem(
            icon: _selectedIndex == 3
                ? SvgPicture.asset('assets/icons/account_colored.svg')
                : SvgPicture.asset('assets/icons/account.svg'),
            title: Text(
              'Account',
              style: bottomTextStyle,
            ),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: mBlueColor,
        unselectedItemColor: mSubtitleColor,
        onTap: _onItemTapped,
        backgroundColor: Colors.transparent,
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,
        showUnselectedLabels: true,
        elevation: 0,
      ),
    );
  }
}

改造为TabItems形式的实现 #

核心思路是把Tab的配置抽离为独立的数据结构，避免在导航组件里硬编码每个Tab的属性，后续新增修改Tab只需调整配置即可，无需改动导航逻辑。

步骤1：定义TabItem配置类 #

可以在当前文件或者单独的常量管理文件中添加如下代码：

// Tab项数据模型
class TabItem {
  final String label;
  final String normalIconPath;
  final String selectedIconPath;

  const TabItem({
    required this.label,
    required this.normalIconPath,
    required this.selectedIconPath,
  });
}

// 统一配置所有底部导航Tab
const List<TabItem> bottomTabs = [
  TabItem(
    label: 'Home',
    normalIconPath: 'assets/icons/home.svg',
    selectedIconPath: 'assets/icons/home_colored.svg',
  ),
  TabItem(
    label: 'My Card',
    normalIconPath: 'assets/icons/order.svg',
    selectedIconPath: 'assets/icons/order_colored.svg',
  ),
  TabItem(
    label: 'Watch List',
    normalIconPath: 'assets/icons/watch.svg',
    selectedIconPath: 'assets/icons/watch_colored.svg',
  ),
  TabItem(
    label: 'Account',
    normalIconPath: 'assets/icons/account.svg',
    selectedIconPath: 'assets/icons/account_colored.svg',
  ),
];

步骤2：修改原有底部导航组件代码 #

把原来硬编码的items数组替换为遍历Tab配置生成即可，同时适配新版Flutter的API规范：

class BottomNavigationEzyMember extends StatefulWidget {
  const BottomNavigationEzyMember({Key? key}) : super(key: key);

  @override
  _BottomNavigationEzyMemberState createState() =>
      _BottomNavigationEzyMemberState();
}

class _BottomNavigationEzyMemberState extends State<BottomNavigationEzyMember> {
  int _selectedIndex = 0;
  final bottomTextStyle = GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w500);

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 64,
      decoration: BoxDecoration(
        color: mFillColor,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            spreadRadius: 2,
            blurRadius: 15,
            offset: const Offset(0, 5),
          )
        ],
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(24),
          topRight: Radius.circular(24),
        ),
      ),
      child: BottomNavigationBar(
        // 遍历Tab配置生成导航项
        items: bottomTabs.asMap().entries.map((entry) {
          final index = entry.key;
          final tab = entry.value;
          return BottomNavigationBarItem(
            icon: _selectedIndex == index
                ? SvgPicture.asset(tab.selectedIconPath)
                : SvgPicture.asset(tab.normalIconPath),
            label: tab.label,
          );
        }).toList(),
        currentIndex: _selectedIndex,
        selectedItemColor: mBlueColor,
        unselectedItemColor: mSubtitleColor,
        onTap: _onItemTapped,
        backgroundColor: Colors.transparent,
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,
        unselectedLabelStyle: bottomTextStyle,
        selectedLabelStyle: bottomTextStyle,
        showUnselectedLabels: true,
        elevation: 0,
      ),
    );
  }
}

改造说明 #

• 所有Tab的配置统一维护在bottomTabs数组中，后续新增Tab只需往数组里新增TabItem实例即可，无需修改导航逻辑
• 完全保留你原有所有的样式、选中交互逻辑，不会影响原有功能
• 适配了Flutter新版本的BottomNavigationBarAPI，将已废弃的title属性替换为label，避免编译警告

内容的提问来源于stack exchange，提问作者Jian Yuan Ng