Flutter中如何让GridView卡片内的Text组件占满父容器宽度？

你当前的Text没有占满宽度是因为外层包裹的Container没有指定填充父容器宽度，默认只会自适应子组件（也就是Text）的尺寸，直接修改底部Align节点下的Container配置即可。

修改后的itemBuilder代码段如下：

itemBuilder: (BuildContext context, int index) {
  return Card(
    child: Stack(
      fit: StackFit.expand, // 可选配置，让Stack子元素默认填充满Card空间
      children: [
        Image.network(
          "http://localhost:1337${products[index].thumb_image?.url ?? ""}",
          errorBuilder: (context, error, url) =>
              const Icon(Icons.image_outlined),
          fit: BoxFit.cover, // 建议替换fill为cover，避免图片拉伸变形
          height: double.infinity,
          width: double.infinity,
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            width: double.infinity, // 核心属性：强制Container占满水平可用宽度
            padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 6), // 可选，增加文字内边距提升显示效果
            color: Colors.black26, // 背景色移到Container上，实现整行透明黑效果
            child: Text(
              "Value = $index",
              style: const TextStyle(color: Colors.white), // 搭配白色文字可读性更强
            ),
          ),
        ),
      ],
    ),              
  );
}

核心修改说明：

• 给包裹Text的Container添加width: double.infinity属性，是实现Text占满整行宽度的核心配置
• 将原Text样式内的背景色移动到Container层级，避免背景色仅包裹文字区域
• 可选将Image的fit属性从BoxFit.fill改为BoxFit.cover，既保证图片填充满卡片，又不会出现拉伸变形的问题
• 可选给Container增加内边距，优化文字的上下左右留白，视觉效果更协调

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