Question

我当前的Flutter项目有问题。当我按下addQuantity按钮时，我的计数器正在工作，但总数始终为空。

这是我的cart.dart：

import 'package:flutter/material.dart';

import 'package:loginflutter/componets/cart_products.dart';

class Cart extends StatefulWidget {
    ...
}

class _CartState extends State<Cart> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        ...
      ),

      body: new CartProducts(),

      bottomNavigationBar: new Container(
            ...
              title: new Text("Total:"),
              subtitle: new ChangeTotalState(),
      )
      ...
  }
}

这是我的cart_products.dart：https://pastebin.com/8YGJz6Cw

Display

Answer 1

为您提供代码之前，请注意以下几点：状态小部件的属性是最终属性，这意味着您无法编辑该值。总是在需要编辑值时，它应该是状态内的参数。其次，当您需要在状态内编辑值时，请始终使用setState。我编辑了许多代码以使其正常工作，因此请仔细阅读。享受并希望它能有所帮助！

import 'package:flutter/material.dart';

class CartProducts extends StatefulWidget {
  @override
  _CartProductsState createState() => _CartProductsState();
}

class _CartProductsState extends State<CartProducts> {

  var ProductsOnCart = [
    {
      "name": "Blazer",
      "picture": "images/products/dress1.jpg",
      "price": 85,
      "size": "M",
      "color": "Black",
      "quantity": 1
    },
    {
      "name": "Dress",
      "picture": "images/products/earrings1.jpg",
      "price": 30,
      "size": "M",
      "color": "Red",
      "quantity": 2
    },
  ];

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
      itemCount: ProductsOnCart.length,
      itemBuilder: (context, index) {
        return SingleCartProduct(
            CartProdName: ProductsOnCart[index]['name'],
            CartProdPicture: ProductsOnCart[index]['picture'],
            CartProdPrice: ProductsOnCart[index]['price'],
            CartProdSize: ProductsOnCart[index]['size'],
            CartProdColor: ProductsOnCart[index]['color'],
            CartProdQuantity: ProductsOnCart[index]['quantity']
        );
      },
    );
  }
}


class SingleCartProduct extends StatefulWidget {
  final CartProdName;
  final CartProdPicture;
  final CartProdPrice;
  final CartProdSize;
  final CartProdColor;
  final CartProdQuantity;

  SingleCartProduct({
    this.CartProdName,
    this.CartProdPicture,
    this.CartProdPrice,
    this.CartProdSize,
    this.CartProdColor,
    this.CartProdQuantity
  });

  @override
  State<StatefulWidget> createState() {

    return SingleCartProductState();
  }

}
class SingleCartProductState extends State<SingleCartProduct> {

  int totalQuantity;
  @override
  void initState() {
    totalQuantity = widget.CartProdQuantity;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        //Image Section
          leading: new Image.asset(widget.CartProdPicture, width: 80.0, height: 80.0),
          title: new Text(widget.CartProdName),
          subtitle: new Column(
            children: <Widget>[
              new Row(
                children: <Widget>[
                  //Size Section
                  Padding(
                    padding: const EdgeInsets.all(0.0),
                    child: new Text("Size :"),
                  ),

                  Padding(
                    padding: const EdgeInsets.all(4.0),
                    child: new Text(widget.CartProdSize, style: TextStyle(color: Colors.red),),
                  ),

                  //Color Section
                  new Padding(padding: const EdgeInsets.fromLTRB(20.0, 8.0, 8.0, 8.0),
                      child: new Text("Color :")),
                  Padding(
                    padding: const EdgeInsets.all(4.0),
                    child: new Text(widget.CartProdColor, style: TextStyle(color: Colors.red)),
                  ),
                ],
              ),

              //Price Section
              new Container(
                alignment: Alignment.topLeft,
                child: new Text("\$${widget.CartProdPrice}", style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold, color: Colors.red)),
              )
            ],
          ),
          trailing: ChangeQuantity(
            valueChanged: (int newValue){
              setState(() {
                totalQuantity = newValue;
              });
            },
              cartQty: int.parse('${totalQuantity.toString()}')
          )
      ),
    );
  }
}
class ChangeQuantity extends StatelessWidget {


  ChangeQuantity({Key key, this.cartQty, this.valueChanged}): super(key: key);
  final int cartQty;
  final ValueChanged<int> valueChanged;

  _add() {
    int cartTotalQty = cartQty;
    cartTotalQty++;
    valueChanged(cartTotalQty);
  }
  _subtract() {
    int cartTotalQty = cartQty;
    cartTotalQty--;
    valueChanged(cartTotalQty);
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new IconButton(icon: Icon(Icons.arrow_drop_up), onPressed: _add),
        new Text('${cartQty.toString()}'),
        new IconButton(icon: Icon(Icons.arrow_drop_down), onPressed: _subtract)
      ],
    );
  }
}

如何更改按下按钮颤振的总数

1 个答案: