我想将 Widget 转换为 StatelessWidget

Question

我有一个Widget来使用存储在Firestore中的数据构建Cards我想将此Widget转换为StatelessWidget以使用Card的按钮。

这是小部件

Widget buildProducts(Products products) => Card(
  clipBehavior: Clip.antiAlias,
  child: SizedBox(
    width: 300,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Image(image: NetworkImage(products.imageUrl)),
        ListTile(
          title: Text(products.name),
          subtitle: Text('Precio: ${products.price} \$'),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 0, 8, 8),
              child: ElevatedButton(
                style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.all<Color>(
                    const Color(0xFFFFFFFF),
                  ),
                  backgroundColor: MaterialStateProperty.all<Color>(
                    const Color(0xFF6750A4),
                  ),
                ),
                onPressed: () => showDialog(
                  context: context,
                  barrierDismissible: false,
                  builder: (BuildContext context) => AlertDialog(
                    title: const Text('Subir Producto'),
                    content: const Text(
                        'El producto ha añadido a la base de datos correctamente'),
                    actions: <Widget>[
                      TextButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: const Text('OK'))
                    ],
                  ),
                ),
                child: const Text(
                  'Añadir al Carro',
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  ),
);

Answer 1

创建一个StatelessWidget并通过构造函数传递Products并将卡片粘贴到返回部分。

class ProductWidet extends StatelessWidget {
  final Products products;
  const ProductWidet({required this.products,Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      clipBehavior: Clip.antiAlias,
      child: SizedBox(
        width: 300,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Image(image: NetworkImage(products.imageUrl)),
            ListTile(
              title: Text(products.name),
              subtitle: Text('Precio: ${products.price} \$'),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 0, 8, 8),
                  child: ElevatedButton(
                    style: ButtonStyle(
                      foregroundColor: MaterialStateProperty.all<Color>(
                        const Color(0xFFFFFFFF),
                      ),
                      backgroundColor: MaterialStateProperty.all<Color>(
                        const Color(0xFF6750A4),
                      ),
                    ),
                    onPressed: () => showDialog(
                      context: context,
                      barrierDismissible: false,
                      builder: (BuildContext context) => AlertDialog(
                        title: const Text('Subir Producto'),
                        content: const Text(
                            'El producto ha añadido a la base de datos correctamente'),
                        actions: <Widget>[
                          TextButton(
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              child: const Text('OK'))
                        ],
                      ),
                    ),
                    child: const Text(
                      'Añadir al Carro',
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}