观察者不更新列表 Flutter答案

【问题标题】：Observer not updating a list Flutter观察者不更新列表 Flutter
【发布时间】：2021-02-15 14:38:27
【问题描述】：

我是 Flutter 的新手，我被这个问题困住了。我使用 mobx 作为状态管理，但是虽然我使用的是 Observable 列表，但 Observer 小部件不会更改我在屏幕上的列表，我的小部件：

return Observer(
  builder: (_) {
    final listProducts = _mainStore.products;
    final listProductsAlter = _mainStore.products;
    return _mainStore.products != null
        ? Expanded(
            child: GridView.count(
              childAspectRatio: (itemWidth / itemHeight),
              shrinkWrap: true,
              crossAxisCount: 2,
              children: List.generate(_mainStore.products.length, (index) {
                // print(" view ${listProducts[index].price}");

                return Container(
                  padding: EdgeInsets.all(10.0),
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey, width: 0.7)),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image(
                        image:
                            NetworkImage(_mainStore.products[index].image),
                        height: 100.0,
                        width: 100.0,
                      ),
                      SizedBox(),
                      Text(_mainStore.products[index].title),
                      // Expanded(child: Text(listProducts[index].title)),
                      SizedBox(),
                      Text(
                        "R\$ ${listProducts[index].price.toString()}",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                );
              }),
            ),
          )

        
        : Text('dasdas');
  },
);

我的主商店：

  @observable
  ObservableList<Products> products;

  @observable
  var productsFilterCategory = ObservableList<Products>();

  @observable
  var orderedByPrice = ObservableList<Products>();

  @action
  listAllProducts() async {
    products =
        ObservableList<Products>.of(await _externalRepository.getProducts());
    print(" list all >>> ${products[0].price}");
  }

  @action
  orderByPrice(String c) {
    orderedByPrice = products;
    Comparator<Products> priceComparator = (a, b) => a.price.compareTo(b.price);
    products.sort(priceComparator);
  }
}

我在另一个小部件中调用 orderByPrice() 方法，但我知道列表正在更改，因为我打印了它。

提前致谢。

【问题讨论】：

标签： flutter flutter-dependencies mobx state-management observablelist

【解决方案1】：

我需要使用提供包来使用商店的单个实例。 https://pub.dev/packages/provider

【讨论】：