关于flutter:Flutter-GetX系列教程国际化配置依赖注入Binding

2次阅读

共计 7848 个字符，预计需要花费 20 分钟才能阅读完成。

国际化配置

在咱们应用零碎自带 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<String, Map<String, String>> 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("切换到英文")
            ),
          ],
        ),
      ),
    );
  }
}

成果展现

依赖注入

在后面的文章中，咱们常常应用 Get.put(MyController()) 来进行控制器实例的创立，这样咱们就算不应用控制器实例也会被创立，其实 GetX 还提供很多创立实例的办法，可依据不同的业务来进行创立，接下来咱们简略介绍一下几个最罕用的

  • Get.put()： 不应用控制器实例也会被创立
  • Get.lazyPut()： 懒加载形式创立实例，只有在应用时才创立
  • Get.putAsync<T>()： Get.put()的异步版版本
  • Get.create<T>()： 每次应用都会创立一个新的实例

咱们来看一下代码演示

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

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<MyController>(() async  => await MyController());

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

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

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

Get Service

这个类就像一个 GetxController，它共享雷同的生命周期 onInit()、onReady()、onClose()。但外面没有 “ 逻辑 ”。它只是告诉GetX 的依赖注入零碎，这个子类 不能 从内存中删除。所以如果你须要在你的应用程序的生命周期内对一个类实例进行相对的长久化，那么就能够应用GetxService。

第一步：创立 Service

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

class Service extends GetxService {Future<void> getCounter() async {SharedPreferences prefs = await SharedPreferences.getInstance();
    int count = (prefs.getInt("counter") ?? 0) + 1;
    print("count 的值为: $count");
    await prefs.setInt("counter", count);
  }
}

第二步：初始化 Service

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

/// 初始化服务
Future<void> main() async {await initServices();
  runApp(MyApp());
}

Future<void> initServices() async {print("初始化服务");
  await Get.putAsync(() async => await Service());
  print("所有服务启动");
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "GetX",
      home: GetXServiceExample(),);
  }
}

第三步：调用 Service


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

class GetXServiceExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("GetX Service"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: () {Get.find<Service>().getCounter();},
              child: Text("点我加 1"))
          ],
        ),
      ),
    );
  }
}

GetX Binding

在咱们应用 GetX 状态管理器的时候，往往每次都是用须要手动实例化一个控制器，这样的话根本页面都须要实例化一次，这样就太麻烦了，而Binding 能解决上述问题，能够在我的项目初始化时把所有须要进行状态治理的控制器进行对立初始化，接下来看代码演示：

第一步：申明须要进行的绑定控制器类


import 'package:flutter_getx_example/GetXBindingExample/controller/BindingHomeController.dart';
import 'package:flutter_getx_example/GetXBindingExample/controller/BindingMyController.dart';
import 'package:get/get.dart';

class AllControllerBinding implements Bindings {
  
  @override
  void dependencies() {
    // TODO: implement dependencies
    Get.lazyPut<BindingMyController>(() => BindingMyController());
    Get.lazyPut<BindingHomeController>(() => BindingHomeController());
  }
}



import 'package:get/get.dart';

class BindingHomeController extends GetxController {
  var count = 0.obs;
  void increment() {count++;}
}


import 'package:get/get.dart';

class BindingMyController extends GetxController {
  var count = 0.obs;
  void increment() {count++;}
}

第二步：在我的项目启动时进行初始化绑定

绑定的形式有多种，在不同的状况下有不同的应用形式，这里介绍一种，如果须要更加具体的介绍，观看视频将会是最佳的抉择。

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXBindingExample/binding/AllControllerBinding.dart';
import 'package:flutter_getx_example/GetXBindingExample/GetXBindingExample.dart';
import 'package:get/get.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// GetX Binding
    return GetMaterialApp(
      title: "GetX",
      initialBinding: AllControllerBinding(),
      home: GetXBindingExample(),);
  }
}

第三步：在页面中应用状态管理器


import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXBindingExample/BHome.dart';
import 'package:flutter_getx_example/GetXBindingExample/binding/BHomeControllerBinding.dart';
import 'package:flutter_getx_example/GetXBindingExample/controller/BindingMyController.dart';
import 'package:get/get.dart';

class GetXBindingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("GetXBinding"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [Obx(() => Text("计数器的值为 ${Get.find<BindingMyController>().count}",
              style: TextStyle(color: Colors.red, fontSize: 30),
            )),
            SizedBox(height: 20,),
            ElevatedButton(onPressed: () {Get.find<BindingMyController>().increment();},
              child: Text("点击加 1")
            ),
            SizedBox(height: 20,),
            ElevatedButton(onPressed: () {Get.to(BHome());

                // Get.toNamed("/bHome");

                // Get.to(BHome(), binding: BHomeControllerBinding());
              },
              child: Text("跳转去首页")
            ),
          ],
        ),
      ),
    );
  }
}
正文完
flutter
发表至： flutter
2021-09-11
 0
关于flutter:flutter配置的实践
关于flutter:参与-2023-第二季度官方-Flutter-开发者调查
关于flutter:操作系统计算机硬件简介md
关于flutter:flutter系列之在flutter中自定义themes

站内搜索

-「」