Flutter 商品卡片组件开发：使用 ProductCard 展示商品信息

Flutter 商品卡片组件开发：使用 ProductCard 展示商品信息

在 Flutter 应用中，商品卡片（ProductCard）是展示商品信息的常见组件，通常包含商品图片、标题、价格和购买按钮等元素。本文将介绍如何在 Flutter 中使用 ProductCard 组件展示商品信息，并提供一个完整的示例代码，帮助您快速上手。

1. 创建 ProductCard 组件

首先，我们需要创建一个名为 ProductCard 的 StatelessWidget，并定义其属性：

import 'package:flutter/material.dart';

class ProductCard extends StatelessWidget {
  final String imageUrl;
  final String title;
  final String price;

  ProductCard({
    required this.imageUrl, required this.title, required this.price
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Wrap(
        alignment: WrapAlignment.spaceBetween,
        children: [
          SizedBox(
            width: MediaQuery.of(context).size.width / 2 - 12,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Image.network(imageUrl),
                Padding(
                  padding: const EdgeInsets.all(0.0),
                  child: Text(
                    title,
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: Text(
                    price,
                    style: TextStyle(fontSize: 16, color: Colors.red),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(0.0),
                  child: Row(
                    children: [
                      Expanded(
                        child: TextButton(
                          onPressed: () {},
                          child: Text('立即购买'),
                          style: ButtonStyle(
                            backgroundColor: MaterialStateProperty.all(Colors.red),
                            foregroundColor: MaterialStateProperty.all(Colors.white),
                          ),
                        ),
                      ),
                      Expanded(
                        child: TextButton(
                          onPressed: () {},
                          child: Icon(Icons.shopping_cart),
                          style: ButtonStyle(
                            backgroundColor: MaterialStateProperty.all(Colors.grey[300]),
                            foregroundColor: MaterialStateProperty.all(Colors.black),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

2. 在页面中使用 ProductCard 组件

现在，我们可以将 ProductCard 组件添加到我们的页面中。例如，在 Home 页面中，我们可以使用 FutureBuilder 获取商品数据，并将数据传递给 ProductCard 组件进行渲染：

import 'package:flutter/material.dart';
import 'package:search_choices/search_choices.dart';
import 'package:video_book_ecommerce/compoment/ProductCard.dart';
import 'package:video_book_ecommerce/compoment/swipper.dart';
import 'package:video_book_ecommerce/service/GetProduct.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      body: FutureBuilder(
        //Future<List> getProducts(page, limit)
        future: GetProduct.getProducts(1, 10),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          print(snapshot.data);

          if (snapshot.hasData) {
            return Column(
              children: [
                // Swipper component

                // Product list
                Expanded(
                  child: ListView.builder(
                    itemCount: snapshot.data?.length,
                    itemBuilder: (BuildContext context, int index) {
                      return ProductCard(
                        imageUrl: snapshot.data?[index]['imageUrl'],
                        title: snapshot.data?[index]['title'],
                        price: snapshot.data?[index]['price'],
                      );
                    },
                  ),
                ),
              ],
            );
          } else {
            print('no data');
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

3. 常见问题

在使用 ProductCard 组件时，可能会遇到一些常见问题，例如：

• snapshot.data 在请求成功后为 null

  这可能是因为数据类型不匹配或者数据结构有误。可以在 builder 中打印出 snapshot.data，查看数据结构是否正确。如果数据结构正确，可以尝试使用其他属性，比如 snapshot.hasError 和 snapshot.connectionState 来进一步排查问题。如果仍然无法解决问题，可以检查接口是否正常，或者尝试使用其他网络请求库。

总结

本文介绍了如何在 Flutter 中使用 ProductCard 组件展示商品信息。通过使用 ProductCard 组件，我们可以快速创建美观且功能强大的商品卡片，提升应用的用户体验。

希望本文能够帮助您更好地理解和使用 ProductCard 组件。