Flutter如何在带边框的图片上添加文字以匹配指定示例效果

你可以通过Flutter的Stack层叠布局实现该效果，在原有带边框的图片基础上，叠加底部带半透明背景的文字即可，完整代码如下：

Container(
  height: 140,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black12, width: 1),
  ),
  child: Stack(
    fit: StackFit.expand,
    children: [
      // 底层展示的图片
      Image.network(
        "https://drive.google.com/uc?export=view&id=139Wu8bbLz5ubRECzdEmZof8crfGhx0oA",
        fit: BoxFit.cover,
      ),
      // 底部文字层
      Positioned(
        left: 0,
        right: 0,
        bottom: 0,
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 6),
          color: Colors.black.withOpacity(0.6),
          child: Text(
            "自定义文字内容",
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
        ),
      )
    ],
  ),
)

核心改动说明：

• 将原Container中直接存放的Image替换为Stack组件，支持多个子组件层叠排布
• Stack的第一个子元素保留原有网络图片作为底层内容，设置StackFit.expand保证图片填充满父容器
• 通过Positioned组件将文字容器固定在Stack底部，左右两侧铺满父容器宽度
• 文字外层添加半透明黑色背景容器，保证文字在不同明度的图片上都能清晰展示，可自行调整内边距、文字颜色大小、背景透明度等参数适配需求。

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