8.1 导航栏编写

Ramsayi2022-10-312024-01-16

8.1 导航栏编写

布局

实现步骤：

第 1 步：i18n 多语言

lib/common/i18n/locale_keys.dart

// APP 主导航
static const tabBarHome = 'tab_bar_home';
static const tabBarCart = 'tab_bar_cart';
static const tabBarMessage = 'tab_bar_message';
static const tabBarProfile = 'tab_bar_profile';

lib/common/i18n/locales/locale_en.dart

// APP 导航
LocaleKeys.tabBarHome: 'Home',
LocaleKeys.tabBarCart: 'Cart',
LocaleKeys.tabBarMessage: 'Message',
LocaleKeys.tabBarProfile: 'Profile',

lib/common/i18n/locales/locale_zh.dart

// APP 导航
LocaleKeys.tabBarHome: '首页',
LocaleKeys.tabBarCart: '购物车',
LocaleKeys.tabBarMessage: '消息',
LocaleKeys.tabBarProfile: '我的',

第 2 步：BuildNavigation 导航栏封装

作为主界面的子组件，我们放在 /main/widgets 下面

lib/pages/system/main/widgets/navigation.dart

import 'package:flutter/material.dart';
import 'package:flutter_woo_commerce_getx_learn/common/index.dart';
import 'package:get/get.dart';

/// 导航栏数据模型
class NavigationItemModel {
  final String label;
  final String icon;
  final int count;

  NavigationItemModel({
    required this.label,
    required this.icon,
    this.count = 0,
  });
}

/// 导航栏
class BuildNavigation extends StatelessWidget {
  final int currentIndex;
  final List<NavigationItemModel> items;
  final Function(int) onTap;

  const BuildNavigation({
    Key? key,
    required this.currentIndex,
    required this.items,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var ws = <Widget>[];
    for (var i = 0; i < items.length; i++) {
      var color = (i == currentIndex) ? AppColors.primary : null;
      var item = items[i];
      ws.add(
        <Widget>[
          // 图标
          IconWidget.svg(
            item.icon,
            size: 20,
            color: color,
            badgeString: item.count > 0 ? item.count.toString() : null,
          ).paddingBottom(2),
          // 文字
          TextWidget.body1(
            item.label.tr,
            color: color,
          ),
        ]
            .toColumn(
              mainAxisSize: MainAxisSize.min,
            )
            .onTap(() => onTap(i))
            .expanded(),
      );
    }
    return BottomAppBar(
      color: AppColors.surface,
      child: ws
          .toRow(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
          )
          .height(kBottomNavigationBarHeight),
    );
  }
}

第 3 步：控制器

lib/pages/system/main/controller.dart

1 2	// 分页管理 final PageController pageController = PageController();

// 当前的 tab index
int currentIndex = 0;

// 导航栏切换
void onIndexChanged(int index) {
  currentIndex = index;
  update(['navigation']);
}

// 切换页面
void onJumpToPage(int page) {
  pageController.jumpToPage(page);
}

@override
void onClose() {
  super.onClose();
  // 释放页控制器
  pageController.dispose();
}

第 4 步：视图

需要 KeepAlive 保持用户会话状态所以，我们采用 StatefulWidget + GetBuilder

lib/pages/system/main/view.dart

// 主视图
Widget _buildView() {
   DateTime? _lastPressedAt;
   return WillPopScope(
     // 防止连续点击两次退出
     onWillPop: () async {
       if (_lastPressedAt == null ||
           DateTime.now().difference(_lastPressedAt!) >
               const Duration(seconds: 1)) {
         _lastPressedAt = DateTime.now();
         Loading.toast('Press again to exit');
         return false;
       }
       await SystemChannels.platform.invokeMethod('SystemNavigator.pop');
       return true;
     },
     child: Scaffold(
       extendBody: true,
       resizeToAvoidBottomInset: false,
       // 导航栏
       bottomNavigationBar: GetBuilder<MainController>(
         id: 'navigation',
         builder: (controller) {
           return BuildNavigation(
             currentIndex: controller.currentIndex,
             items: [
               NavigationItemModel(
                 label: LocaleKeys.tabBarHome.tr,
                 icon: AssetsSvgs.navHomeSvg,
               ),
               NavigationItemModel(
                 label: LocaleKeys.tabBarCart.tr,
                 icon: AssetsSvgs.navCartSvg,
                 count: 3,
               ),
               NavigationItemModel(
                 label: LocaleKeys.tabBarMessage.tr,
                 icon: AssetsSvgs.navMessageSvg,
                 count: 9,
               ),
               NavigationItemModel(
                 label: LocaleKeys.tabBarProfile.tr,
                 icon: AssetsSvgs.navProfileSvg,
               ),
             ],
             onTap: controller.onJumpToPage, // 切换tab事件
           );
         },
       ),
       // 内容页
       body: PageView(
         physics: const NeverScrollableScrollPhysics(),
         controller: controller.pageController,
         onPageChanged: controller.onIndexChanged,
         children: const [
           // 加入空页面占位
           Text("1"),
           Text("2"),
           Text("3"),
           Text("4"),
         ],
       ),
     ),
   );
 }