目录
- 一、安装
- 二、使用
- 1.安装GetX插件,快捷生成模版代码
- 2.主入口MaterialApp改成GetMaterialApp
- 3.定义路由常量RoutePath类、别名映射页面RoutePages类
- 4. 初始initialRoute,getPages。
- 5.调用
- 总结
一、安装
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>();@overrideWidget 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;@overridevoid 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 {@overridevoid 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);
源码