Flutter如何在带背景图的Container上叠加Text等组件

实现方案 #

你只需要在带背景图的Container的child参数处传入Stack组件，即可实现多组件层叠的效果，具体实现如下：

核心思路 #

Flutter的Stack组件天生支持多层元素堆叠布局，子组件按照书写顺序从下到上堆叠，结合Positioned组件还可以精准控制子组件在父容器内的位置，完全满足你在背景图上叠加文本、按钮等组件的需求。

完整修改代码 #

Widget build(BuildContext context) {
  return Container(
    height: 190.0,
    width: size.width,
    margin: const EdgeInsets.symmetric(
      horizontal: 16.0,
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          child: Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  width: size.width,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(11.0),
                    image: DecorationImage(
                      image: NetworkImage("https://www.exampledomain.com/images/background.jpg"),
                      fit: BoxFit.cover,
                    ),
                  ),
                  // 这里替换为Stack组件实现层叠效果
                  child: Stack(
                    fit: StackFit.expand, // 让Stack撑满父Container
                    children: [
                      // 可选：如果文字和背景对比度不够，可以加一层半透明遮罩优化可读性
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(11.0),
                          color: Colors.black.withOpacity(0.2),
                        ),
                      ),
                      // 叠加左下角的Grocery store文本
                      Positioned(
                        left: 20,
                        bottom: 20,
                        child: Text(
                          "Grocery store",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 22,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      // 你要叠加的其他组件，比如右上角的标签、按钮等
                      Positioned(
                        right: 16,
                        top: 16,
                        child: Container(
                          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                          decoration: BoxDecoration(
                            color: Colors.green,
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Text(
                            "免费配送",
                            style: TextStyle(color: Colors.white, fontSize: 12),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

补充说明 #

• 如果你不需要精准定位组件，也可以不用Positioned包裹，直接配合Align组件或者Column/Row的布局属性控制组件位置
• 注意原代码的NetworkImage入参需要补全字符串引号，否则会出现语法错误

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