问题描述
我正在尝试使用提供程序创建一个购物车,并在我的主页上显示当前购物车中的商品数量。当我创建带有文本小部件的购物车图标时,显示的值并不反映购物车中的商品数量。
这是我的代码:
class OurShoppingBasketIcon extends StatelessWidget {
const OurShoppingBasketIcon({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.center,child: InkWell(
onTap: () {
Navigator.push(
context,MaterialPageRoute(builder: (context) => ShoppingBasketScreen()),);
},child: Stack(
children: <Widget>[
new Icon(
Icons.shopping_cart_outlined,color: Colors.white,),new Positioned(
right: 0,child: new Container(
padding: EdgeInsets.all(1),decoration: new Boxdecoration(
color: Colors.red,borderRadius: BorderRadius.circular(6),constraints: BoxConstraints(
minWidth: 12,minHeight: 12,child: Text(
context.read<ShoppingBasket>().items.length.toString(),style: new TextStyle(
color: Colors.white,fontSize: 8,textAlign: TextAlign.center,)
],);
}
}
这是实现图标的地方:
class OurHomePage extends StatefulWidget {
@override
_OurHomePageState createState() => _OurHomePageState();
}
class _OurHomePageState extends State<OurHomePage> {
@override
Widget build(BuildContext context) {
return Consumer<OurUser>(
builder: (_,user,__) {
return ChangeNotifierProvider<SignInviewmodel>(
create: (_) => SignInviewmodel(context.read),builder: (_,child) {
return Scaffold(
appBar: AppBar(
title: Text("My app"),actions: [
OurShoppingBasketIcon(),IconButton(
icon: Icon(
Icons.logout,onpressed: () {
context.read<FirebaseAuthService>().signOut();
},],);
},);
},);
}
}
截至撰写本文时,购物车中有 2 件商品:
但是首页的图标没有变化:
这是我的 main.dart:
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(
MultiProvider(
providers: [
Provider(
create: (_) => FirebaseAuthService(),StreamProvider<OurUser>(
create: (context) =>
context.read<FirebaseAuthService>().onAuthStateChanged),ChangeNotifierProvider.value(
value: ShoppingBasket(),child: MaterialApp(theme: OurTheme().buildTheme(),home: OurHomePage()),);
}
解决方法
也许如果你观察它会动态更新的值:
context.watch<ShoppingBasket>().items.length.toString(),//<-- watch instead of read
,
OurHomePage 需要包含在 applyTo(layout)
中。
Provider<ShoppingBasket>
,
我忘记在我的 Change Notifier 类中使用 NotifyListeners():
class ShoppingBasket extends ChangeNotifier {
Map<String,SingleBasketItem> _items = {};
Map<String,SingleBasketItem> get items {
return {..._items};
}
void addItem(String id) {
_items.putIfAbsent(
id,() => SingleBasketItem(id),);
notifyListeners(); //HERE
}