在这里插入图片描述
在这里插入图片描述
作者：付文龙（红目香薰）
仓库地址：https://gitcode.com/feng8403000/FlutterfromBeginnertoAdvancedForHarmonyOS.git
联系邮箱：372699828@qq.com

一、Provider简介

Provider是Flutter生态系统中最流行的状态管理方案之一，由Remi Rousselet开发。它基于Flutter的InheritedWidget实现，但提供了更简洁、更强大的API，使得状态管理变得非常直观和高效。

1.1 为什么选择Provider

在Flutter开发中，状态管理是一个永恒的话题。从简单的setState到复杂的BLoC，开发者有很多选择。Provider之所以脱颖而出，主要有以下几个原因：

简单易用：Provider的API设计非常简洁，不需要复杂的配置和样板代码。开发者可以快速上手，将精力集中在业务逻辑上。

性能优秀：Provider支持细粒度更新，只重建需要更新的Widget，避免了不必要的性能开销。

类型安全：作为静态类型语言的方案，Provider在编译时进行类型检查，避免了运行时错误。

灵活组合：Provider支持MultiProvider，可以组合多个Provider，避免嵌套过深的问题。

依赖注入：Provider不仅可以用于状态管理，还可以作为依赖注入容器，管理服务类的生命周期。

1.2 Provider与其他状态管理方案对比

方案 复杂度 学习曲线 适用场景
setState 低 低 简单组件状态
Provider 中 低 中小项目状态管理
Riverpod 中 中 中大型项目
Bloc 高 高 复杂业务逻辑

从表格中可以看出，Provider在复杂度和学习曲线之间取得了很好的平衡，非常适合中小项目的状态管理需求。

二、核心概念

2.1 Provider

Provider是数据提供者，它将数据注入到Widget树中，使得子Widget可以访问这些数据。Provider本身是一个Widget，它继承自InheritedWidget，利用Flutter的Widget树机制来传递数据。

Provider<String>(
  create: (_) => 'Hello World',
  child: Consumer<String>(
    builder: (context, value, child) {
      return Text(value);
    },
  ),
)

2.2 Consumer

Consumer是数据消费者，它监听Provider中的数据变化，并在数据变化时重建自身。Consumer是连接Provider和Widget的桥梁，它使得Widget可以响应状态变化。

Consumer<CartProvider>(
  builder: (context, provider, child) {
    return Text("商品数量: ${provider.items.length}");
  },
)

2.3 ChangeNotifier

ChangeNotifier是Flutter SDK提供的一个简单的可监听对象，用于实现状态变化通知机制。当状态变化时，ChangeNotifier会调用notifyListeners()方法，通知所有监听者。

class CartProvider extends ChangeNotifier {
  List<CartItem> _items = [];

  List<CartItem> get items => _items;

  void addItem(CartItem item) {
    _items.add(item);
    notifyListeners();
  }
}

2.4 Selector

Selector是选择性监听器，它只在特定数据变化时重建Widget。与Consumer监听整个Provider不同，Selector允许开发者选择需要监听的数据，从而实现更细粒度的更新。

Selector<CartProvider, int>(
  selector: (context, provider) => provider.itemCount,
  builder: (context, count, child) {
    return Text("商品数量: $count");
  },
)

三、Provider的类型

Provider提供了多种类型，每种类型适用于不同的场景：

3.1 Provider

最基本的Provider，用于提供不可变数据。一旦创建，数据就不能更改。适用于提供配置信息、服务类等不需要变化的数据。

Provider<String>(
  create: (_) => 'Hello World',
  child: Consumer<String>(
    builder: (context, value, child) {
      return Text(value);
    },
  ),
)

3.2 ChangeNotifierProvider

最常用的Provider类型，用于提供可监听的数据。当数据变化时，会通知所有监听者。适用于管理应用状态、用户信息、购物车等需要频繁变化的数据。

ChangeNotifierProvider(
  create: (context) => CartProvider(),
  child: const MyApp(),
)

3.3 FutureProvider

