Flutter Provider状态管理实战

发布时间: 2025-03-22 22:15

↑

# Flutter Provider状态管理实战

## Provider简介

Provider是Flutter官方推荐的状态管理解决方案，它基于InheritedWidget封装，提供了一种简单而强大的方式来管理应用状态。Provider的主要特点：

- 简单易用，学习成本低
- 性能优秀，支持局部更新
- 可测试性强
- 支持依赖注入

## Provider的基本使用

### 安装依赖

在`pubspec.yaml`中添加provider依赖：

```yaml
dependencies:
  provider: ^6.0.0
```

### 创建数据模型

```dart
class Counter extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

void increment() {
    _count++;
    notifyListeners(); // 通知监听器数据已更新
  }

void decrement() {
    _count--;
    notifyListeners();
  }
}
```

### 提供状态

```dart
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}
```

### 消费状态

```dart
class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 方法1：使用Consumer
    return Consumer<Counter>(
      builder: (context, counter, child) {
        return Text('Count: ${counter.count}');
      },
    );

// 方法2：使用context.watch()
    final counter = context.watch<Counter>();
    return Text('Count: ${counter.count}');

// 方法3：使用context.read()
    return ElevatedButton(
      onPressed: () {
        context.read<Counter>().increment();
      },
      child: Text('Increment'),
    );
  }
}
```

## Provider的高级用法

### MultiProvider

当需要提供多个状态时，使用MultiProvider可以避免嵌套：

```dart
void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => Counter()),
        ChangeNotifierProvider(create: (context) => ThemeModel()),
        ChangeNotifierProvider(create: (context) => UserModel()),
      ],
      child: MyApp(),
    ),
  );
}
```

### ProxyProvider

当一个Provider依赖另一个Provider时使用：

```dart
class CartModel extends ChangeNotifier {
  final UserModel user;
  CartModel(this.user);
  // ...
}

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (context) => UserModel()),
    ChangeNotifierProxyProvider<UserModel, CartModel>(
      create: (context) => CartModel(context.read<UserModel>()),
      update: (context, user, previous) =>
          previous?..user = user ?? CartModel(user),
    ),
  ],
  child: MyApp(),
)
```

### FutureProvider

用于异步数据：

```dart
FutureProvider<String>(
  create: (context) => fetchData(),
  initialData: 'Loading...',
  child: MyApp(),
)
```

### StreamProvider

用于流数据：

```dart
StreamProvider<int>(
  create: (context) => Stream.periodic(
    Duration(seconds: 1),
    (count) => count,
  ),
  initialData: 0,
  child: MyApp(),
)
```

## 实战示例：购物车应用

### 1. 定义模型

```dart
// 商品模型
class Product {
  final String id;
  final String name;
  final double price;

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

// 购物车模型
class CartModel extends ChangeNotifier {
  final List<Product> _items = [];
  double _totalPrice = 0.0;

List<Product> get items => _items;
  double get totalPrice => _totalPrice;

void addItem(Product product) {
    _items.add(product);
    _totalPrice += product.price;
    notifyListeners();
  }

void removeItem(Product product) {
    _items.remove(product);
    _totalPrice -= product.price;
    notifyListeners();
  }

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

### 2. 创建UI

```dart
class ShoppingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => CartModel(),
      child: MaterialApp(
        title: '购物车示例',
        home: ProductListScreen(),
      ),
    );
  }
}

class ProductListScreen extends StatelessWidget {
  final List<Product> products = [
    Product(id: '1', name: '商品1', price: 99.99),
    Product(id: '2', name: '商品2', price: 199.99),
    Product(id: '3', name: '商品3', price: 299.99),
  ];

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
        actions: [
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => CartScreen()),
              );
            },
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
          final product = products[index];
          return ListTile(
            title: Text(product.name),
            subtitle: Text('￥${product.price}'),
            trailing: IconButton(
              icon: Icon(Icons.add_shopping_cart),
              onPressed: () {
                context.read<CartModel>().addItem(product);
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('${product.name}已添加到购物车')),
                );
              },
            ),
          );
        },
      ),
    );
  }
}

class CartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('购物车')),
      body: Consumer<CartModel>(
        builder: (context, cart, child) {
          if (cart.items.isEmpty) {
            return Center(child: Text('购物车为空'));
          }
          return Column(
            children: [
              Expanded(
                child: ListView.builder(
                  itemCount: cart.items.length,
                  itemBuilder: (context, index) {
                    final product = cart.items[index];
                    return ListTile(
                      title: Text(product.name),
                      subtitle: Text('￥${product.price}'),
                      trailing: IconButton(
                        icon: Icon(Icons.remove_circle),
                        onPressed: () {
                          cart.removeItem(product);
                        },
                      ),
                    );
                  },
                ),
              ),
              Padding(
                padding: EdgeInsets.all(16.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '总计: ￥${cart.totalPrice.toStringAsFixed(2)}',
                      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        cart.clearCart();
                        Navigator.pop(context);
                      },
                      child: Text('清空购物车'),
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}
```

## 最佳实践

### 1. 状态隔离

将不同功能的状态分离到不同的Provider中：

```dart
// 主题状态
class ThemeModel extends ChangeNotifier {
  bool _isDark = false;
  bool get isDark => _isDark;

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

// 用户状态
class UserModel extends ChangeNotifier {
  User? _user;
  User? get user => _user;

Future<void> login(String username, String password) async {
    // 登录逻辑
    notifyListeners();
  }

void logout() {
    _user = null;
    notifyListeners();
  }
}
```

### 2. 性能优化

1. 使用`Selector`代替`Consumer`进行细粒度更新：

```dart
Selector<CartModel, int>(
  selector: (context, cart) => cart.items.length,
  builder: (context, itemCount, child) {
    return Text('商品数量: $itemCount');
  },
)
```

2. 避免不必要的重建：

```dart
Consumer<CartModel>(
  builder: (context, cart, child) {
    return Column(
      children: [
        child!, // 静态内容
        Text('总价: ${cart.totalPrice}'), // 动态内容
      ],
    );
  },
  child: const Text('购物车'), // 不会重建的内容
)
```

### 3. 依赖注入

使用Provider进行依赖注入：

```dart
class ApiService {
  Future<List<Product>> fetchProducts() async {
    // API调用
  }
}

class ProductRepository {
  final ApiService _apiService;
  ProductRepository(this._apiService);

Future<List<Product>> getProducts() {
    return _apiService.fetchProducts();
  }
}

Provider(
  create: (context) => ApiService(),
  child: ProxyProvider<ApiService, ProductRepository>(
    update: (context, apiService, previous) =>
        ProductRepository(apiService),
    child: MyApp(),
  ),
)
```

### 4. 错误处理

```dart
class DataModel extends ChangeNotifier {
  String? _error;
  bool _loading = false;
  List<Item> _items = [];

String? get error => _error;
  bool get loading => _loading;
  List<Item> get items => _items;

Future<void> fetchData() async {
    try {
      _loading = true;
      _error = null;
      notifyListeners();

_items = await api.fetchItems();
    } catch (e) {
      _error = e.toString();
    } finally {
      _loading = false;
      notifyListeners();
    }
  }
}
```

## 总结

本文详细介绍了Flutter中Provider状态管理的使用方法，包括：

1. Provider的基本概念和使用方法
2. 不同类型Provider的应用场景
3. 实战示例：购物车应用
4. 性能优化和最佳实践

建议：

- 合理划分状态范围
- 使用适当的Provider类型
- 注意性能优化
- 做好错误处理
- 遵循依赖注入原则

元素码农