Flutter GetX基础教程(十):国际化配置

国际化配置

在我们使用系统自带MaterialApp来实现国际化配置,需要进行很多配置,而且还需要手动去依赖第三方组件,而使用GetX来实现国际化配置,你只需要一行代码即可实现切换,接下来我们看一下具体实现。

视频教程地址

零基础视频教程地址

第一步:应用程序入口配置

  • translations: 国际化配置文件
  • locale: 设置默认语言,不设置的话为系统当前语言
  • fallbackLocale: 配置错误的情况下,使用的语言

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/InternationalizationExample/InternationalizationExample.dart';
import 'package:get/get.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
/// 国际化配置
return GetMaterialApp(
title: "GetX",
translations: Messages(),
locale: Locale('zh', 'CN'), //设置默认语言
fallbackLocale: Locale("zh", "CN"), // 在配置错误的情况下,使用的语言
home: InternationalizationExample(),
);
}
}

第二步:创建国际化类

需要继承自Translations并重写keys方法。
import 'package:get/get.dart';

class Messages extends Translations {

@override
// TODO: implement keys
Map> get keys => {
'zh_CN': {
'hello': "你好, 世界"
},
'en_US': {
'hello': 'hello world'
}
};
}

|`

第三步:创建控制器类,用于切换语言

`|

import 'dart:ui';
import 'package:get/get.dart';

class MessagesController extends GetxController {

void changeLanguage(String languageCode, String countryCode) {
var locale = Locale(languageCode, countryCode);
Get.updateLocale(locale);
}
}

|`

第四步:实例化控制器并使用

`|
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXControllerWorkersExample/WorkersConroller.dart';
import 'package:flutter_getx_example/InternationalizationExample/MessagesCnotroller.dart';
import 'package:get/get.dart';

class InternationalizationExample extends StatelessWidget {

MessagesController messagesController = Get.put(MessagesController());

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Internationalization"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('hello'.tr, style: TextStyle(color: Colors.pink, fontSize: 30)),
ElevatedButton(
onPressed: () => messagesController.changeLanguage('zh', "CN"),
child: Text("切换到中文")
),
SizedBox(height: 20,),
ElevatedButton(
onPressed: () => messagesController.changeLanguage('en', "US"),
child: Text("切换到英文")
),
],
),
),
);
}
}

|`

效果展示

image

依赖注入
在前面的文章中,我们经常使用Get.put(MyController())来进行控制器实例的创建,这样我们就算不使用控制器实例也会被创建,其实GetX还提供很多创建实例的方法,可根据不同的业务来进行创建,接下来我们简单介绍一下几个最常用的

Get.put(): 不使用控制器实例也会被创建
Get.lazyPut(): 懒加载方式创建实例,只有在使用时才创建
Get.putAsync(): Get.put()的异步版版本
Get.create(): 每次使用都会创建一个新的实例
我们来看一下代码演示

第一步:应用程序入口配置
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/DependecyInjectionExample/DependecyInjectionExample.dart';
import 'package:get/get.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: "GetX",
home: DependecyInjectionExample(),
);
}
}
第二步:创建控制器
import 'package:flutter_getx_example/ObxCustomClassExample/Teacher.dart';
import 'package:get/get.dart';

class MyController extends GetxController {
var teacher = Teacher();

void convertToUpperCase() {
teacher.name.value = teacher.name.value.toUpperCase();
}
}
第三步:实例化控制器并使用
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXControllerExample/MyController.dart';
import 'package:get/get.dart';

class DependecyInjectionExample extends StatelessWidget {
@override
Widget build(BuildContext context) {

// 即使不使用控制器实例也会被创建
// tag将用于查找具有标签名称的实例
// 控制器在不使用时被处理,但如果永久为真,则实例将在整个应用程序中保持活动状态
MyController myController = Get.put(MyController(), permanent: true);
// MyController myController = Get.put(MyController(), tag: "instancel", permanent: true);

// 实例将在使用时创建
// 它类似于'permanent',区别在于实例在不被使用时被丢弃
// 但是当它再次需要使用时,get 将重新创建实例
// Get.lazyPut(()=> MyController());
// Get.lazyPut(()=> MyController(), tag: "instancel");

// Get.put 异步版本
// Get.putAsync(() async  => await MyController());

// 每次都将返回一个新的实例
// Get.create(() => MyController());

return Scaffold(
  appBar: AppBar(
    title: Text("GetXController"),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: () {
            // 实例使用的tag创建
            // Get.find(tag: 'instancel');

            Get.find();
          },
          child: Text("别点我"))
      ],
    ),
  ),
);

}
}

你可能感兴趣的:(Flutter GetX基础教程(十):国际化配置)