小工具知识网

当前位置: 首页 > 行业知识 > 【Flutter】多语言方案二:GetX 版

行业知识

【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 配合版

上一篇:【译】WordPress Bricks主题安全漏洞曝光,25,000个安装受影响

下一篇:Spring Boot 生成与解析Jwt