Flutter代码修复：实现Container堆叠在Image上方（匹配Figma设计）

你的代码无法实现Container叠在Image上方的核心问题是定位逻辑不匹配：底层图片使用Positioned定位，但上层Container用margin控制位置，无法精准对齐到图片区域；同时需要确保Container在Stack子组件列表中位于图片之后（Stack遵循“后添加的组件在视觉上层”的规则）。

以下是修复后的完整代码：

Stack(
  children: [
    // 底层图片组件，用Positioned定位
    Positioned(
      left: MediaQuery.of(context).size.width * 0.2,
      top: 30, // 调整top值，和上层Container的位置对应
      child: Container(
        height: MediaQuery.of(context).size.width * 0.3,
        width: MediaQuery.of(context).size.width * 0.3,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          image: DecorationImage(
            image: AssetImage('images/dashboard.png'),
            fit: BoxFit.cover,
          ),
        ),
      ),
    ),
    // 上层Container，用Positioned精准定位到图片上方
    Positioned(
      left: MediaQuery.of(context).size.width * 0.2,
      top: 30,
      child: Container(
        height: MediaQuery.of(context).size.height * 0.15,
        width: MediaQuery.of(context).size.width * 0.3,
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Color.fromARGB(255, 0, 99, 180),
              blurRadius: 30,
            ),
          ],
          color: Color.fromARGB(255, 253, 253, 253),
          border: Border.all(color: Color(0xff475BD8)),
          borderRadius: BorderRadius.circular(16),
        ),
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) {
                  return dashboard2();
                },
              ),
            );
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                "Dashboard",
                textAlign: TextAlign.left,
                style: TextStyle(
                  fontSize: calculateFontSize(context,17),
                  fontWeight: FontWeight.w500,
                  fontFamily: 'David Libre',
                  color: Colors.black,
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ],
)

关键修改说明： #

• 给上层Container添加Positioned组件，设置和图片相同的left与top值，确保两者完全对齐；
• 移除了Container的margin属性，避免额外的位置偏移；
• 保留Container在Stack子组件列表的第二个位置，确保它在图片的视觉上层。

内容的提问来源于stack exchange，提问作者Amura Maulidi Fachry