使用 tdesign_flutter 创建底部导航

安装 tdesign_flutter

flutter pub add tdesign_flutter

创建页面组件

// lib/features/main_navigation/app_main_navigation.dart
import 'package:flutter/material.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

class AppMainNavigation extends StatefulWidget {
  const AppMainNavigation({super.key});

  @override
  State<AppMainNavigation> createState() => _AppMainNavigationState();
}

class _AppMainNavigationState extends State<AppMainNavigation> {
  int _currentIndex = 0;
  final PageController _pageController = PageController();
  late final List<TDBottomTabBarTabConfig> _navItems;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _navItems = [
      _buildHomeTab(),
      _buildAppsTab(),
      _buildProfileTab(),
    ];
  }

  TDBottomTabBarTabConfig _buildHomeTab() => TDBottomTabBarTabConfig(
        selectedIcon: const Icon(TDIcons.home_filled, size: 24),
        unselectedIcon: const Icon(TDIcons.home, size: 24),
        tabText: '首页',
        badgeConfig: BadgeConfig(
          showBadge: true,
          tdBadge: const TDBadge(
            TDBadgeType.message,
            count: '3',
          ),
          badgeTopOffset: -4,
          badgeRightOffset: -12,
        ),
        onTap: () => _handleNavTap(0),
      );

  TDBottomTabBarTabConfig _buildAppsTab() => TDBottomTabBarTabConfig(
        selectedIcon: const Icon(TDIcons.app_filled, size: 24),
        unselectedIcon: const Icon(TDIcons.app, size: 24),
        tabText: '应用',
        onTap: () => _handleNavTap(1),
      );

  TDBottomTabBarTabConfig _buildProfileTab() => TDBottomTabBarTabConfig(
        selectedIcon: const Icon(TDIcons.user_filled, size: 24),
        unselectedIcon: const Icon(TDIcons.user, size: 24),
        tabText: '我的',
        badgeConfig: BadgeConfig(
          showBadge: true,
          tdBadge: const TDBadge(TDBadgeType.redPoint),
        ),
        onTap: () => _handleNavTap(2),
      );
  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        physics: const NeverScrollableScrollPhysics(),
        children: _buildPages(),
      ),
      bottomNavigationBar: _buildNavigationBar(),
    );
  }

  Widget _buildNavigationBar() {
    return TDBottomTabBar(
      TDBottomTabBarBasicType.iconText,
      navigationTabs: _navItems,
      currentIndex: _currentIndex,
      componentType: TDBottomTabBarComponentType.label,
      outlineType: TDBottomTabBarOutlineType.filled,
      showTopBorder: true,
      useSafeArea: true,
      backgroundColor: Colors.white,
      // selectedBgColor: TDTheme.of(context).brandColor1.withOpacity(0.1),
    );
  }

  void _handleNavTap(int index) {
    if (_currentIndex == index) return;

    setState(() => _currentIndex = index);
    _pageController.jumpToPage(index);
  }

  List<Widget> _buildPages() => const [
        _HomePage(),
        _AppsPage(),
        _ProfilePage(),
      ];
}

// 页面组件
class _HomePage extends StatelessWidget {
  const _HomePage();

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(child: Text('首页内容区')),
    );
  }
}

class _AppsPage extends StatelessWidget {
  const _AppsPage();

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(child: Text('应用中心')),
    );
  }
}

class _ProfilePage extends StatelessWidget {
  const _ProfilePage();

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(child: Text('个人中心')),
    );
  }
}

效果图