使用 "quantity" 按钮创建动态 "Add to car"

Question

我想为我的 Flutter-Dart 电子商务应用程序创建一个动态按钮，样式需要是这样的：

添加商品时，您可以选择数量，但当数量回到0时，“添加商品”按钮将再次出现，并带有淡入淡出的效果。

第一个例子

第二个例子

Answer 1

这是一个简单的示例，我将如何创建此行为。

You can test this code yourself on DartPad

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int quantity = 0;

  @override
  Widget build(BuildContext context) {
    return Card(
        color: Colors.blue,
        child: SizedBox(
          height: 50,
          width: 100,
          child: quantity == 0
              ? TextButton(
                  child: const Text(
                    'Add Item',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      quantity++;
                    });
                  },
                )
              : Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    IconButton(
                      icon: const Icon(Icons.remove),
                      onPressed: () {
                        setState(() {
                          quantity--;
                        });
                      },
                    ),
                    Text(quantity.toString()),
                    IconButton(
                      icon: const Icon(Icons.add),
                      onPressed: () {
                        setState(() {
                          quantity++;
                        });
                      },
                    ),
                  ],
                ),
        ));
  }
}

使用 "quantity" 按钮创建动态 "Add to car"

Create a dynamic "Add to car" with "quantity" Button

button

dart

flutter

第一个例子

第二个例子