复选框不会在 MobX 中改变它们的状态

如何解决复选框不会在 MobX 中改变它们的状态

我在 Flutter 上使用 MobX 来控制状态。单击 FloatingActionButton 会生成一个包含 ListView 的 CheckBoxListTile。但是复选框并没有改变它们的状态

你能帮我解决这个问题吗？

home_controller.dart

import 'package:Flutter/material.dart';
import 'package:mobx/mobx.dart';
import 'package:Flutter_modular/Flutter_modular.dart';

part 'home_controller.g.dart';

@Injectable()
class HomeController = _HomeControllerBase with _$HomeController;

abstract class _HomeControllerBase with Store {
  @observable
  ObservableList<CheckBoxModel> mapValues = <CheckBoxModel>[].asObservable();

  @observable
  ListView listViewCheckBox;

  @action
  void listViewChekBox(value) {
    for (var i in value) {
      mapValues.add(CheckBoxModel(key: i));
    }
  }
}

class CheckBoxModel{
  
  CheckBoxModel({this.key,this.checked = false});
  
  String key;
  bool checked;
}

home_page.dart

import 'package:Flutter/material.dart';
import 'package:Flutter_mobx/Flutter_mobx.dart';
import 'package:Flutter_modular/Flutter_modular.dart';
import 'home_controller.dart';

class HomePage extends StatefulWidget {
  final String title;
  const HomePage({Key key,this.title = "Home"}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends Modularstate<HomePage,HomeController> {
  HomeController controller = HomeController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),),body: Observer(builder: (_) {
        return controller.mapValues == null ? Container() : ListView.builder(
          itemCount: controller.mapValues.length,itemBuilder: (_,int index){
            return CheckBoxListTile(
              title: Text(controller.mapValues[index].key),value: controller.mapValues[index].checked,onChanged: (bool value) {
                controller.mapValues[index].checked = value;
              },);
          },);
      }),floatingActionButton: FloatingActionButton(
        onpressed: () {
          List listValues = ['foo','bar'];
          controller.listViewChekBox(listValues);
        },tooltip: 'Increment',child: Icon(Icons.add),);
  }
}

根据图片，ListView 的 CheckBoxListTile 已创建，但复选框未更改其状态。

解决方法

您不必使用 setState() 或 mobX 为您做的任何其他事情，您只需要编辑您的抽象类以告诉 mobX 主变量值已更改，如下所示

abstract class _HomeControllerBase with Store {
  @observable
  ObservableList<CheckBoxModel> mapValues = <CheckBoxModel>[].asObservable();

  @observable
  ListView listViewCheckbox;

  @action
  void listViewChekbox(value) {
    for (var i in value) {
      mapValues.add(CheckBoxModel(key: i));
    }
    mapValues = mapValues;
  }
}

这就是你可以解决的方法。

找到的解决方案是插入 setState

onChanged: (bool value) {
    setState(() {
        controller.mapValues[index].checked = value;
    });
},