Flutter/Dart - 文本值显示不正确

如何解决Flutter/Dart - 文本值显示不正确

我正在尝试使用提供程序创建一个购物车，并在我的主页上显示当前购物车中的商品数量。当我创建带有文本小部件的购物车图标时，显示的值并不反映购物车中的商品数量。

这是我的代码：

 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
  }