10分钟上手Flutter快速开发脚手架GetX Scaffold——2.国际化支持

GetX Scaffold

关于 GetX Scaffold

GetXScaffold 快速开发脚手架在 GetX 框架和一些常用插件的基础上，构建了一套完整的快速开发模板。其中包括新增了部分常用功能的全局方法、常用的扩展方法和各种工具类、部分常用组件的封装、简单易用的对话框、二次封装的 Dio 网络请求工具、二次封装的 GetxController、二次封装的应用主题和国际化实现等。GetXScaffold 是对以上这些内容的过度封装，包括一些组件的扩展方法会违背 Flutter 本身的开发规范，改变你的开发习惯。所以本脚手架单纯为了提高开发效率，减少重复代码，减少开发成本。如果您是刚接触 Flutter 开发并还处在学习过程中的话，并不推荐您使用该脚手架。以下只是部分功能的使用示例，建议您通过示例项目或者源码了解全部使用方法。

使用 GetX Scaffold 快速实现国际化支持

GetXScaffold在Getx框架的基础上再次简化国际化相关实现，并封装了语言切换、语言选择保存等，通过3步即可轻松集成，全局方法轻松切换语言。

1. 添加依赖

Flutter 工程中 pubspec.yaml 文件里加入以下依赖：

dependencies:
  getx_scaffold: ^0.1.1

# 如果需要使用国际化，请添加以下依赖
flutter_localizations:
  sdk: flutter

2. 创建TextKey和对应语言的文本文件

创建 text_key.dart

class TextKey {
  static const zhuTi = 'zhuTi';
  static const genSuiXiTong = 'genSuiXiTong';
  static const liangSeZhuTi = 'liangSeZhuTi';
}

创建对应语言的文本文件

中文 locale_zh.dart

import 'package:example/common/langs/text_key.dart';

const Map<String, String> zh = {
  TextKey.zhuTi: '主题',
  TextKey.genSuiXiTong: '跟随系统',
  TextKey.liangSeZhuTi: '亮色主题',
};

英文 locale_en.dart

import 'package:example/common/langs/text_key.dart';

const Map<String, String> en = {
  TextKey.zhuTi: 'Theme',
  TextKey.genSuiXiTong: 'Follow System',
  TextKey.liangSeZhuTi: 'Light Mode',
};

更多语言自行增加......

3. 国际化相关配置

您需要创建 TranslationLibrary 并实现以下方法：

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:getx_scaffold/getx_scaffold.dart';

//对应语言文本
import 'locales/locale_en.dart';
import 'locales/locale_es.dart';
import 'locales/locale_zh.dart';

class TranslationLibrary extends Translations {
  // 默认语言 Locale(语言代码, 国家代码)
  static const fallbackLocale = Locale('zh', 'CN');
  
  // 支持的语言
  static const supportedLocales = [
    Locale('zh', 'CN'),
    Locale('en', 'US'),
    Locale('es', 'ES'),
  ];

  // 设置对应的语言文本
  @override
  Map<String, Map<String, String>> get keys => {
        'zh': zh,
        'en': en,
        'es': es,
      };

  static const localizationsDelegates = [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ];
}

4. 初始化脚手架

在 main.dart 中初始化 GetXScaffold 并添加国际化相关配置：

import 'package:getx_scaffold/getx_scaffold.dart';

void main() async {
  WidgetsBinding widgetsBinding = await init(
    isDebug: kDebugMode,
    logTag: 'GetxScaffold',
  );
  runApp(
    GetxApp(
      // 设计稿尺寸 单位：dp
      designSize: const Size(390, 844),
      // Getx Log
      enableLog: kDebugMode,
      // 默认的跳转动画
      defaultTransition: Transition.rightToLeft,
      // 主题模式
      themeMode: GlobalService.to.themeMode,
      // 主题
      theme: AppTheme.light,
      // Dark主题
      darkTheme: AppTheme.dark,
      // AppTitle
      title: 'GetxScaffold',
      // 首页
      home: const HomePage(),
      // 国际化配置
      locale: GlobalService.to.locale,
      translations: TranslationLibrary(),
      fallbackLocale: TranslationLibrary.fallbackLocale,
      supportedLocales: TranslationLibrary.supportedLocales,
      localizationsDelegates: TranslationLibrary.localizationsDelegates,
    ),
  );
}

5. 添加页面

GetXScaffold 的所有页面使用 GetView 加 GetxController 视图与逻辑分离的开发方式。所有 GetxController 必须混入 BaseControllerMixin，以响应全局刷新、主题切换、语言切换、生命周期监听等。

HomePage.dart

import 'package:flutter/material.dart';
import 'package:example/common/langs/index.dart';
import 'package:getx_scaffold/getx_scaffold.dart';

import 'index.dart';

class HomePage extends GetView<HomeController> {
  const HomePage({super.key});

  // 主视图
  Widget _buildView() {
    return <Widget>[
      ListTile(
        title: Text(TextKey.zhuTi.tr),
        onTap: () {
          Get.to(() => const ThemePage());
        },
      ),
      ListTile(
        title: Text(TextKey.yuYan.tr),
        onTap: () {
          Get.to(() => const LanguagePage());
        },
      ),
    ]
        .toListView(
          separator: const DividerX(),
        )
        .scrollbar()
        .safeArea();
  }

  Widget _buildFloatingActionButton() {
    return FloatingActionButton(
      onPressed: () {},
      child: const Icon(Icons.info),
    ).padding(all: 20.w);
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeController>(
      init: HomeController(),
      //这里的id需要与HomeController中的builderId一致
      id: 'home',
      builder: (_) {
        //双击退出
        return DoublePressBackWidget(
          child: Scaffold(
            appBar: AppBar(
              title: const Text("GetxScaffold"),
              centerTitle: true,
              elevation: 1,
            ),
            floatingActionButton: _buildFloatingActionButton(),
            body: _buildView(),
          ),
        );
      },
    );
  }
}

HomeController.dart

import 'package:getx_scaffold/getx_scaffold.dart';

class HomeController extends GetxController with BaseControllerMixin {
  @override
  String get builderId => 'home';

  HomeController();

  @override
  void onInit() {
    super.onInit();

    //刷新ui
    updateUi();
    //返回
    back();
    //延时退出
    delayedBack();
  }

  /// 是否监听生命周期事件
  @override
  bool get listenLifecycleEvent => true;

  /// listenLifecycleEvent设置为true时，会调用以下生命周期方法
  @override
  void onDetached() {
    log('onDetached');
  }

  @override
  void onHidden() {
    log('onHidden');
  }

  @override
  void onInactive() {
    log('onInactive');
  }

  @override
  void onPaused() {
    log('onPaused');
  }

  @override
  void onResumed() {
    log('onResumed');
  }
}

6. 文本使用和语言切换

/// 使用文本
TextKey.zhuTi.tr

/// 通过全局方法切换语言，脚手架会自动保存当前选择的语言
void changeLanguage(Locale locale)

7. GetX Scaffold 全部使用说明

GetXScaffold-Flutter快速开发脚手架 - 掘金 (juejin.cn)