可以使用GridView来实现一行容纳两个的效果,修改代码如下:

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: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Expanded( child: Image.network(imageUrl), ), Padding( padding: const EdgeInsets.all(8.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), ), ), 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: Text('加入购物车'), style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Colors.grey[300]), foregroundColor: MaterialStateProperty.all(Colors.black), ), ), ), ], ), ], ), ); } }

然后在使用ProductCard的地方,将外层的ListView改为GridView即可:

GridView.count( crossAxisCount: 2, childAspectRatio: 0.7, children: [ ProductCard( imageUrl: 'https://picsum.photos/id/1/200/300', title: 'Product 1', price: '¥100', ), ProductCard( imageUrl: 'https://picsum.photos/id/2/200/300', title: 'Product 2', price: '¥200', ), // 还可以添加更多的ProductCard ], )

import packagefluttermaterialdart;class ProductCard extends StatelessWidget final String imageUrl; final String title; final String price; ProductCard required thisimageUrl required thistitl

原文地址: https://www.cveoy.top/t/topic/dyfM 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录