Flutter GetX基础教程（七）： GetxControl

GetxController介绍
在实际的项目开发过程中，我们不可能把UI代码、业务逻辑都放在一起处理，这样对项目的架构、代码的可读性、后期的维护将会是致命的，好在GetX为我们提供了GetxController,GetxController主要的作用是用于UI代码与业务逻辑分离开来。

GetxController三种使用方式

这里主要讲解使用GetxController动态获取数据的三种方式以及更新数据的方式。

第一步：应用程序入口设置

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXControllerExample/GetXControllerExample.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "GetX",
      home: GetXControllerExample(),
    );
  }
}

第二步：定义控制器继承自GetxController

import 'package:flutter_getx_example/ObxCustomClassExample/Teacher.dart';
import 'package:get/get.dart';

class MyController extends GetxController {

  // 第一种
  // var teacher = Teacher();
  //
  // void convertToUpperCase() {
  //   teacher.name.value = teacher.name.value.toUpperCase();
  // }

  // 第二种
  // var teacher =  Teacher(name: "Jimi", age: 18).obs;
  // void convertToUpperCase() {
  //   teacher.update((val) {
  //     teacher.value.name = teacher.value.name.toString().toUpperCase();
  //   });
  // }

  // 第三种
  var teacher = Teacher();

  void convertToUpperCase() {
    teacher.name.value = teacher.name.value.toUpperCase();
    update();
  }
}

第三步：实例化控制器并使用

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/GetXControllerExample/MyController.dart';
import 'package:get/get.dart';

class GetXControllerExample extends StatelessWidget {

 // 第一种
 MyController myController = Get.put(MyController());

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text("GetX Obx---GetXController"),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           // 第一种
           // Obx(() => Text(
           //   "我的名字是 ${myController.teacher.name}",
           //   style: TextStyle(color: Colors.red, fontSize: 30),
           // )),
           // 第二种
           // GetX<MyController>(
           //   init: MyController(),
           //   builder: (controller) {
           //     return Text(
           //       "我的名字是 ${controller.teacher.name}",
           //       style: TextStyle(color: Colors.green, fontSize: 30),
           //     );
           //   },
           // ),
           // 第三种
           GetBuilder<MyController>(
             init: myController,
             builder: (controller) {
               return Text(
                 "我的名字是 ${controller.teacher.name}",
                 style: TextStyle(color: Colors.green, fontSize: 30),
               );
             },
           ),
           SizedBox(height: 20,),
           ElevatedButton(
             onPressed: () {
               // 第一种
               myController.convertToUpperCase();

               // 第二种
               // Get.find<MyController>().convertToUpperCase();

             },
             child: Text("转换为大写"))
         ],
       ),
     ),
   );
 }
}

效果展示