与 mobx 一起颤动的可观察列表

Question

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

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

然后，我尝试更改其中一个元素，如下所示：

metrics[index] = data;

我收到错误：

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

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

谢谢！

Answer 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将触发构建器回调并更新列表视图。

Answer 2

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

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

以后就可以这样使用了。

values[index] = data;