Flutter电商APP：为GridView每项底部添加商品名与价格文本组件

修改你的GridView.builder的itemBuilder部分，将单个图片替换为垂直布局的Column，包含商品图片、名称和价格文本。以下是调整后的完整代码：

GridView.builder(
  padding: const EdgeInsets.all(10.0),
  itemCount: loadedProducts.length,
  itemBuilder: (ctx, i) => Container(
    decoration: BoxDecoration(
      color: secondaryColorlight,
      borderRadius: BorderRadius.circular(defaultBorderRadius),
    ),
    child: Column(
      children: [
        // 商品图片区域，占满上方空间
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(8.0), // 给图片加内边距避免贴边
            child: Image.asset(
              loadedProducts[i].imageUrl,
              fit: BoxFit.contain, // 保持图片比例，防止拉伸变形
            ),
          ),
        ),
        // 商品信息区域（名称+价格）
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start, // 文本左对齐
            children: [
              Text(
                loadedProducts[i].name, // 替换为你的商品名称字段
                style: const TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                ),
                overflow: TextOverflow.ellipsis, // 名称过长显示省略号
                maxLines: 1, // 限制单行显示
              ),
              const SizedBox(height: 4), // 名称与价格的间距
              Text(
                "¥${loadedProducts[i].price}", // 替换为你的商品价格字段，格式化展示
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.redAccent,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 2 / 3, // 调整宽高比，适配新增的文本区域（可按需微调）
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
)

关键修改说明： #

• 将Container的子组件从单个Image改为Column，实现图片与文本的垂直排列
• 用Expanded包裹图片，让它自动填充文本以外的剩余空间，保证布局稳定性
• 添加Padding控制图片和文本的内边距，优化视觉体验
• 对文本做基础样式优化：价格用加粗红色突出，名称超出时显示省略号
• 调整childAspectRatio为2/3（宽2高3），给文本留出足够显示空间，可根据实际UI需求微调比例

内容的提问来源于stack exchange，提问作者Amitesh Pandey