如何在 Flutter 中使用多个 getx 控制器？答案

【问题标题】：How to use multiple getx controllers in Flutter?如何在 Flutter 中使用多个 getx 控制器？
【发布时间】：2021-10-09 14:16:24
【问题描述】：

我想知道如何在颤振中使用多个 getx 控制器。
即使数据更新，也不是实时反映的。
而 Getbuilder 只能使用一个控制器。
你能给我一个代码示例吗？

代码示例

class Controller1 extends GetxController {
  int counter = 0;

  void addCounter() {
    counter++;
    update();
  }
}

class Controller2 extends GetxController {
  int counter = 0;

  void addCounter() {
    counter++;
    update();
  }
}

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    Controller1 controller1 = Get.find();
    Controller2 controller2 = Get.find();

    return Text(
      '${controller1.counter} / ${controller2.counter}'
    );
  }
}

class CounterButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    Controller1 controller1 = Get.find();
    Controller2 controller2 = Get.find();

    return Column(
      children: [
        GestureDetector(
          onTap: () => controller1.addCounter(),
          child: ...
        );
        GestureDetector(
          onTap: () => controller2.addCounter(),
          child: ...
        );
      ]
    );
  }
}

【问题讨论】：

标签： flutter controller flutter-getx

【解决方案1】：

请记住，如果您使用 GetBuilder()，则必须在执行某些操作后手动更新控制器状态。
在函数的 build 方法中初始化控制器不是一个好主意。你应该把它们放在它们只被初始化一次的地方（在构建方法之外）
如果您在一个小部件中使用多个控制器，则应考虑使用 Obx(() {return Widget}) 方法。

阅读有关使用 getx here 进行状态管理的更多信息

【讨论】：

【解决方案2】：

我有替代解决方案。

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

class Controller1 extends GetxController {
  int counter = 0;

  void addCounter() {
    counter++;
    update();
  }
}

class Controller2 extends GetxController {
  int counter = 0;

  void addCounter() {
    counter++;
    update();
  }
}

class CounterView extends GetView {
  const CounterView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Get.put(Controller1());
    Get.put(Controller2());
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            GetBuilder<Controller1>(
              builder: (controller1) => GestureDetector(
                onTap: () => controller1.addCounter(),
                child: const Text(
                    //controller1.counter.toString(),
                    "Controller-1"),
              ),
            ),
            GetBuilder<Controller2>(
              builder: (controller2) => GestureDetector(
                onTap: () => controller2.addCounter(),
                child: const Text(
                    //controller2.counter.toString(),
                    "Controller-2"),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            GetBuilder<Controller1>(
              builder: (controller1) => GetBuilder<Controller2>(
                builder: (controller2) => Column(
                  children: [
                    Text(
                      "Controller-1 = " + controller1.counter.toString(),
                    ),
                    Text(
                      "Controller-2 = " + controller2.counter.toString(),
                    ),
                    Text(
                      "C1 / C2 = " +
                          (controller1.counter / controller2.counter)
                              .toString(),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：