Flutter 商品卡片组件：创建具有图片、标题和价格的商品卡片

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), ), ), ), ], ), ), ], ), ), ], ), ); } } 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 { @override void initState() { super.initState(); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('商品列表'), ), body: FutureBuilder( //Future 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(),
        );
      }
    },
  ),
);

} }