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

Question

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

这是我的代码：

 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,
                      color: Colors.white,
                    ),
                    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()),
    ),
  );
}

Answer 1

如果您观察值，它可能会动态更新：

 context.watch<ShoppingBasket>().items.length.toString(), //<-- watch instead of read

Answer 2

OurHomePage 需要包裹在 Provider<ShoppingBasket>.

return Provider<ShoppingBasket>(
      create: (context) => ShoppingBasket(),
      child: 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,
                      color: Colors.white,
                    ),
                    onPressed: () {
                      context.read<FirebaseAuthService>().signOut();
                    },
                  ),
                ],
              ),
              ),
            );
          },
        );

Answer 3

我忘记在我的更改通知程序中使用 NotifyListeners() class:

  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
  }

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

Flutter/Dart - Text value not showing correctly

provider

widget

dart

flutter