Flutter：持久化資料

我正在建立一個網上商店。我在主頁上的每個產品旁邊都有一個計數器 [-]0[ ]。我可以在購物車中添加和洗掉產品，但是當我切換到不同的螢屏時，主頁上的計數器重置為 0。我想保留該資料。實作這一目標的最佳方法是什么？

購物車計數器.dart

import 'package:flutter/material.dart';
import '../providers/cart.dart';
import 'package:provider/provider.dart';
import '../providers/products.dart';

class CartCounter extends StatefulWidget {
  const CartCounter({Key? key}) : super(key: key);

  @override
  _CartCounterState createState() => _CartCounterState();
}

class _CartCounterState extends State<CartCounter> {
  int numOfItems = 0;
  @override
  Widget build(BuildContext context) {
    final product = Provider.of<Product>(context, listen: false);
    final cart = Provider.of<Cart>(context, listen: false);
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        CounterButton(
          icon: Icons.remove,
          onPress: () {
            if (numOfItems > 0) {
              setState(() {
                numOfItems--;
              });
              cart.removeSingleItem(product.id);
            }
          },
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 13.0),
          child: Text(
            numOfItems.toString(),
            style: const TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),
        CounterButton(
          icon: Icons.add,
          onPress: () {
            setState(() {
              numOfItems  ;

              cart.addItem(
                product.id,
                product.price,
                product.title,
              );
            });
          },
        ),
      ],
    );
  }
}

class CounterButton extends StatelessWidget {
  final IconData icon;
  final void Function() onPress;

  const CounterButton({
    Key? key,
    required this.icon,
    required this.onPress,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 60.0,
      height: 45.0,
      child: OutlinedButton(
        style: OutlinedButton.styleFrom(
          elevation: 2,
          backgroundColor: Theme.of(context).primaryColor,
          primary: Theme.of(context).primaryColor,
          padding: EdgeInsets.zero,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
        ),
        onPressed: onPress,
        child: Icon(
          icon,
          color: Colors.white,
          size: 30.0,
        ),
      ),
    );
  }
}

product_item.dart

import 'package:flutter/material.dart';
import 'cart_counter.dart';

class ProductItem extends StatelessWidget {
  final String id;
  final String title;
  final double price;
  final String image;

  const ProductItem(this.id, this.title, this.price, this.image, {Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
      child: Card(
        elevation: 2.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
        child: Column(
          children: [
            Row(
              children: [
                Container(
                  height: 50,
                  width: 70.0,
                  decoration: BoxDecoration(
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(20.0),
                      bottomRight: Radius.circular(20.0),
                    ),
                    color: Theme.of(context).primaryColor,
                  ),
                  child: Center(
                    child: Text(
                      title,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16.0,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Image.asset(image),
            const SizedBox(
              height: 10.0,
            ),
            Text(
              price.toStringAsFixed(2),
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20.0,
              ),
            ),
            const SizedBox(
              height: 10.0,
            ),
            const CartCounter(),
            const SizedBox(
              height: 20.0,
            ),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

使用共享首選項或安全存盤來存盤值。

請參閱此對類似問題的回答。

uj5u.com熱心網友回復：

1. 制作一個你想在另一個螢屏上使用的變數 static(global)。

2. 創建一個用于保存變數的類并使其成為全域變數。

希望你能得到一些提示。

標籤：扑 镖 状态

上一篇：如何在顫振中動態出現的字串之間添加間距？

下一篇：錯誤：錯誤狀態：無法在不存在的DocumentSnapshotPlatform上獲取欄位