如何在Flutter中使用多个getx控制器?

Question

我想知道如何在扑动中使用多个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: ...
);
]
);
}
}

Answer 1

我有另一个解决方案。

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(),
),
],
),
),
),
],
),
),
);
}
}

更新:-使用Obx@StatelessWidget

import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(
GetMaterialApp(
home: MyWidget(),
),
);
}
class Controller1 extends GetxController {
final counter = 0.obs;
void addCounter() {
counter.value++;
}
}
class Controller2 extends GetxController {
final counter = 0.obs;
void addCounter() {
counter.value++;
}
}
class MyWidget extends StatelessWidget {
MyWidget({super.key});
final controller1 = Get.put(Controller1());
final controller2 = Get.put(Controller2());
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Obx(() => (
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
GestureDetector(
onTap: () => controller1.addCounter(),
child: const Text(
//controller1.counter.toString(),
"Controller-1"),
),
const Divider(),
GestureDetector(
onTap: () => controller2.addCounter(),
child: const Text(
//controller1.counter.toString(),
"Controller-2"),
),
const Divider(),
Text(
"Controller-1 = ${controller1.counter.value}",
),
Text(
"Controller-2 = ${controller2.counter.value}",
),
Text(
"C1 / C2 = ${controller1.counter.value / controller2.counter.value}",
),
],
),
)
)),
);
}
}

Answer 2

1. 请记住，如果您使用GetBuilder()，则必须在执行某些操作后手动更新控制器状态。

2. 在函数的构建方法中初始化控制器不是一个好主意。你应该把它们放在只初始化一次的地方(在构建方法之外)

3. 如果你在一个小部件中使用了多个控制器，你应该考虑使用Obx(() {return widget})方法。

在这里阅读更多关于getx的状态管理