Files
flutter_provider_demo/lib/pages/proxy_provider_page.dart
2025-02-17 21:26:52 +08:00

226 lines
6.3 KiB
Dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
// 用户信息模型
class UserProfile extends ChangeNotifier {
String _name = "张三";
int _age = 25;
String get name => _name;
int get age => _age;
void updateName(String newName) {
_name = newName;
notifyListeners();
}
void incrementAge() {
_age++;
notifyListeners();
}
}
// 购物车模型
class Cart extends ChangeNotifier {
final List<String> _items = [];
double _totalPrice = 0;
List<String> get items => _items;
double get totalPrice => _totalPrice;
void addItem(String item, double price) {
_items.add(item);
_totalPrice += price;
notifyListeners();
}
}
// 使用ProxyProvider组合用户信息和购物车信息
class UserCartSummary {
final UserProfile user;
final Cart cart;
UserCartSummary(this.user, this.cart);
String get summary =>
'${user.name}的购物车共有${cart.items.length}件商品,总价:¥${cart.totalPrice}';
}
// 格式化显示
class FormattedCart {
final Cart cart;
FormattedCart(this.cart);
String get itemCount => '商品数量: ${cart.items.length}';
String get formattedTotal => '总价: ¥${cart.totalPrice.toStringAsFixed(2)}';
String get itemsList => cart.items.join(', ');
}
class ProxyProviderPage extends StatelessWidget {
const ProxyProviderPage({super.key});
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
// 基础数据提供者
ChangeNotifierProvider(create: (_) => UserProfile()),
ChangeNotifierProvider(create: (_) => Cart()),
// 使用ProxyProvider2组合两个Provider的数据
ProxyProvider2<UserProfile, Cart, UserCartSummary>(
update: (_, userProfile, cart, __) =>
UserCartSummary(userProfile, cart),
),
// 使用ProxyProvider转换数据格式
ProxyProvider<Cart, FormattedCart>(
update: (_, cart, __) => FormattedCart(cart),
),
],
child: Scaffold(
appBar: AppBar(
title: const Text('ProxyProvider示例'),
),
body: const Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
UserProfileSection(),
SizedBox(height: 20),
CartSection(),
SizedBox(height: 20),
SummarySection(),
],
),
),
),
);
}
}
// 用户信息展示和操作部分
class UserProfileSection extends StatelessWidget {
const UserProfileSection({super.key});
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('用户信息',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
// 使用Consumer监听用户信息变化
Consumer<UserProfile>(
builder: (_, user, __) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('姓名: ${user.name}'),
Text('年龄: ${user.age}'),
],
),
),
const SizedBox(height: 8),
Row(
children: [
ElevatedButton(
onPressed: () => context.read<UserProfile>().updateName(
context.read<UserProfile>().name == "张三" ? "李四" : "张三"),
child: const Text('切换用户'),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: () => context.read<UserProfile>().incrementAge(),
child: const Text('增加年龄'),
),
],
),
],
),
),
);
}
}
// 购物车操作部分
class CartSection extends StatelessWidget {
const CartSection({super.key});
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('购物车',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
// 使用Consumer监听购物车数据变化
Consumer<FormattedCart>(
builder: (_, formattedCart, __) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(formattedCart.itemCount),
Text(formattedCart.formattedTotal),
Text('商品列表: ${formattedCart.itemsList}'),
],
),
),
const SizedBox(height: 8),
Row(
children: [
ElevatedButton(
onPressed: () => context.read<Cart>().addItem('商品A', 99.9),
child: const Text('添加商品A'),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: () => context.read<Cart>().addItem('商品B', 199.9),
child: const Text('添加商品B'),
),
],
),
],
),
),
);
}
}
// 汇总信息展示部分
class SummarySection extends StatelessWidget {
const SummarySection({super.key});
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('汇总信息',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
// 使用Consumer监听组合后的数据变化
Consumer<UserCartSummary>(
builder: (_, summary, __) => Text(
summary.summary,
style: const TextStyle(fontSize: 16),
),
),
],
),
),
);
}
}