行业知识
【Flutter】多语言方案二:GetX 版
2026-11-10 15:51:52
来源:互联网转载
介绍
多语言方案:GetX版,需要手动自定义字符串引用常量,优点不需要自己管理状态。
目录
- 介绍
- 运行效果
- 一、安装 GetX
- 二、使用
- 1.语言配置 在lib/core下创建一个language文件夹,文件夹下创建一个local.dart文件
- 2.language文件夹下创建一个messages.dart文件
- 3. 主入口MaterialApp改成GetMaterialApp
- 4. 配置及调用
- 5.多语言切换
运行效果
一、安装 GetX
dependencies:get: ^4.6.6
二、使用
1.语言配置 在lib/core下创建一个language文件夹,文件夹下创建一个local.dart文件
class Local { static const String appName = 'BraveComponent'; static const String helloWorld = '你好,世界'; static const String followerSystemLanguage = '跟随系统语言'; static const String simplifiedChinese = '简体中文'; static const String traditionalChinese = '繁体中文'; static const String english = '英文'; static const String setting = '设置'; static const String multiLanguage = '多语言'; static const String theme = '主题';}2.language文件夹下创建一个messages.dart文件
import 'package:get/get.dart';import 'local.dart';class Messages extends Translations { @override Map get keys => { 'zh_CN': { Local.appName: 'BraveComponent', Local.helloWorld: '你好,世界', Local.followerSystemLanguage: '跟随系统语言', Local.simplifiedChinese: '简体中文', Local.traditionalChinese: '繁体中文', Local.english: '英文', Local.setting: '设置', Local.multiLanguage: '多语言', Local.theme: '主题', }, 'zh_HK': { Local.appName: 'BraveComponent', Local.helloWorld: '妳好,世界', Local.followerSystemLanguage: '跟隨系統語言', Local.simplifiedChinese: '簡體中文', Local.traditionalChinese: '繁體中文', Local.english: '英文', Local.setting: '設置', Local.multiLanguage: '多語言', Local.theme: '主題', }, 'en_US': { Local.appName: 'BraveComponent', Local.helloWorld: 'HelloWorld', Local.followerSystemLanguage: 'FollowerSystemLanguage', Local.simplifiedChinese: 'SimplifiedChinese', Local.traditionalChinese: 'TraditionalChinese', Local.english: 'English', Local.setting: 'Setting', Local.multiLanguage: 'MultiLanguage', Local.theme: 'Theme', }, };}3. 主入口MaterialApp改成GetMaterialApp
main.dart类
import 'package:flutter/material.dart';import 'app.dart';import 'core/cache/cache/cache.dart';import 'l10n_app.dart';void main() async { await Cache.instance.init(); // runApp(L10nApp()); //flutter_localizations与GetX配合版的多语言 runApp(const App()); //GetX版多语言}app.dart类
import 'package:brave_component/core/utils/language_utils.dart';import 'package:flutter/material.dart';import 'package:flutter_localizations/flutter_localizations.dart';import 'package:get/get.dart';import 'core/language/messages.dart';import 'l10n/l10n.dart';import 'routes/route_pages.dart';import 'routes/route_path.dart';class App extends StatefulWidget { const App({super.key}); @override State createState() => AppState();}class AppState extends State { @override Widget build(BuildContext context) { return GetMaterialApp( initialRoute: RoutePath.main, getPages: RoutePages.getPages, title: 'component', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), translations: Messages(), locale: LanguageUtils.getLocale(), fallbackLocale: const Locale("zh", "CN"), localeResolutionCallback: (deviceLocale, supportedLocales) { print('当前语言:${deviceLocale.toString()}'); return; }, supportedLocales: AppLocalizations.supportedLocales, localizationsDelegates: const [ AppLocalizations.delegate, GlobalCupertinoLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalMaterialLocalizations.delegate ], ); }}language_utils.dart类
import 'package:brave_component/l10n/l10n.dart';import 'package:flutter/widgets.dart';import 'package:get/get.dart';import '../../l10n_app.dart';import '../cache/helpers/cache_helper.dart';import '../enums/language.dart';class LanguageUtils { static String getLanguage(BuildContext context, String code) { late String language; switch (code) { case 'fs-Lan': language = context.l10n.followerSystemLanguage; break; case 'zh-CN': language = context.l10n.simplifiedChinese; break; case 'zh-HK': language = context.l10n.traditionalChinese; break; case 'en-US': language = context.l10n.english; break; default: language = context.l10n.followerSystemLanguage; break; } return language; } static Locale? getLocale() { Locale? locale; String code = CacheHelper.countryCode; List lang = code.split('-'); locale = (code == Language.fsLan.countryCode) ? Get.deviceLocale : Locale(lang[0], lang[1]); return locale; } static void updateLocale(String countryCode, {bool isL10n = false}) { List lang = countryCode.split('-'); Get.updateLocale((countryCode == Language.fsLan.countryCode) ? Get.deviceLocale! : Locale(lang[0], lang[1])); CacheHelper.saveCountryCode(countryCode); if (isL10n) { L10nAppState.setting.changeLocale!(); } }}4. 配置及调用
translations: Messages(),//所有的多语言翻译资源locale: Get.deviceLocale,//跟随系统设置语言 持久化以后这里改一下fallbackLocale: Locale("zh", "CN"),//未提供当前Locale翻译时,备用的翻译- 使用 Text(Local.helloWorld.tr)
5.多语言切换
multi_language_view.dart类
import 'package:brave_component/core/enums/language.dart';import 'package:brave_component/core/language/local.dart';import 'package:flutter/material.dart';import 'package:get/get.dart';import '../../../../../core/res/colours.dart';import '../../../../../widgets/base/texts.dart';import 'multi_language_logic.dart';class MultiLanguagePage extends StatelessWidget { MultiLanguagePage({super.key}); final logic = Get.find(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Texts.fontSize18Normal(Local.multiLanguage.tr, color: Colours.titleColor), leading: GestureDetector( onTap: () { Get.back(result: 'changeLanguage'); }, child: const Icon(Icons.arrow_back), ), ), body: Container( padding: const EdgeInsets.symmetric(vertical: 15), // child: ListView( // children: ListTile.pideTiles( // context: context, // tiles: Language.values // .map((e) => // GetBuilder(builder: (logic) { // return ListTile( // title: Texts.fontSize14Normal(e.title, // color: Colours.titleColor), // trailing: e.countryCode == logic.countryCode // ? const Icon(Icons.check, // color: Colours.primaryColor) // : null, // onTap: () { // logic.changeLanguage(e.countryCode); // }, // ); // })) // .toList()) // .toList(), // ), child: ListView.separated( itemBuilder: (context, index) { return _itemContent(context, index); }, separatorBuilder: (_, index) => const Divider(), itemCount: Language.values.length), ), ); } Widget _itemContent(BuildContext context, int index) { return GetBuilder(builder: (logic) { return Container( padding: const EdgeInsets.symmetric(horizontal: 15), height: 44, child: GestureDetector( onTap: () { logic.changeLanguage(Language.values[index].countryCode); }, child: Row( children: [ Expanded( child: Texts.fontSize14Normal(Language.values[index].title, color: Colours.titleColor)), Visibility( visible: logic.countryCode == Language.values[index].countryCode, child: const Icon(Icons.check, color: Colours.primaryColor)) ], ), ), ); }); }}multi_language_logic.dart类
import 'package:brave_component/core/cache/helpers/cache_helper.dart';import 'package:get/get.dart';import '../../../../../core/utils/language_utils.dart';class MultiLanguageLogic extends GetxController { late String countryCode; @override void onInit() { super.onInit(); countryCode = CacheHelper.countryCode; } void changeLanguage(String code) { countryCode = code; LanguageUtils.updateLocale(code); update(); }}multi_language_binding.dart类
import 'package:get/get.dart';import 'multi_language_logic.dart';class MultiLanguageBinding extends Bindings { @override void dependencies() { Get.lazyPut(() => MultiLanguageLogic()); }}language.dart类
enum Language { fsLan(title: "跟随系统语言", countryCode: "fs-Lan"), zhCN(title: "简体中文", countryCode: "zh-CN"), zhHK(title: "繁体中文", countryCode: "zh-HK"), enUS(title: "English", countryCode: "en-US"); final String title; final String countryCode; const Language({required this.title, required this.countryCode});}这里关于GetX的binding用法不会的可以参考Flutter 多语言、主题切换之GetX库!这个博主开发的GetX插件,生成模版代码提高研发效率,建议看看用起来。
持久化就不赘述了,参考源码
源码
上一篇 多语言方案一:flutter_localizations 与 GetX 配合版