使用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
相关产品推荐
相关产品推荐

