Flutter Getx 状态管理(二)
1.Snacker
Get.snackbar('hello', 'world',snackPosition: SnackPosition.BOTTOM);
2.dialog
Get.defaultDialog(content: Text('提示'),confirm: Text('确认'),cancel:Text('取消'));
3.BottomSheet
Get.bottomSheet(Container(
width: double.infinity,
height: 200,
child: Text('取消'),
),backgroundColor: Colors.red);
4.国际化
Translations
注意:“RemainDays”,一定要用“”,不能使用’’,否则无法翻译出来,原因未知,亲测
import 'package:get/get.dart';
class TranslationService extends Translations {
@override
// TODO: implement keys
Map<String, Map<String, String>> get keys => {
'zh': {
"RemainDays": "%s 天", //%s为占位符
"hello": "你好",
},
'en': {
"RemainDays": "%s days",
"hello": "world",
}
};
}
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter/cupertino.dart';
import 'TranslationService.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return GetMaterialApp(
translations: TranslationService(), // 你的翻译
locale: Locale('zh', 'CN'), // 将会按照此处指定的语言翻译
fallbackLocale: Locale('en', 'US'), // 添加一个回调语言选项,以备上面指定的语言翻译不存在
home: Container(
child: Center(
child: Text('RemainDays'.trArgs(['5'])),
// child: HomePageView(),
),
),
);
}
}
2.更新
var locale = Locale('en', 'US');
Get.updateLocale(locale);
3.要读取系统语言,可以使用window.locale
。
import 'dart:ui' as ui;
return GetMaterialApp(
locale: ui.window.locale,
);
5改变主题
import "package:flutter/material.dart";
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context){
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:ThemeTestRoute(),
);
}
}
class ThemeTestRoute extends StatefulWidget{
@override
_ThemeTestRouteState createState()=>new _ThemeTestRouteState();
}
class _ThemeTestRouteState extends State<ThemeTestRoute>{
Color _themeColor=Colors.teal;//当前主题颜色
@override
Widget build(BuildContext context) {
ThemeData themeData=Theme.of(context);
return Theme(
data:ThemeData(
primarySwatch: _themeColor,//用于导航栏。floatingActionButton
iconTheme: IconThemeData(color: _themeColor)//用于icon颜色
),
child: Scaffold(
appBar: AppBar(title:Text("主题变色")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//第一行Icon使用主题中的iconTheme
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget>[
Icon(Icons.favorite),
Text( "颜色跟随主题")
]
),
//为第二行Icon自定义颜色(固定为黑色)
Theme(
data: themeData.copyWith(
iconTheme: themeData.iconTheme.copyWith(
color: Colors.black
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.favorite),
Text("颜色固定黑色")
]
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: ()=>//主题切换
setState(()=>
_themeColor= _themeColor ==Colors.teal? Colors.blue:Colors.teal
),
child: Icon(Icons.palette),
),
),
);
}
}
如果使用Getx
请不要使用比GetMaterialApp
更高级别的widget来更新主题,这可能会造成键重复。很多人习惯于创建一个 "ThemeProvider "的widget来改变应用主题,这在GetX™中是绝对没有必要的。
你可以创建你的自定义主题,并简单地将其添加到Get.changeTheme
中,而无需任何模板。
Get.changeTheme(ThemeData.light());
如果你想在 "onTap "中创建类似于改变主题的按钮,你可以结合两个GetX™ API来实现。
检查是否使用了深色的 "Theme "的API,以及 "Theme "更改API。
而Theme Change API,你可以把下面的代码放在onPressed里。
Get.changeTheme(Get.isDarkMode? ThemeData.light(): ThemeData.dark());
当.darkmode被激活时,它将切换到light主题,当light主题被激活时,它将切换到dark主题。