《码农爽》Flutter:从底部选项卡BottomNavigationBar看国际化和代码抽离

前言

上一章：《码农爽》: 一个为程序员快乐操碎了心的Flutter项目

今天是要实现的功能是首页底部的选项卡功能。

一、实现

要实现这个功能，第一个问题便是找到底部选项卡的组件。
但凡有开发经验的同学，都可以在官网上根据几个关键字来搜。

确认是BottomNavigationBar，实现部分就很简单了。

主要有以下几个问题：

1. 如何添加选项卡数据？
2. 如何绑定页面？
3. 如何设置样式，比如文字颜色，图片？
4. 点击事件以及变换未选中和状态等？

这些基本的api及交互在上述的文档中都有，这里不再赘述。本章主要来谈谈下面几个优化项。

二、优化

1.资源引用及国际化

1.1.图片资源引用

Flutter中添加图片在pubspec.yaml中，可以通过以下代码指定图片路径。

  assets:- assets/images/ic_tab_home_default.png- assets/images/ic_tab_home_selected.png

然后在根目录下面按上述路径建文件即可，然后在代码中来使用。

  /// Collections of image path inside of tab, for each item in array, first value expresses/// default image, and the second value means image tab selected.static const tabImages = [["assets/images/ic_tab_home_default.png", "assets/images/ic_tab_home_selected.png"],["assets/images/ic_tab_home_default.png", "assets/images/ic_tab_home_selected.png"],["assets/images/ic_tab_home_default.png", "assets/images/ic_tab_home_selected.png"],["assets/images/ic_tab_home_default.png", "assets/images/ic_tab_home_selected.png"]];

个人觉得没有Android的selector好用。
至于切换可以通过setState来改变currentPosition即可。

currentPosition == position? tabImages[position][0]: tabImages[position][1]

1.2.文字资源引用及国际化

本以为Flutter有Android的string.xml类似的文件，发现没有。简单地搜索下internalization关键字，找到了intl包，我们在pubspec.yaml中引用并get下。

intl: ^0.17.0

然后在lib中增加文字资源。

分别增加中文和英文。

## 中文
{"tabHome": "浮华","@tabHome": {"description": "各功能的快捷入口，蕴含浮躁世界之意"},"tabFix": "修身","@tabFix": {"description": "运动，健身"},"tabRecuperation": "养性","@tabRecuperation": {"description": "静心"},"tabUser": "归真","@tabUser": {"description": "找到最真实的自己"}
}## English
{"tabHome": "Home","tabFix": "Fix","tabRecuperation": "Recuperation","tabUser": "User"
}

再新建配置文件（l10n.yaml）。

arb-dir: lib/l10n
template-arb-file: intl_zh.arb
output-localization-file: app_localizations.dart

引用包。

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

在代码中指定国际化策略。

class MainApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(localizationsDelegates: AppLocalizations.localizationsDelegates,supportedLocales: AppLocalizations.supportedLocales,home: MainContentWidget(),);}
}

使用时直接引用即可。

AppLocalizations.of(context)!.tabHome

大家可以切换下手机系统语言，看看文字语言是否会变化吧。

2.选项卡逻辑剥离

这样就行了吗？
我们很快发现一个选项卡就占用了太多的代码，如下图所示。左边是优化前的。

按照正常的逻辑，选项卡和main只有一个交互，那就是点击切换页面，至于什么样式之类的，理应属于其内部的事儿，所以应该封装起来。

调用逻辑差不多是这样才合理。

于是自定义一个底部选项卡。

/// app_bottom_navigator.dart
import 'package:coderfit_flutter/constants/constants.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';/// Customized Navigator extends [BottomNavigationBar] to clear the structure of main application.
class AppBottomNavigator extends BottomNavigationBar {/// Collections of image path inside of tab, for each item in array, first value expresses/// default image, and the second value means image tab selected.static const tabImages = [["assets/images/ic_tab_home_default.png", "assets/images/ic_tab_home_selected.png"],["assets/images/ic_tab_home_default.png", "assets/images/ic_tab_home_selected.png"],["assets/images/ic_tab_home_default.png", "assets/images/ic_tab_home_selected.png"],["assets/images/ic_tab_home_default.png", "assets/images/ic_tab_home_selected.png"]];/// Construct [BottomNavigationBarItem] with [position], and [title].static BottomNavigationBarItem _createBottomNavigationItem(int position, int currentPosition, String title) {return BottomNavigationBarItem(icon: Image.asset(currentPosition == position? tabImages[position][0]: tabImages[position][1],width: Constants.tabSize,height: Constants.tabSize),label: title,backgroundColor: Colors.lightBlue);}/// Construct with current position [currentPosition] and [context], optional [callback] for/// listening the [onTap] event.AppBottomNavigator(int currentPosition, BuildContext context, ValueChanged<int>? callback): super(// With title internalization.items: [_createBottomNavigationItem(0, currentPosition, AppLocalizations.of(context)!.tabHome),_createBottomNavigationItem(1, currentPosition, AppLocalizations.of(context)!.tabFix),_createBottomNavigationItem(2, currentPosition, AppLocalizations.of(context)!.tabRecuperation),_createBottomNavigationItem(3, currentPosition, AppLocalizations.of(context)!.tabUser)],currentIndex: currentPosition,onTap: callback);
}

我们再来看main的代码，是不是结构清晰了很多。

@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: tabPages[_selectedIndex]),bottomNavigationBar: AppBottomNavigator(_selectedIndex, context, _navigatorItemTapped));}

三、总结

好了，今天就说这么多么了，其实在开发过程中多去想、多注意一些细节，代码代码看起来舒服，也方便日后的扩展和维护。
关于项目后续进展，请持续关注，谢谢！
项目地址：https://github.com/codersth/coderfit_flutter