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 remoteItem(float data) => metrics.remove(data);

在您的UI层中

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

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