目录
一、安装
dependencies:
get: ^4.6.6
二、使用
1.安装GetX插件，快捷生成模版代码
GetX插件用法Flutter GetX使用—简洁的魅力！
2.主入口MaterialApp改成GetMaterialApp
3.定义路由常量RoutePath类、别名映射页面RoutePages类
route_path.dart类
class RoutePath {
///主页面
static const String main = "/";
///设置
static const String setting = "/setting";
///设置多语言界面
static const String theme = "/theme";
///设置多语言界面
static const String multiLanguage = "/multiLanguage";
///主页面
static const String l10n_main = "/l10n_main";
///设置
static const String l10n_setting = "/l10n_setting";
///设置多语言界面
static const String l10n_theme = "/l10n_theme";
///设置多语言界面
static const String l10n_multiLanguage = "/l10n_multiLanguage";
}
route_pages.dart类
import 'package:get/get.dart';
import 'package:brave_component/routes/route_path.dart';
import '../example/pages/getx/home/home_view.dart';
import '../example/pages/getx/setting/multi_language/multi_language_binding.dart';
import '../example/pages/getx/setting/multi_language/multi_language_view.dart';
import '../example/pages/getx/setting/setting/setting_binding.dart';
import '../example/pages/getx/setting/setting/setting_view.dart';
import '../example/pages/getx/setting/theme/theme_binding.dart';
import '../example/pages/getx/setting/theme/theme_view.dart';
import '../example/pages/l10n/l10n_home/l10n_home_view.dart';
import '../example/pages/l10n/l10n_setting/l10n_multi_language/l10n_multi_language_binding.dart';
import '../example/pages/l10n/l10n_setting/l10n_multi_language/l10n_multi_language_view.dart';
import '../example/pages/l10n/l10n_setting/l10n_setting/l10n_setting_binding.dart';
import '../example/pages/l10n/l10n_setting/l10n_setting/l10n_setting_view.dart';
import '../example/pages/l10n/l10n_setting/l10n_theme/l10n_theme_binding.dart';
import '../example/pages/l10n/l10n_setting/l10n_theme/l10n_theme_view.dart';
class RoutePages {
static final List<GetPage> getPages = [
GetPage(
name: RoutePath.l10n_main,
page: () => L10nHomePage(),
),
GetPage(
name: RoutePath.l10n_setting,
page: () => L10nSettingPage(),
binding: L10nSettingBinding(),
),
GetPage(
name: RoutePath.l10n_multiLanguage,
page: () => L10nMultiLanguagePage(),
binding: L10nMultiLanguageBinding(),
),
GetPage(
name: RoutePath.l10n_theme,
page: () => L10nThemePage(),
binding: L10nThemeBinding(),
),
GetPage(
name: RoutePath.main,
page: () => HomePage(),
),
GetPage(
name: RoutePath.setting,
page: () => SettingPage(),
binding: SettingBinding(),
),
GetPage(
name: RoutePath.multiLanguage,
page: () => MultiLanguagePage(),
binding: MultiLanguageBinding(),
),
GetPage(
name: RoutePath.theme,
page: () => ThemePage(),
binding: ThemeBinding(),
),
];
}
4. 初始initialRoute，getPages。
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
],
);
5.调用
setting_view.dart类 视图层
import 'package:brave_component/core/utils/language_utils.dart';
import 'package:brave_component/routes/route_path.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../../core/language/local.dart';
import '../../../../../core/res/colours.dart';
import '../../../../../widgets/base/texts.dart';
import 'setting_logic.dart';
class SettingPage extends StatelessWidget {
SettingPage({super.key});
final logic = Get.find<SettingLogic>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Texts.fontSize18Normal(Local.setting.tr,
color: Colours.titleColor),
),
body: GetBuilder<SettingLogic>(builder: (logic) {
return Container(
padding: const EdgeInsets.only(top: 20),
child: Container(
padding: const EdgeInsets.all(15),
child: Column(
children: [
GestureDetector(
onTap: () {
logic.toName(RoutePath.multiLanguage);
},
child: Row(
children: [
Expanded(
child: Texts.fontSize14Normal(Local.multiLanguage.tr,
color: Colours.titleColor),
),
Texts.fontSize14Normal(
LanguageUtils.getLanguage(
context, logic.countryCode),
color: Colours.titleColor),
const Icon(Icons.chevron_right)
],
),
),
const SizedBox(height: 12),
GestureDetector(
onTap: () {
logic.toName(RoutePath.theme);
},
child: Row(
children: [
Expanded(
child: Texts.fontSize14Normal(Local.theme.tr,
color: Colours.titleColor),
),
Texts.fontSize14Normal(Local.theme.tr,
color: Colours.titleColor),
const Icon(Icons.chevron_right)
],
),
),
],
),
),
);
}));
}
}
setting_logic.dart类 逻辑层继承GetxController，状态逻辑多的情况还可增加一个state层
import 'package:brave_component/core/cache/helpers/cache_helper.dart';
import 'package:brave_component/routes/route_path.dart';
import 'package:get/get.dart';
class SettingLogic extends GetxController {
late String countryCode;
@override
void onInit() {
super.onInit();
countryCode = CacheHelper.countryCode;
}
void toName(String page) {
switch (page) {
case RoutePath.multiLanguage:
Get.toNamed(RoutePath.multiLanguage)
?.then((value) => {getCountryCode()});
break;
case RoutePath.theme:
Get.toNamed(RoutePath.theme);
break;
default:
Get.toNamed(RoutePath.multiLanguage);
break;
}
}
void getCountryCode() {
countryCode = CacheHelper.countryCode;
print('setting getCountryCode：$countryCode');
update();
}
}
setting_binding.dart类 binding层以lazy的方式获取setting_logic的实例，手动添加到RoutePages 类
import 'package:get/get.dart';
import 'setting_logic.dart';
class SettingBinding extends Bindings {
@override
void dependencies() {
Get.lazyPut(() => SettingLogic());
}
}
总结
- logic层已经lazy的形式添加过，其他类需要用它的时候
final logic = Get.find<SettingLogic>(); - logic层处理好逻辑，需要通知视图层更新时,logic层调用
update();,视图层通过GetBuilder包裹需要更新的widget - 将光标放到需要创建GetBuilder的widget上，alt/options+enter
- 路由跳转，使用命名路由
Get.toNamed(RoutePath.multiLanguage);