用于处理异步数据，如网络请求、数据库查询等。它会自动监听Future的状态变化并更新UI。

FutureProvider<String>(
  create: (context) => fetchUserName(),
  initialData: '加载中...',
  child: Consumer<String>(
    builder: (context, name, child) {
      return Text(name);
    },
  ),
)

3.4 StreamProvider

用于处理流式数据，如WebSocket连接、实时更新等。它会持续监听Stream的事件并更新UI。

StreamProvider<int>(
  create: (context) => counterStream(),
  initialData: 0,
  child: Consumer<int>(
    builder: (context, count, child) {
      return Text("Count: $count");
    },
  ),
)

3.5 ListenableProvider

用于提供Listenable对象，这是ChangeNotifier的父类。适用于需要自定义监听机制的场景。

ListenableProvider(
  create: (context) => MyListenable(),
  child: const MyWidget(),
)

3.6 ValueListenableProvider

用于提供ValueListenable对象，适用于单一值的监听。

ValueListenableProvider<int>(
  create: (context) => ValueNotifier(0),
  child: Consumer<int>(
    builder: (context, value, child) {
      return Text("Value: $value");
    },
  ),
)

3.7 ProxyProvider

用于创建依赖其他Provider的状态。它会在依赖的Provider变化时自动更新。

ProxyProvider2<CartProvider, DiscountProvider, double>(
  update: (context, cart, discount, previous) {
    return cart.totalPrice * (1 - discount.rate);
  },
)

四、基本使用流程

4.1 添加依赖

首先，需要在pubspec.yaml中添加Provider依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

4.2 创建ChangeNotifier数据模型

创建一个继承自ChangeNotifier的类，用于管理状态：

class CartProvider extends ChangeNotifier {
  List<CartItem> _items = [];

  List<CartItem> get items => _items;
  int get itemCount => _items.length;

  void addItem(CartItem item) {
    _items.add(item);
    notifyListeners();
  }

  void removeItem(String id) {
    _items.removeWhere((item) => item.id == id);
    notifyListeners();
  }
}

class CartItem {
  final String id;
  final String name;
  final double price;
  int quantity;

  CartItem({
    required this.id,
    required this.name,
    required this.price,
    this.quantity = 1,
  });
}

4.3 在顶层注入Provider

在应用的顶层注入Provider，使得整个应用都可以访问这些数据：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CartProvider(),
      child: const MyApp(),
    ),
  );
}

4.4 在Widget中消费数据

使用Consumer在Widget中消费Provider的数据：

class CartPage extends StatelessWidget {
  const CartPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<CartProvider>(
      builder: (context, provider, child) {
        return ListView.builder(
          itemCount: provider.items.length,
          itemBuilder: (context, index) {
            final item = provider.items[index];
            return ListTile(
              title: Text(item.name),
              subtitle: Text("¥${item.price}"),
              trailing: Text("x${item.quantity}"),
            );
          },
        );
      },
    );
  }
}

五、关键要点

5.1 Provider基于InheritedWidget实现

Provider的核心机制是基于Flutter的InheritedWidget。当Provider中的数据变化时，会触发InheritedWidget的更新机制，通知所有依赖它的子Widget重建。

5.2 ChangeNotifier是核心数据模型类

ChangeNotifier是Provider状态管理的核心数据模型。它提供了notifyListeners()方法，用于通知所有监听者数据已变化。

5.3 notifyListeners()触发监听者重建

当调用notifyListeners()时，所有监听该ChangeNotifier的Consumer或Selector都会触发重建。这是状态更新的关键机制。

5.4 Consumer只重建自身，不影响父Widget

Consumer的一个重要特性是它只重建自身内部的Widget树，不会影响父Widget。这使得状态更新的范围非常精确。

5.5 支持多层Provider嵌套和组合

Provider支持多层嵌套和组合，可以在不同层级注入不同的Provider，实现状态的分层管理。

六、实际应用场景

6.1 购物车状态管理

