[官文翻译]Flutter状态管理库Riverpod - 所有的Provider - StateProvider

---

Riverpod的官方文档有多国语言，但是没有汉语，所以个人简单翻译了一版。

官网文档：Riverpod

GitHub：GitHub - rrousselGit/river_pod

Pub：riverpod | Dart Package (flutter-io.cn)

译时版本：riverpod 1.0.3

---

StateProvider

StateProvider 暴露了改变其状态的方式。 它是 StateNotifierProvider 的简化版， 设计用于很简单的使用场景下避免编写 StateNotifier 类。

StateProvider 的存在主要是允许通过 UI 对 简单 变量的更改。

StateProvider 的状态通常是：

• 枚举，例如过滤类型
• 字符串，通常是文件框（TextField之类）的原始内容
• 逻辑变量，用于复选框
• 数字，用于分页或表单中的年龄

下面的情况，不应该使用 StateProvider ：

• 状态需要验证逻辑
• 状态是复杂的对象（例如自定义类、列表/Map、等）
• 更改状态的逻辑比简单的 count++ 高级很多。

更多高级的场景，考虑使用 StateNotifierProvider 来代替，并创建 StateNotifier 类。 对于工程的长期维护性来说，当初始的样板文件会有些大时，自定义 StateNotifier 类很危险 - 因为它在单个地方集中了状态的业务逻辑。

用法示例：使用下拉框改变过滤类型

StateProvider 的一个真实使用场景会是管理如下拉框/文本框/复选框之类的简单窗体组件。 特别是，我们会看到如何使用 StateProvider 实现允许改变商品列表如何排序的下拉框。

为了简化处理，商品列表会在应用里直接构建如下：

class Product {
   
  Product({
   required this.name, required this.price});

  final String name;
  final double price;
}

final _products = [
  Product(name: 'iPhone', price: 999),
  Product(name: 'cookie', price: 2),
  Product(name: 'ps5', price: 500),
];

final productsProvider = Provider<List<Product>>((ref) {
   
  return _products;
}); 

在真实的应用中，该列表通常会使用 FutureProvider 通过网络请求获取。

然后 UI 会如下显示商品列表：

Widget build(BuildContext context, WidgetRef ref) {
   
  final products = ref.watch(productsProvider);
  return Scaffold(
    body: ListView.builder(
      itemCount: products.length,
      itemBuilder: (context, index) {
   
        final product = products[index];
        return ListTile(
          title: Text(product.name),
          subtitle: Text('${
   product.price} $'),
        );
      },
    ),
  );
} 

现在我们完成了基本的处理，然后可以添加下拉框，它可以允许按价格或按名称过滤商品。 为了实现这个，我们会使用 DropDownButton。

// 表现过滤类型的枚举
enum ProductSortType {
   
  name,
  price,
}

Widget build(BuildContext context, WidgetRef ref) {
   
  final products = ref.