Flutter 复选框未使用MobX更改其状态

我在颤振上使用MobX来控制状态。 单击floatingAction按钮生成一个包含

CheckboxListTile

的

列表视图。
但是，复选框不会更改其状态

你能帮我解决这个问题吗

下面是代码和图像：

主控器。飞镖

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;
}

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

导入“包装：颤振/材料.省道”；
导入“包：mobx/mobx.dart”；
进口“包装：颤振_模块化/颤振_模块化.省道”；
“主控器g.dart”部分；
@可注射（）
类HomeController=u HomeControllerBase和$HomeController；
带存储的抽象类\u HomeControllerBase{
@可观察
ObservableList mapValues=[].asobbservable（）；
@可观察
ListView listViewCheckbox；
@行动
作废列表视图复选框（值）{
用于（var i值）{
add（CheckBoxModel（key:i））；
}
}
}
类CheckBoxModel{
CheckBoxModel（{this.key，this.checked=false}）；
字符串键；
布尔检查；
}

主页.省道

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;
}

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

导入“包装：颤振/材料.省道”；
进口“包装：颤振_mobx/颤振_mobx.dart”；
进口“包装：颤振_模块化/颤振_模块化.省道”；
导入“home_controller.dart”；
类主页扩展了StatefulWidget{
最后的字符串标题；
const主页（{Key，this.title=“Home”}）：超级（Key:Key）；
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展了ModularState{
HomeController=HomeController（）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
主体：观察员（建造商：（）{
返回controller.mapValues==null？容器（）：ListView.builder(
itemCount:controller.mapValues.length，
itemBuilder:（\ux，int索引）{
返回CheckboxListTile(
标题：文本（controller.mapValues[index].key），
值：controller.mapValues[index]。已选中，
一旦更改：（布尔值）{
controller.mapValues[index].checked=value；
},
);
},
);
}),
浮动操作按钮：浮动操作按钮(
已按下：（）{
列表listValues=['foo'，'bar']；
controller.listViewChekbox（listValues）；
},
工具提示：“增量”，
子：图标（Icons.add），
),
);
}
}

根据该图，将创建
复选框ListTile
的
列表视图
，但复选框不会更改其状态

找到的解决方案是插入
setState

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

您不必使用
setState（）
或mobX为您做的任何其他操作，您只需编辑抽象类，告诉mobX主变量值已更改，如下一步所示

抽象类\u带存储的HomeControllerBase{
@可观察
ObservableList mapValues=[].asobbservable（）；
@可观察
ListView listViewCheckbox；
@行动
作废列表视图复选框（值）{
用于（var i值）{
add（CheckBoxModel（key:i））；
}
mapValues=mapValues；
}
}

这就是你解决问题的方法