flutter - 带有 GetX 标签的多个实例在 flutter 中不起作用

Question

我一直在致力于一个多实例项目。所以我尝试在计数器应用程序中执行此操作。 但只有第一个实例正在更新。下面是我的所有代码。

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  InstanceModel selected = InstanceModel.instances.first;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: SizedBox(
              height: 50,
              child: Row(
                children: [
                  const SizedBox(
                    width: 50,
                  ),
                  Expanded(child: Container()),
                  Expanded(
                    flex: 3,
                    child: ListView.separated(
                        itemCount: InstanceModel.instances.length,
                        scrollDirection: Axis.horizontal,
                        separatorBuilder: (c, i) => const SizedBox(
                              width: 50,
                            ),
                        itemBuilder: (context, i) {
                          final InstanceModel instance =
                              InstanceModel.instances[i];
                          final isSelected = selected == instance;
                          return SizedBox(
                            width: 80,
                            child: ElevatedButton(
                              onPressed: () {
                                selected = instance;
                                setState(() {});
                              },
                              style: ElevatedButton.styleFrom(
                                backgroundColor:
                                    isSelected ? Colors.green : Colors.black,
                              ),
                              child: Text(instance.name),
                            ),
                          );
                        }),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          const Text(
            'You have pushed the button this many times:',
          ),
          GetBuilder<InstanceController>(
              tag: selected.name,
              builder: (_) {
                return Text(
                  '${selected.controller.count}',
                  style: Theme.of(context).textTheme.headline4,
                );
              }),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          selected.controller.increment();
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

模型类

import 'package:get/get.dart';
import 'package:train/instance_controller.dart';

class InstanceModel {
  final InstanceController controller;
  final String name;

  InstanceModel({
    required this.controller,
    required this.name,
  });

  static List<InstanceModel> instances = [
    InstanceModel(
        name: "1",
        controller:
            Get.put<InstanceController>(InstanceController(), tag: "1")),
    InstanceModel(
        name: "2",
        controller:
            Get.put<InstanceController>(InstanceController(), tag: "2")),
  ];
}

和 Controller 类

import 'package:get/get.dart';

class InstanceController extends GetxController {
  var count = 0.obs;

  void increment() {
    count++;
    update();
  }
}

只有调用 setstate 才会更新第二个实例。我不明白我错在哪里。 任何帮助将不胜感激 - - - - - - - - - - - - - - - - - - - - - - - -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ----------------------------------------------------------------------------------

Answer 1

一开始我真的很困惑，这可能是一些错误，因为逻辑上你的代码是正确的，然后我注意到这是关于 Flutter 小部件在新状态下相互替换而不是完全删除该小部件然后在小部件中再次添加它树。

在更新状态( setState(() {}) )时，flutter 首先搜索具有相同类型的小部件以相互替换，在这种情况下，当您期望 GetBuilder 应该触发每个单独的唯一 Controller 的状态，flutter 只需更新一个 Controller 并保存其状态即可。

要解决这个问题，您只需向 GetBuilder 添加一个 Key 来告诉 flutter 每个都是唯一的，如下所示:

  GetBuilder<InstanceController>(
          key: UniqueKey(), // add this
          tag: selected.name,
          builder: (_) {
            return Text(
              '${selected.controller.count}',
              style: Theme.of(context).textTheme.headline4,
            );
          }),