用mobx颤抖的可观察列表

Question

我正在尝试创建一个可观察的列表（即，当更改，删除或添加列表的元素时，我希望UI得以更新）。我知道mobx有一个称为“ observableList”的东西，因此这似乎应该可行。但是，我在执行它时遇到了问题。目前，我的mobx存储文件中包含以下代码：

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

然后，我尝试更改以下元素之一：

metrics[index] = data;

我得到了错误：

未为类“可观察>”定义方法“ [] =”。

有没有一种方法可以创建一个可观察的列表（或者更好的是，可观察的字典），或者还没有实现？

谢谢！

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;