【问题标题】：Observable Lists in flutter with mobx与 mobx 一起颤动的可观察列表
【发布时间】：2020-01-16 09:39:36
【问题描述】：

我正在尝试创建一个可观察的列表（即，当列表中的元素发生更改、删除或添加时，我希望更新 UI）。我知道 mobx 有一个叫做“observableList”的东西，所以这似乎应该是可能的。但是，我在实施它时遇到了问题。我目前在我的 mobx 商店文件中有以下代码：

var metrics = Observable([.5,.5,.5]);

然后，我尝试像这样更改其中一个元素：

metrics[index] = data;

我得到错误：

没有为类“Observable>”定义方法“[]=”。

有没有办法在颤振中创建一个可观察的列表（或者更好的是，一个可观察的字典），或者还没有实现？

谢谢！

【问题讨论】：

标签： flutter dart mobx

【解决方案1】：

使用 MobX，您需要创建带有 @action 注释的方法，以便在 Observable 发生更改时收到通知。

在您的商店中，您必须有类似的东西

@observable
var metrics = ObservableList<int>([.5,.5,.5]);

// This is action method. You need to use this method to react
// your UI properly when something changes in your observable list.
@action
void addItem(float data) => metrics.add(data);

// the same for this method but with a different operation.
@action
void removeItem(float data) => metrics.remove(data);

#在你的 UI 层

Observer(
 builder: (context) =>
   ListView.builder(
     itemCount: yourStore.metrics.length,
     builder: (_, index) => Text('${yourStore.metrics[index]}'),
  ),
);

在这种情况下，yourStore.metrics 可观察列表发生一些更改后，Observer 构建器回调将被触发，列表视图将被更新。

【讨论】：

这是真的吗？在文档中，他们演示了 Observables 触发 Reactions 而无需将它们包装在 Actions 中。我认为动作只是为了使多个更改原子化，即触发单个反应......？ pub.dev/packages/mobx

【解决方案2】：

您可以使用我的代码。您需要添加“.of”来初始化列表

ObservableList<int> values = ObservableList<int>.of([1,2,3]);

以后你可以这样使用它。

values[index] = data;

【讨论】：