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

Posted 2023-02-23

【中文标题】Flutter/Dart - 文本值未正确显示

【英文标题】：Flutter/Dart - Text value not showing correctly

【发布时间】：2021-07-23 05:06:02

【问题描述】：

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

这是我的代码：

 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()),
    ),
  );

【参考方案1】：

如果你注意它的值，它可能会动态更新：

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

【讨论】：

恐怕这并不能解决它。奇怪的是，当我单击退出图标（并通过 firebase auth 退出）时，值会更新并显示在图标上？

您是否尝试过使用 Consumer() 代替？如是。你能分享你的SignInViewModel()

【参考方案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();
                    ,
                  ),
                ],
              ),
              ),
            );
          ,
        );

【讨论】：

但是这个提供程序已经作为我的 main() 函数的一部分在小部件树中，我将添加我的 main.dart 作为上下文 - 恐怕这还没有解决我的问题

【参考方案3】：

我忘记在 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