当前位置：首页 > news >正文

Flutter Provider：简单而强大的状态管理

news 2026/6/23 11:59:54

Flutter Provider：简单而强大的状态管理

告别 setState 的混乱，拥抱 Provider 的简洁优雅。

一、Provider 的核心价值

作为一名追求代码如散文般优雅的 UI 匠人，我对状态管理工具有着严格的要求。Provider 不仅解决了 Flutter 中的状态共享问题，还带来了简洁的语法、高效的性能和易于测试的架构。它就像是 Flutter 状态管理的"瑞士军刀"——简单却强大。

二、基础用法

1. 安装 Provider

flutter pub add provider

2. 基本结构

import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; // 1. 创建数据模型 class CounterModel extends ChangeNotifier { int _count = 0; int get count => _count; void increment() { _count++; notifyListeners(); } void decrement() { _count--; notifyListeners(); } } // 2. 包装应用 void main() { runApp( ChangeNotifierProvider( create: (context) => CounterModel(), child: MyApp(), ), ); } // 3. 使用数据 class CounterWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Consumer<CounterModel>( builder: (context, counter, child) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Count: ${counter.count}'), SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: counter.decrement, child: Text('-'), ), SizedBox(width: 20), ElevatedButton( onPressed: counter.increment, child: Text('+'), ), ], ), ], ); }, ); } }

三、高级用法

1. 多 Provider 管理

void main() { runApp( MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => CounterModel()), ChangeNotifierProvider(create: (context) => UserModel()), ChangeNotifierProvider(create: (context) => ThemeModel()), ], child: MyApp(), ), ); } // 使用多个 Provider class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home'), backgroundColor: context.watch<ThemeModel>().primaryColor, ), body: Column( children: [ Text('Welcome, ${context.watch<UserModel>().name}'), Text('Count: ${context.watch<CounterModel>().count}'), ], ), ); } }

2. 嵌套 Provider

class UserModel extends ChangeNotifier { String _name = 'Leopold'; String get name => _name; void updateName(String newName) { _name = newName; notifyListeners(); } } class UserProfile extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider( create: (context) => UserModel(), child: UserProfileContent(), ); } } class UserProfileContent extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ Text('Name: ${context.watch<UserModel>().name}'), TextField( onChanged: (value) { context.read<UserModel>().updateName(value); }, ), ], ); } }

3. 选择器优化

class ExpensiveWidget extends StatelessWidget { @override Widget build(BuildContext context) { // 只监听 count 变化，避免其他属性变化导致重绘 final count = context.select<CounterModel, int>((counter) => counter.count); return Text('Count: $count'); } } // 或者使用 Selector 组件 class OptimizedWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Selector<CounterModel, int>( selector: (context, counter) => counter.count, builder: (context, count, child) { return Text('Count: $count'); }, ); } }

四、实战案例：购物车

class CartModel extends ChangeNotifier { final List<CartItem> _items = []; List<CartItem> get items => _items; int get itemCount => _items.length; double get totalPrice { return _items.fold(0, (sum, item) => sum + item.price * item.quantity); } void addItem(CartItem item) { final existingItem = _items.firstWhere( (i) => i.id == item.id, orElse: () => CartItem(id: '', name: '', price: 0, quantity: 0), ); if (existingItem.id.isNotEmpty) { existingItem.quantity++; } else { _items.add(item); } notifyListeners(); } void removeItem(String id) { _items.removeWhere((item) => item.id == id); notifyListeners(); } void updateQuantity(String id, int quantity) { final item = _items.firstWhere((i) => i.id == id); item.quantity = quantity; notifyListeners(); } } class CartItem { final String id; final String name; final double price; int quantity; CartItem({ required this.id, required this.name, required this.price, required this.quantity, }); } // 使用 class CartScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('购物车')), body: Consumer<CartModel>( builder: (context, cart, child) { if (cart.itemCount == 0) { return Center(child: Text('购物车为空')); } return ListView.builder( itemCount: cart.itemCount, itemBuilder: (context, index) { final item = cart.items[index]; return ListTile( title: Text(item.name), subtitle: Text('¥${item.price}'), trailing: Row( mainAxisSize: MainAxisSize.min, children: [ IconButton( onPressed: () => cart.updateQuantity(item.id, item.quantity - 1), icon: Icon(Icons.remove), ), Text('${item.quantity}'), IconButton( onPressed: () => cart.updateQuantity(item.id, item.quantity + 1), icon: Icon(Icons.add), ), ], ), ); }, ); }, ), bottomNavigationBar: Consumer<CartModel>( builder: (context, cart, child) { return Container( padding: EdgeInsets.all(16), child: Text( '总计: ¥${cart.totalPrice.toStringAsFixed(2)}', style: TextStyle( fontSize: 18, fontWeight: FontWeight.bold, ), ), ); }, ), ); } }