1、Flutter Getx Dialog属性和说明
image.png
2、Flutter Getx 路由管理
GetX 为我们封装了 Navigation ，无需 context 可进行跳转，使用 GetX 进行路由跳转非常的简单，
只需要调用 Get.to() 即可进行路由跳转， GetX 路由跳转简化了跳转动画设置 、动画时长定义、动画
曲线设置。
// Get.to()实现普通路由跳转
Get.to(const DialogDemo());
//Get.toNamed()跳转到命名路由
Get.toNamed("/dialog");
//返回到上一级页面
Get.back();
// 返回到根
Get.offAll(Tabs(index: 4));
// 进入下一个页面，但没有返回上一个页面的选项（用于闪屏页，登录页面等）。
Get.off(const GirdViewPager());
GetPage 可以在GetMaterialApp 配置动态路由及动画
// defaultTransition可以配置默认动画
defaultTransition: Transition.rightToLeftWithFade,
getPages: [
GetPage(name: "/", page: () => Tabs(index: 0)),
GetPage(name: "/dialog", page: () => const DialogDemo()),
],
Getx 路由跳转传值以及接受数据
//传值
Get.toNamed("/shop", arguments: {"id": 20});
//接受传值
print(Get.arguments);
Getx 中间件配置
class ShopMiddleWare extends GetMiddleware {
@override
// 优先级越低越先执行
int? get priority => -1;
@override
RouteSettings redirect(String? route) {
return const RouteSettings(name: '/login');
}
}
//GetMaterialApp 的getPages中配置
GetPage(
name: "/dialog",
page: () => const DialogDemo(),
middlewares: [ShopMiddleWare()]),
3、Getx 状态管理
声明一个响应式变量三种方式
//第一种 使用 Rx{Type}
final name = RxString('');
final isLogged = RxBool(false);
final count = RxInt(0);
final balance = RxDouble(0.0);
final items = RxList<String>([]);
final myMap = RxMap<String, int>({});
// 第二种是使用 Rx，规定泛型 Rx。
final name = Rx<String>('');
final isLogged = Rx<Bool>(false);
final count = Rx<Int>(0);
final items = Rx<List<String>>([]);
final myMap = Rx<Map<String, int>>({});
// 自定义类 - 可以是任何类
final user = Rx<User>();
// 第三种 更实用、更简单、更可取的方法，只需添加 .obs 作为value的属性。(推荐)
final name = ''.obs;
final isLogged = false.obs;
final count = 0.obs;
final balance = 0.0.obs;
final number = 0.obs;
final items = <String>[].obs;
final myMap = <String, int>{}.obs;
// 自定义类 - 可以是任何类
final user = User().obs;
实际应用：监听自定义类数据的变化
class Person {
// rx 变量
RxString name = "Jimi".obs;
RxInt age = 18.obs;
}
var person = Person();
children: <Widget>[
Obx(() => Text(
"我的名字是 ${person.name.value}",
style: const TextStyle(color: Colors.red, fontSize: 30),
))
],
4、Getx 简单的状态管理(依赖管理)GetxController
实现多页面之间的数据共享
//先新建 CountController
class CountController extends GetxController {
var count = 0.obs;
void inc() {
count++;
update();
}
void dec() {
count--;
update();
}
}
//调用
CountController countController = Get.put(CountController());
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Obx(() => Text("${countController.count}",
style: Theme.of(context).textTheme.headline1)),
ElevatedButton(
onPressed: () {
countController.inc();
},
child: const Text("数值+1"))
],
),
);
}
5、GetX Binding
\\第一步：声明需要进行的绑定控制器类
class BindingMyController extends GetxController {
var count = 0.obs;
void increment() {
count++;
}
}
class AllControllerBinding implements Bindings {
@override
void dependencies() {
Get.lazyPut<BindingMyController>(() => BindingMyController());
}
}
\\第二步：在项目启动时进行初始化绑定
return GetMaterialApp(
initialBinding: AllControllerBinding(),
);
}
\\第三步：在页面中使用状态管理器
class _GetxPagerState extends State<GetxPager> {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//控件数值动态变化
Obx(() => Text("${Get.find<BindingMyController>().count}",
style: Theme.of(context).textTheme.headline1)),
ElevatedButton(
onPressed: () {
//调用方法
Get.find<BindingMyController>().increment();
},
child: const Text("数值+1"))
],
),
);
}
}
6、GetView介绍 以及 GetxController生命周期
GetView 只是对已注册的 Controller 有一个名为 controller 的getter的 const Stateless 的
Widget，如果我们只有单个控制器作为依赖项，那我们就可以使用 GetView ，而不是使用
StatelessWidget ，并且避免了写 Get.Find() 。
GetView结合GetxController使用
//第一步 、定义一个CountController
class CountController extends GetxController {
var count = 0.obs;
@override
void onInit() {
super.onInit();
print("onInit");
}
@override
void onReady() {
super.onReady();
print("onReady");
}
@override
void onClose() {
print("onClose");
}
void inc() {
count++;
update(['first_count']);
}
void dec() {
count--;
update();
}
}
//第二步 、继承GetView并使用状态管理
class GetxPager extends GetView<CountController> {
const GetxPager({super.key});
@override
Widget build(BuildContext context) {
//如果第一次使用还需要put
Get.put(CountController());
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//控件数值动态变化
Obx(() => Text("${controller.count}",
style: Theme.of(context).textTheme.headline1)),
ElevatedButton(
onPressed: () {
//调用方法
controller.inc();
},
child: const Text("数值+1"))
],
),
);
}
}
GetView Binding结合GetxController使用
//第一步 、定义一个CountController
class CountController extends GetxController {
var count = 0.obs;
@override
void onInit() {
super.onInit();
print("onInit");
}
@override
void onReady() {
super.onReady();
print("onReady");
}
@override
void onClose() {
print("onClose");
}
void inc() {
count++;
update(['first_count']);
}
void dec() {
count--;
update();
}
}
//第二步 、定义一个shop Binding
//第一步 、定义一个CountController
class CountController extends GetxController {
var count = 0.obs;
@override
void onInit() {
super.onInit();
print("onInit");
}
@override
void onReady() {
super.onReady();
print("onReady");
}
@override
void onClose() {
print("onClose");
}
void inc() {
count++;
update(['first_count']);
}
void dec() {
count--;
update();
}
}
7、GetUtils
GetUtils 是 getx 为我们提供一些常用的工具类库，包括值是否为空、是否是数字、是否是视频、图
片、音频、PPT、Word、APK、邮箱、手机号码、日期、MD5、SHA1等等。
8、Flutter get_cli的使用
1、win安装get_cli
flutter pub global activate get_cli
如果提示：Warning: Pub installs executables into F:\flutter_windows\flutter_windows_3.3.0-
stable\flutter.pub-cache\bin, which is not on your path.
解决办法：下面路径添加到Path环境变量里面
F:\flutter_windows\flutter_windows_3.3.0-stable\flutter.pub-cache\bin
2、验证get_cli是否安装配置成功
命令行输入：get或者getx
3、使用get_cli命令行
1、初始化项目
get init
2、创建页面
get create page:search
get create page:cart
get create page:user
get create page:category
3、创建控制器
get create controller:counter
在指定目录里面创建控制器
get create controller:counter on home
4、创建view
get create view:dialogview on home
网友评论