如何将数据从切换按钮推送到购物车

Question

我正在为我的咖啡烘焙店设计一家 flutter 咖啡店。我希望人们能够通过每杯咖啡的单独屏幕上的切换按钮选择“全豆”或“研磨咖啡”以及“一次性付款”或“订阅”。如何将所选按钮的数据推送到购物车屏幕？

这是我的表单的代码，其中存在切换按钮：

     Form(
                        key: _formKey,
                        child: const Column(
                          children: [
                            WholeOrGround(),
                            SizedBox(height: 15),
                            OneTimeSubscribe(),
                            SizedBox(
                              height: 15,
                            )
                          ],
                        )),

以下是其中一个切换按钮在其自己的文件中的样子：

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

  @override
  State<WholeOrGround> createState() => _WholeOrGround();
}

class _WholeOrGround extends State<WholeOrGround> {
  List<bool> isSelected = [true, false];

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      color: Colors.amber,
      borderColor: Colors.amber,
      splashColor: const Color.fromARGB(255, 251, 187, 208),
      borderWidth: 3,
      borderRadius: BorderRadius.circular(10),
      selectedColor: Colors.lightBlue,
      onPressed: (int newIndex) {
        setState(() {
          for (int index = 0; index < isSelected.length; index++) {
            if (index == newIndex) {
              isSelected[index] = true;
            } else {
              isSelected[index] = false;
            }
          }
        });
      },
      isSelected: isSelected,
      children: const [
        Padding(
            padding: EdgeInsets.all(4),
            child: Text('Whole Bean',
                style: TextStyle(fontWeight: FontWeight.bold))),
        Padding(
          padding: EdgeInsets.all(4),
          child: Text('Ground', style: TextStyle(fontWeight: FontWeight.bold)),
        )
      ],
    );
  }
}

这是我将在购物车屏幕中获取发送的数据的地方：

    Expanded(
                  child: ListView.builder(
                    itemCount: value.cart.length,
                    itemBuilder: (context, index) {
                      // get product from cart
                      final CoffeeItem coffeeItem = value.cart[index];
                      //get item name
                      final String coffeeTitle = coffeeItem.title;
                      //get price
                      final String coffeePrice = coffeeItem.productPrice;
                      //get image
                      final String coffeeImage = coffeeItem.image;
                      // get coffee info
                      final String grindSetting;
                      final String _paymentType;

                      //return ListTile
                      return Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15),
                            color: const Color.fromARGB(255, 219, 176, 243)),
                        margin:
                            const EdgeInsets.only(left: 20, top: 20, right: 20),
                        child: ListTile(
                          leading: Image.asset(coffeeImage),
                          title: Text(coffeeTitle),
                          subtitle: Text('\$$coffeePrice'),
                          trailing: IconButton(
                              onPressed: () =>
                                  removeFromCart(coffeeItem, context),
                              icon: const Icon(Icons.delete)),
                        ),
                      );
                    },
                  ),
                )

如有任何帮助，我们将不胜感激。

Answer 1

您可以创建回调方法来获取所选项目。我正在使用布尔值，而只有两个项目。

class WholeOrGround extends StatefulWidget {
  const WholeOrGround({super.key, required this.onToggle});
  final Function(bool isGround) onToggle;

  @override
  State<WholeOrGround> createState() => _WholeOrGround();
}

内部切换按钮

   onPressed: (int newIndex) {
        widget.onToggle(newIndex == 1);
        ...

现在，当您使用

WholeOrGround

时，您可以获得更新后的值，例如

WholeOrGround(
  onToggle: (bool isGround) {
    print(isGround);
    //you can use a state bool then pass the value on next/other widget
  },
),