使用Mbox时observable列表更新后页面无刷新问题咨询

核心原因1：控制器实例化位置错误 #

你将ControllerResearch的实例化逻辑放在了build方法内部，Flutter的build方法会在每次页面需要重绘时反复执行，每次执行都会生成一个全新的控制器实例：

• 你点击按钮修改的是当前build生成的实例的informationLC值
• 状态更新触发页面重绘后，旧的控制器实例直接被丢弃，新生成的控制器的informationLC默认是空数组，所以Observer始终显示空值

解决方法：把页面改为StatefulWidget，将控制器作为State的属性，仅在initState生命周期中初始化一次，不要在build内初始化控制器。修正后的页面代码示例：

// 首先将页面改为StatefulWidget
class ResearchPage extends StatefulWidget {
  final Pesquisa finalResearch;
  const ResearchPage({super.key, required this.finalResearch});

  @override
  State<ResearchPage> createState() => _ResearchPageState();
}

class _ResearchPageState extends State<ResearchPage> {
  // 控制器、通用组件作为State属性，仅初始化1次
  late final ControllerResearch controller;
  late final UtilsWidgetsComponents _components;

  @override
  void initState() {
    super.initState();
    controller = ControllerResearch();
    _components = UtilsWidgetsComponents();
    controller.finalResearch = widget.finalResearch;
    // 可选：初始化时加载默认展示的数据
    controller.changeLojaOrConcorrete(op: 0);
  }

  @override
  Widget build(BuildContext context) {
    // build内不再初始化控制器
    return Scaffold(
      appBar: AppBar(
        flexibleSpace: _components.colorAppBar(),
        title: const Center(child: Text('Detalhes')),
      ),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ElevatedButton(
                    onPressed: () {
                      controller.changeLojaOrConcorrete(op: 0);
                    },
                    child: const Text("Lojas")),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ElevatedButton(
                    onPressed: () {
                      controller.changeLojaOrConcorrete(op: 1);
                    },
                    child: const Text("Concorrentes")),
              ),
            ],
          ),
          Observer(builder: (_) => Text("${controller.informationLC}"))
        ],
      ),
    );
  }
}

可能的次要原因：List类型observable的监听触发规则 #

Mobx默认的@observable监听的是变量的引用变更，你当前调用List的clear()、add()方法属于修改集合内部元素，没有改变List本身的内存地址，部分场景下可能不会触发更新通知。
解决方法二选一：

• 将List声明为Mobx提供的可观察集合类型：

  @observable
  ObservableList<String> informationLC = ObservableList();
  

• 修改action逻辑，每次生成新的List实例后直接赋值给informationLC，而非修改原有数组的元素。

内容的提问来源于stack exchange，提问作者Marcos Gianetti