基于GetX 搭建通用flutter 项目《四》(国际化)

2022-08-01 本文已影响0人火之夜工作室

DEMO更新日志

  2022-07-14 完成国际化
  2022-06-22 完成暗黑模式功能开发
  2022-06-16 完成项目基础架构

您能在这里看到啥

运行效果

语言配置

切换方法

项目地址

运行效果

launch.gif

语言配置

1. pubspec.yaml 国际化配置

导入官方国际化库 flutter_localizations,如下所示

dependencies:
    flutter:
        sdk: flutter
    # 国际化库
    flutter_localizations:
        sdk: flutter

2. 入口配置-MaterialApp

导入官方库之后，我们需要在app入口处，也要遵守其代理，配置语言文件，以及你所支持的语言类型

@override
Widget build(BuildContext context) {
    String rootroutes = UtilsTool.configrootpageid();
    /// 这个是为了获取本地存储的当前语言的类型
    List<String> launch = configlaunch();
    return ScreenUtilInit(
        designSize: const Size(375, 667),
        minTextAdapt: true,
        splitScreenMode: true,
        builder: (_) {
            return GestureDetector(
                /// 全局点击 事件
                onTap: () => CommentTools.keydissmiss(context),
                /// 通过GetX 创建根视图
                child: GetMaterialApp(
                        /// 入口路由
                        initialRoute: rootroutes,
                        /// 所有路由集合
                        getPages: RouterS.getAllRoutS(),
                        /// 是否显示 导航栏右上角 debug 标识
                        debugShowCheckedModeBanner: false,
                        builder: (context, child) => MediaQuery(
                            //设置文字大小不随系统设置改变
                            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
                            child: easyLoading(context, child),
                        ),
                        initialBinding: AllControllerBinding(),
                        theme: ThemeData(brightness: Brightness.light),
                        darkTheme: ThemeData(brightness: Brightness.dark),
                        /// 配置 本地存储 主题类型
                        themeMode: ThemeTool.getlocalprofileaboutThemeModel(),
                        /// 国际化配置 代理
                        localizationsDelegates: const [
                            GlobalMaterialLocalizations.delegate,
                            GlobalWidgetsLocalizations.delegate,
                            GlobalCupertinoLocalizations.delegate, // iOS
                        ],
                        /// 语言配置文件
                        translations: LanguageInfoConfig(),
                        /// 配置当前语言
                        locale: Locale(launch[0], launch[1]),
                        /// 如果配置前语言失败了，默认配置语言
                        fallbackLocale: const Locale("zh", "CN"),
                        /// 本地支持语言类型
                        supportedLocales: const [
                            Locale('zh', 'CN'),
                            Locale('en', 'US'),
                        ],
                    ),
              );
         },
    );
}

从上面代码中，我们可以看到有两个方法是需要，我们做单独处理的，

configlaunch();

// 获取配置语言
List<String> configlaunch() {
    List<String> list = ["zh", 'CN'];
    String launch = CommonSpUtil.getLaunchType();
    List<String> lochlist = launch.split('_');
    if (lochlist.length == 2) {
    list = lochlist;
    }
    return list;
}

通过这个方法我们可以获取到一个数组类似于["zh", 'CN']这样的数组，然后在入口配置-MaterialApp配置中，初始化locale: Locale(launch[0], launch[1]) 这个方法

在这里面我们也使用了和暗黑模式一样的本地持有化方案。CommonSpUtil.getLaunchType()，点进去，我们来看一下代码

/// 存语言配置
static saveLauchType({required String launch}) {
    return SpUtil.putString(NormalFlagIdConfig.launchType, launch);
}
/// 获取语言配置
static String getLaunchType() {
    return SpUtil.getString(NormalFlagIdConfig.launchType) ?? "zh_CN";
}

到这里基本上，你的国际化的配置功能完成了，但是也缺少了最关键的一个配置项，那就是国际化语言的配置文件，如果没有这个文件，前面的配置基本上是白费的，好，我们再来看一下国际化文件配置。

LanguageInfoConfig(),

由于我们是基于GetX 做的国际化，所以我们这个配置文件，最关键的就是要继承Translations，当我们点击去发现，Translations只是一个简答抽象类

abstract class Translations {
    Map<String, Map<String, String>> get keys;
}

我们只需要重写get keys 这个方法即可，虽然我没有完整的看GetX的源码，但是可以理解当我们切换语言的时候，通过更新机制，就会重新获取当前的key，用get 的好处就是，每次刷新的时候，都会重新获取对应的事件。在下面我也会举个例子，我在实际开发中，犯的错误。好，我们接着往下看。

class LanguageInfoConfig extends Translations {
    @override
    Map<String, Map<String, String>> get keys => {
        "zh_CN": {
        LanguageConfig.mygeneral: "通用",
        LanguageConfig.mythemesetting: "深色模式",
        LanguageConfig.mythemesystem: "跟随系统",
        },
        "en_US": {
        LanguageConfig.mygeneral: "General",
        LanguageConfig.mythemesetting: "Dark Mode",
        LanguageConfig.mythemesystem: "Automatic",
        }
    };
}

这就是我们的语言配置文件，不过你想使用plist文件，也是可以的，只是 "zh_CN": 对应的是你plist文件解析的map.

当然我们还是需要一个把String转换成GetX,可以动态修改 .tr类，所以我这边把通用的方法抽离成一个通用的方法，如下

String configLanguageMessage(String str) {
    return str.tr;
}

然后就是怎么使用，我这里会举两个使用实例

1.再创建一个launchmsg 配置类，

class LauchNormalMsg {
    /// 通用
    /// 这是正确的方法
    /// 当你再次调用的时候，他就会重新调用对应的方法，能达到我们想要的预期
    static String get general => configLanguageMessage(LanguageConfig.mygeneral);
    /// 如果你使用static 作为修饰符，下面这种写法就是错误的
    /// 因为static 相对于来说，只会创建一个次，所有当你切换语言后，再去使用LauchNormalMsg.genera这个方法的时候，
    /// 你会发现，你的语言没有发生变化，是的，就是没有变换，因为这个方法只会创建一次
    /// 以后再去获取，他也不会重新调用，永远都是第一次调用的时候。
    static String general = configLanguageMessage(LanguageConfig.mygeneral)
}

使用的时候

Text(
    LauchNormalMsg.general
)

2.直接调用configLanguageMessage() 方法

Text(
    configLanguageMessage(LanguageConfig.mygeneral)
)

具体您使用哪种都可以，各有利弊吧，您自己决定吧。

切换方法

切换语言的界面，也是模仿文件的，如果想看界面逻辑，就直接看
项目吧。这里我就不详细的讲了，我就把切换方式，在这里讲解一下,因为比较简单，就直接上代码了

/// 切换语言
void changelaunch() async {
    List list = launchStr.split('_');
    String languageCode = 'zh';
    String countryCode = "CN";
    if (list.length == 2) {
        languageCode = list[0];
        countryCode = list[1];
    }
    var locale = Locale(languageCode, countryCode);
    /// 更新语言
    await Get.updateLocale(locale);
    /// 存储本地语言配置
    await CommonSpUtil.saveLauchType(launch: launchStr);
}

到此，国际化配置完成

项目地址