flutter_provider_demo
This commit is contained in:
225
lib/pages/proxy_provider_page.dart
Normal file
225
lib/pages/proxy_provider_page.dart
Normal file
@ -0,0 +1,225 @@
|
||||
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),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user