全栈工程师?
嗯.....目前并不是!

GetX- 简化flutter状态管理器

文档地址
如何定义状态和响应式状态
简化路由操作
参考在语雀上整理的代码demo

0. 参考文档示例,项目组织机构


| - lib
  | - pages
    | - home
      | - home_view.dart
      | - home_controller.dart
      | - home_binding.dart

在这里插入图片描述

1. 定义响应式数据

  • 虽然文档上给了3种方式参考文档,但我这边测试的第二种泛型的写法一直报红,有搞通的留言一个
  • 以下语法是最简单的了

1.1 定义x响应式数据(也就是上边目录的controller文件)

home_controller.dart

import 'package:get/get.dart';
class HomeController extends GetxController {
  var num = 0.obs;
  //var num = RxInt(0), 此语法也可以,也是具有响应式的
  void increment() => num++;
  void decrement() => num--;
}

home_binding.dart

import 'package:get/get.dart';
// 引入你的控制器
class HomeBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => HomeController());
  }
}

home_view.dart 将试图和数据关联

import 'package:get/get.dart';

class HomeView extends GetView {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Hello WOrld!")),
      body: Column(
        children: [
          // 使用Obx() 让视图更新
          Obx(() => Text("${controller.num}")),
          FlatButton(
            onPressed: () {
              controller.increment();
            },
            child: Text("add"),
          ),
          FlatButton(
            onPressed: () {
              controller.decrement();
            },
            child: Text("decrement"),
          ),
        ],
      ),
    );
  }
}
跑起来计数器

main.dart

main(List args) {
  runApp(GetMaterialApp(
    enableLog: true,
    initialRoute: "/home",
    getPages: [
      GetPage(name: "/home", page: () => HomeView(), binding: HomeBinding())
    ],
  ));
}

注释一波:

控制器(ctroller): 定义初始数据源 ,需要继承 `GetxController` 类,
`Bindings` ,用于将控制器推入getx中,可以理解为要注册控制器
使用 `GetView<T>` 语法将 `controller 和 binding` 进行关联 ,内部可以直接 使用 `controller的实例调用数据和方法`
使用 `Obx(()=> widget)` 语法,返回你要变更的组件, 让数据在视图上更新,并且是局部刷新的,

案例-登录跳转,传参,接收


目录
在这里插入图片描述
login_controller.dart

class LoginController extends GetxController {
  var userName = RxString("");
  var pwd = RxString("");
  void saveUserName(uName) => this.userName.value = uName;
  void savePwd(pwd) => this.pwd.value = pwd;
}

login_binding.dart

import 'package:get/get.dart';
import 'login_controller.dart';
class LoginBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => LoginController());
  }
}

login_view.dart

import 'package:app_demo/login/login_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class LoginView extends GetView {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: AppBar(elevation: 0, backgroundColor: Colors.red),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            inputWidget(
              label: "用户名",
              hintText: "用户名",
              cb: (val) => controller.saveUserName(val),
            ),
            inputWidget(
              label: "密码",
              hintText: "密码",
              obscureText: true,
              cb: (val) => controller.savePwd(val),
            ),
            loginButton()
          ],
        ),
      ),
    );
  }

  // 输入框
  Widget inputWidget(
      {String label, String hintText, Function cb, bool obscureText = false}) {
    return TextField(
      obscureText: obscureText,
      decoration: InputDecoration(
        labelText: label + ':',
        icon: Icon(Icons.people),
        hintText: "请输入" + hintText,
        hintStyle: TextStyle(color: Colors.green),
      ),
      onChanged: (val) => cb(val),
    );
  }

  // 登录
  Widget loginButton() => Container(
        width: double.infinity,
        height: 45,
        margin: const EdgeInsets.only(top: 20),
        color: Colors.blue,
        child: FlatButton(
          onPressed: () {
            // 延迟两秒跳转 传参的
            Future.delayed(Duration(seconds: 2), () {
              Get.toNamed(
                  "/home?name=${controller.userName}&pwd=${controller.pwd}");
            });
          },
          child: Text(
            "登录",
            style: TextStyle(color: Colors.white),
          ),
        ),
      );
}

main.dart(自己导包)

import 'package:flutter/material.dart';
import 'package:get/get.dart';
main(List args) {
  runApp(GetMaterialApp(
    enableLog: true,
    initialRoute: "/login",
    debugShowCheckedModeBanner: false,
    getPages: [
      GetPage(name: "/login", page: () => LoginView(), binding: LoginBinding()),
      GetPage(name: "/home", page: () => HomeView(), binding: HomeBinding()),
    ],
  ));
}

在home_view.dart 接收参数

import 'package:app_demo/home/home_controller.dart';
import 'package:app_demo/login/login_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class HomeView extends GetView {
  final LoginController _loginController = Get.find();

  @override
  Widget build(BuildContext context) {
    var name = Get.parameters['name'];
    var pwd = Get.parameters['pwd'];

    return Scaffold(
      appBar: AppBar(title: Text("Hello WOrld!")),
      body: Column(
        children: [
          Obx(() => Text("${controller.num}")),
          Text('接收用户参数:$name'),
          Text('接收密码参数:$pwd'),
          Text('通过控制器获取用户名:${_loginController.userName}'),
          Text('通过控制器获取密码:${_loginController.pwd}'),
          FlatButton(
            onPressed: () {
              controller.increment();
            },
            child: Text("add"),
          ),
          FlatButton(
            onPressed: () {
              controller.decrement();
            },
            child: Text("decrement"),
          ),
        ],
      ),
    );
  }
}

输入
在这里插入图片描述
接收
在这里插入图片描述

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《GetX- 简化flutter状态管理器》
文章链接:https://www.pmbear.com/archives/11471
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们