当我更改 ObservableList 中的属性时，如何让 mobx 更新？答案

【问题标题】：How do I get mobx to update when I change a property in an ObservableList?当我更改 ObservableList 中的属性时，如何让 mobx 更新？
【发布时间】：2020-07-08 00:18:55
【问题描述】：

我目前一直在为我的颤振应用程序使用 mobx，并且我正在尝试更新 ListTile 以更改其 onTap 的颜色。现在我有一个用@observable 标记的ObservableList，以及一个更改该列表中项目属性的@action。

class TestStore = TestStoreBase with _$TestStore;

abstract class TestStoreBase with Store {
  final DataService _dataService;

  TestStoreBase({
    @required DataService dataService,
  })  : assert(dataService != null),
        _dataService = dataService,
        players = ObservableList<Player>();

  @observable
  ObservableList<Player> players;

  @action
  Future<void> loadPlayers(User user) async {
    final userPlayers = await _dataService.getUserPlayers(user);
    players.addAll(userPlayers);
  }

  @action
  void selectPlayer(int index) {
    players[index].isSelected = !players[index].isSelected;
    );
  }
}

在我的 UI 中，我在列表构建器中有这个：

return Observer(builder: (_) {
    return Container(
        color: widget.testStore.players[index].isSelected != null &&
                widget.testStore.players[index].isSelected
                    ? Colors.pink
                    : Colors.transparent,
        child: ListTile(
               leading: Text(widget.testStore.players[index].id),
               onTap: () => widget.testStore.selectPlayer(index),
             ),
           );
        });

但是当我调用 widget.testStore.selectPlayer(index); 时它不会重绘；

我尝试的第二件事是在 isSelected 布尔值的“玩家”类中添加 @observable，但它似乎也不起作用。

@JsonSerializable()
class Player {
  final String id;
  final bool isUser;

  @observable
  bool isSelected;

  Player(this.id, this.isUser, this.isSelected);

  factory Player.fromJson(Map<String, dynamic> data) => _$PlayerFromJson(data);

  Map<String, dynamic> toJson() => _$PlayerToJson(this);
}

任何帮助将不胜感激，谢谢！

【问题讨论】：

标签： flutter dart mobx

【解决方案1】：

您正在尝试对isSelected 属性执行操作，因此基本上您必须将Player 类定义为MobX 存储，并创建一个在修改isSelected 时触发reportWrite() 的mixin。

在players属性中添加@observable注解仅意味着观看该属性本身，而输入players作为ObservableList意味着观看该属性的列表元素，即观看玩家[0 ]、玩家[1]...等等。

例如

@JsonSerializable()
class Player = _Player with _$Player;

abstract class _Player with Store {
  final String id;
  final bool isUser;

  @observable
  bool isSelected;

  _Player(this.id, this.isUser, this.isSelected);

  factory _Player.fromJson(Map<String, dynamic> data) => _$PlayerFromJson(data);

  Map<String, dynamic> toJson() => _$PlayerToJson(this);
}

这是来自 MobX 的 GitHub 存储库的类似问题：https://github.com/mobxjs/mobx.dart/issues/129

【讨论】：