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

Question

我目前一直在为我的 flutter 应用程序使用 mobx，并且我正在尝试更新 ListTile 以更改其点击时的颜色。现在我有一个标有@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;
    );
  }
}

在我的用户界面中，我在列表构建器中有这个：

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 bool 的“Players”类中添加 @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);
}

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

Answer 1

您正在尝试对

isSelected

属性执行操作，因此基本上您还必须将

Player

类定义为 MobX 存储，并创建一个在修改

reportWrite()

时触发

isSelected

的 mixin。

在

@observable

属性上添加

players

注释仅意味着在属性本身上观看，而输入

players

作为

ObservableList

则意味着在属性的列表元素上观看，即在players[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

Answer 2

可以分享一下数据服务文件吗？它会帮助我