getx控制器的使用

控制器使用步骤

1：建立模型–
1.1模型是obs类型--1.2模型是构建函数类型

2：创建控制器-自定义控制器

3：组件中–有实例化控制器–的调用方式

4：组件中–无实例化控制器–通过查找控制器的调用方式

在这里插入图片描述

图1，控制器的缩略对比代码

在这里插入图片描述

图2，控制器的对比代码

在这里插入图片描述

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

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

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


// 第1步：类模型  rx 变量 obs类型
class Tea1 {
  var name = "ai".obs;
  var age = 18.obs;
}


// 第2步：控制器创建
class MyC1 extends GetxController {
  var tea1 = Tea1(); //实例化
  void func1() {tea1.name.value = tea1.name.value.toUpperCase();}
  void funcf() {tea1.name.value = tea1.name.value.toLowerCase();}
}


//第3步控制器使用位置

class Zujian extends StatelessWidget {
  // 组件中实例化控制器
  MyC1 myC1 = Get.put(MyC1());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetXController"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Obx(() => Text("例1myC1中的name= ${myC1.tea1.name}",)),
            //按钮 调用方法
            ElevatedButton(onPressed: () {myC1.func1();},
                           child: Text("转换为大写"),
                          ),
              
            //不需在组件中实例化,就可以调用控制器
            ElevatedButton(onPressed: () {Get.find<MyC1>().funcf();},
                           child: Text("转换为小写"),
                          ),
          ],
        ),
      ),
    );
  }
}

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

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

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


// 第1步：类模型
// rx 变量 obs类型
class Tea1 {
  var name = "ai".obs;
  var age = 18.obs;
}


// 第2步：控制器创建
class MyC1 extends GetxController {
  var tea1 = Tea1(); //实例化
  void func1() {tea1.name.value = tea1.name.value.toUpperCase();}
  void funcf() {tea1.name.value = tea1.name.value.toLowerCase();}
}


//第3步控制器使用位置

class Zujian extends StatelessWidget {
  // 组件中实例化控制器
  MyC1 myC1 = Get.put(MyC1());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetXController"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GetX<MyC1>(
              init: MyC1(),
              builder: (controller) {
                      return Text("例2myC1中的name=${controller.tea1.name}",);
                                   },
             ),
            //按钮 调用方法
            ElevatedButton(onPressed: () {myC1.func1();},
                           child: Text("转换为大写"),
                          ),
            //不需在组件中实例化,就可以调用控制器
            ElevatedButton(onPressed: () {Get.find<MyC1>().funcf();},
                           child: Text("转换为小写"),
                          ),
          ],
        ),
      ),
    );
  }
}

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

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

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


// 第1步：类模型  rx 变量 obs类型
class Tea1 {
  var name = "ai".obs;
  var age = 18.obs;
}


// 第2步：控制器创建
class MyC2 extends GetxController {
  var tea1 = Tea1();
  void func2() {tea1.name.value = tea1.name.value.toUpperCase();update();}
  void funcf() {tea1.name.value = tea1.name.value.toLowerCase();update();}
}

//第3步控制器使用位置

class Zujian extends StatelessWidget {
  // 组件中实例化控制器
  MyC2 myC2 = Get.put(MyC2());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetXController"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GetBuilder<MyC2>(
              init: myC2,
              builder: (controller) {
                return Text("例3myC2中的name= ${controller.tea1.name}",);
              },
            ),
            //按钮 调用方法
            ElevatedButton(
                            onPressed: () {myC2.func2();},
                            child: Text("转换为大写")
                          ),
            //不需在组件中实例化,就可以调用控制器
            ElevatedButton(onPressed: () {Get.find<MyC2>().funcf();},
                           child: Text("转换为小写"),
                          ),
          ],
        ),
      ),
    );
  }
}

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

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

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

// 第1步：类模型---构造函数创建
class Tea2 {
  var name;
  var age;
  Tea2({this.name, this.age});
}

// 第2步：控制器创建
class MyC3 extends GetxController {
  var tea2 = Tea2(name: "ai", age: 18).obs; //实例化成为obs
  void func3() {
    tea2.update((val) {tea2.value.name = tea2.value.name.toString().toUpperCase();});
  } //更新，执行转换
  void funcf() {
    tea2.update((val) {tea2.value.name = tea2.value.name.toString().toLowerCase();});
  } //更新，执行转换
}

//第3步控制器使用位置
class Zujian extends StatelessWidget {
  // 组件中实例化控制器
  MyC3 myC3 = Get.put(MyC3());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetXController"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GetX<MyC3>(
              init: MyC3(),
              builder: (controller) {
                return Text("例4myC3中的name ${controller.tea2.value.name}",);
              },
            ),
            //按钮 调用方法
            ElevatedButton(
                onPressed: () {myC3.func3();},
                child: Text("转换为大写"),
                ),
            //不需在组件中实例化,就可以调用控制器
            ElevatedButton(onPressed: () {Get.find<MyC3>().funcf();},
                           child: Text("转换为小写"),
                          ),
          ],
        ),
      ),
    );
  }
}

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

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

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

// 第1步：类模型---构造函数创建
class Tea2 {
  var name;
  var age;
  Tea2({this.name, this.age});
}

// 第2步：控制器创建
class MyC3 extends GetxController {
  var tea2 = Tea2(name: "ai", age: 18).obs; //实例化成为obs
  void func3() {
    tea2.update((val) {tea2.value.name = tea2.value.name.toString().toUpperCase();});
  } //更新，执行转换
  void funcf() {
    tea2.update((val) {tea2.value.name = tea2.value.name.toString().toLowerCase();});
  } //更新，执行转换
}

//第3步控制器使用位置
class Zujian extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetXController"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GetX<MyC3>(
              init: MyC3(),
              builder: (controller) {
                return Text("例5myC3中的name ${controller.tea2.value.name}",);
              },
            ),
            //按钮--通过查找控制器方式来更新===不需要实例化控制器
            ElevatedButton(
                onPressed: () {Get.find<MyC3>().func3();},
                child: Text("转换为大写"),
                ),
            //不需在组件中实例化,就可以调用控制器
            ElevatedButton(onPressed: () {Get.find<MyC3>().funcf();},
                           child: Text("转换为小写"),
                          ),
          ],
        ),
      ),
    );
  }
}

原文链接：https://blog.csdn.net/weixin_47021806/article/details/126290097

你可能也喜欢