Stack语法格式如下,其实鸿蒙的容器组件的语法都是一样的,只是实现效果和和容器组件的名字不一样而已。
与绝对定位相比,实现更简单些,绝地定位更灵活,如果需要调整子组件的对其方式,需要这样添
加:
优先能用层叠还是就使用层叠,实战效果如下:
代码如下:
@Entry
@Component
struct Index {
build() {
Column(){
Stack({
alignContent:Alignment.Center
}){
Text('第一个组件').fontSize(18).backgroundColor(Color.Red)
.width(350)
.height(350)
Text('第二个组件').fontSize(18).backgroundColor(Color.White)
.width(300)
.height(300)
Text('第三个组件').fontSize(18).backgroundColor(Color.Orange)
.width(250)
.height(250)
Text('第四个组件').fontSize(18).backgroundColor(Color.Yellow)
.width(150)
.height(150)
Text('第五个组件').fontSize(18).backgroundColor(Color.Brown)
.width(100)
.height(100)
}.width(350)
.height(350)
.backgroundColor(Color.Orange)
}.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
}
}
把alignContent:Alignment.Center改为alignContent:Alignment.Start,效果如下图:
总结:stack层叠布局能快速的实现层叠效果,默认中心开花方式,都是可以调整的,