You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用Flutter Stack与Positioned组件实现指定布局遇阻求助

解决Flutter Stack布局问题

你的代码里黄色容器的定位参数设置错误,导致它出现在红色容器正下方,无法实现目标重叠效果。要达成黄色容器在红色容器右下角部分重叠的布局,需要调整Positioned的参数:

  • 将黄色容器的top值设为红色容器高度减去黄色容器高度的差值(200-100=100),让两个容器产生垂直方向的重叠
  • 将left改为right: 0,让黄色容器的右侧与红色容器的右侧对齐

修改后的代码如下:

Stack(
  children: [
    Positioned(
      top: 0,
      left: 0,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    ),             
    Positioned(
      top: 100, 
      right: 0, 
      child: Container(
        width: 180,
        height: 100,
        color: Colors.yellow,
      ),
    ),
  ],
)

如果需要适配不同尺寸的容器,也可以用Align组件嵌套在Stack中,或者通过LayoutBuilder获取父容器尺寸后动态计算定位值。

内容的提问来源于stack exchange,提问作者jancooth

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.09 16:23:17