购物车是一个典型的状态管理场景，需要管理商品列表、数量、价格等信息。

class CartProvider extends ChangeNotifier {
  List<CartItem> _items = [];
  double _discount = 0.0;

  List<CartItem> get items => _items;
  double get discount => _discount;

  int get totalQuantity {
    return _items.fold(0, (sum, item) => sum + item.quantity);
  }

  double get totalPrice {
    return _items.fold(0.0, (sum, item) => sum + item.price * item.quantity);
  }

  double get discountedPrice {
    return totalPrice * (1 - _discount);
  }

  void addItem(CartItem item) {
    final existingItem = _items.firstWhere(
      (i) => i.id == item.id,
      orElse: () => item,
    );

    if (existingItem == item) {
      _items.add(item);
    } else {
      existingItem.quantity += item.quantity;
    }
    notifyListeners();
  }

  void removeItem(String id) {
    _items.removeWhere((item) => item.id == id);
    notifyListeners();
  }

  void updateQuantity(String id, int quantity) {
    final index = _items.indexWhere((item) => item.id == id);
    if (index != -1) {
      if (quantity <= 0) {
        _items.removeAt(index);
      } else {
        _items[index].quantity = quantity;
      }
      notifyListeners();
    }
  }

  void setDiscount(double discount) {
    _discount = discount.clamp(0.0, 1.0);
    notifyListeners();
  }

  void clearCart() {
    _items.clear();
    _discount = 0.0;
    notifyListeners();
  }
}

6.2 用户状态管理

用户状态管理需要管理用户信息、登录状态、权限等。

class UserProvider extends ChangeNotifier {
  User? _user;
  bool _isLoggedIn = false;

  User? get user => _user;
  bool get isLoggedIn => _isLoggedIn;

  Future<void> login(String email, String password) async {
    // 模拟登录请求
    await Future.delayed(const Duration(seconds: 1));
    _user = User(id: '1', name: '张三', email: email);
    _isLoggedIn = true;
    notifyListeners();
  }

  void logout() {
    _user = null;
    _isLoggedIn = false;
    notifyListeners();
  }
}

class User {
  final String id;
  final String name;
  final String email;

  User({
    required this.id,
    required this.name,
    required this.email,
  });
}

6.3 主题状态管理

主题状态管理需要管理应用的主题模式、颜色等。

class ThemeProvider extends ChangeNotifier {
  bool _isDark = false;
  ThemeMode get themeMode => _isDark ? ThemeMode.dark : ThemeMode.light;

  void toggleTheme() {
    _isDark = !_isDark;
    notifyListeners();
  }

  ThemeData get themeData {
    return _isDark ? ThemeData.dark() : ThemeData.light();
  }
}

七、总结

Provider是一个强大而简洁的状态管理方案，它基于InheritedWidget实现，提供了多种Provider类型来满足不同的场景需求。通过ChangeNotifier、Consumer和Selector等核心组件，开发者可以实现高效的状态管理。

在实际应用中，建议根据项目规模和复杂度选择合适的状态管理方案：

  • 对于简单的组件状态，使用setState即可
  • 对于中小项目，Provider是一个很好的选择
  • 对于中大型项目，可以考虑Riverpod或Bloc

掌握Provider的核心概念和使用方法，是Flutter开发的必备技能之一。

# flutter # harmonyos # 华为 # 学习 # 鸿蒙
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

【OpenHarmony/HarmonyOs 】ArkTS 个性化身份系统：用工厂模式生成角色预置导航

avatar HarmonyOS开发者社区

鸿蒙报错速查：Cannot find name ‘image‘，忘 import 编译就炸，根因 + 真解法

报错原文报错触发场景你写鸿蒙 ArkTS 处理图片时，直接用 image.createImageSource / image.PixelMap / image.Size 不 import 就炸：根因鸿

avatar HarmonyOS开发者社区
cover

【OpenHarmony/HarmonyOs 】从零打造数字生活入口：LinkOS 链界项目架构全解析

avatar HarmonyOS开发者社区