如何在 Flutter 中使用 MobX 从网络获取数据并创建一个华丽的图表

Flutter 入门与实战（六十八）：MobX 获取网络数据并创建酷炫图表

引言

在 Flutter 中，MobX 是一个状态管理工具，它提供了创建可观察状态的简单方法。可观察状态意味着每次状态发生更改时都会通知其监听器。这使开发人员可以轻松地更新 UI 以反映状态的变化。

在本文中，我们将学习如何使用 MobX 从网络获取数据并将其渲染成酷炫的图表。我们将使用 MobX 的 @observable 和 @action 装饰器来创建可观察的状态，并使用 MobX 的 StreamBuilder 小部件来监听状态的变化并更新 UI。

创建 MobX 存储

首先，我们需要创建一个 MobX 存储来存储我们的状态。MobX 存储是一个类，它包含我们应用程序的状态和业务逻辑。

import 'package:mobx/mobx.dart';

part 'network_data_store.g.dart';

class NetworkDataStore = _NetworkDataStore with _$NetworkDataStore;

abstract class _NetworkDataStore with Store {
  @observable
  ObservableList<double> data = ObservableList<double>();

  @action
  Future<void> fetchData() async {
    // 此处为模拟从网络获取数据
    await Future.delayed(const Duration(seconds: 2));
    data = ObservableList<double>.of([1.0, 2.0, 3.0, 4.0, 5.0]);
  }
}

在上面的代码中，我们创建了一个名为 NetworkDataStore 的 MobX 存储。此存储包含一个 data 字段，它是一个可观察的双精度列表。我们还创建了一个名为 fetchData() 的动作，它将从网络获取数据并将其存储在 data 字段中。

使用 MobX 获取网络数据

现在，我们需要使用 MobX 从网络获取数据。我们可以使用 fetchData() 动作来做到这一点。

final networkDataStore = NetworkDataStore();

networkDataStore.fetchData();

在上面的代码中，我们首先创建了一个 networkDataStore 实例。然后，我们调用 fetchData() 动作来从网络获取数据。

使用 MobX 渲染图表

现在，我们需要使用 MobX 将数据渲染成图表。我们可以使用 StreamBuilder 小部件来做到这一点。

StreamBuilder<ObservableList<double>>(
  stream: networkDataStore.data,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Chart(data: snapshot.data!);
    } else {
      return const Center(child: CircularProgressIndicator());
    }
  },
)

在上面的代码中，我们首先创建了一个 StreamBuilder 小部件。然后，我们指定我们要监听 networkDataStore.data 流。当 data 字段发生更改时，StreamBuilder 小部件将调用 builder 函数。

在 builder 函数中，我们首先检查 snapshot 是否有数据。如果有数据，我们返回一个 Chart 小部件。此小部件将使用 snapshot.data! 中的数据来绘制图表。如果没有数据，我们返回一个 Center 小部件，其中包含一个 CircularProgressIndicator。

总结

在本文中，我们学习了如何使用 MobX 从网络获取数据并将其渲染成酷炫的图表。我们使用 MobX 的 @observable 和 @action 装饰器来创建可观察的状态，并使用 MobX 的 StreamBuilder 小部件来监听状态的变化并更新 UI。