层叠布局用于在屏幕上预留一块区域来显示组件中的元素,提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠,容器中的子元素(子组件)依次入栈,后一个子元素覆盖前一个子元素,子元素可以叠加,也可以设置位置。
层叠布局具有较强的页面层叠、位置定位能力,其使用场景有广告、卡片层叠效果等。
线性布局参考 https://txwtech.blog.csdn.net/article/details/137186122
import FaultLogger from '@ohos.faultLogger'
import promt2 from '@ohos.prompt'
import promt_action from '@ohos.promptAction'
@Entry
@Component
struct Index {
private arr_value:string[] = ['AP1','AP2','AP3','AP4','AP5','AP6','AP7','AP8'];
@State message: string = '调试'
@State message2: string = '测试'
@State message3: string = 'demo by txwtech'
@State handlePopup2:boolean = false
//堆叠布局示范,堆叠布局放两个弹性布局
build() {
// Stack({}){
// Column(){}.width('80%').height('70%').backgroundColor(Color.Blue)//线性布局在底层
// Text('堆叠布局').width('99%').height(100).margin({top:5}).backgroundColor(Color.Yellow) //text在中层
// Button('按钮').width('80%').height(100).margin({top:50})//按钮在最上层
// }
//堆叠结合弹性布局
Stack({alignContent:Alignment.Bottom}){
Flex({wrap:FlexWrap.Wrap}){ //弹性布局
ForEach(this.arr_value,(item)=>{
Text(item)
.width(100)
.height(100)
.fontSize(18)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(Color.Green)
Text(' ')
},item=>item)
}.width('100%').height('100%')
Flex({justifyContent:FlexAlign.SpaceAround,alignItems:ItemAlign.Center}){
Text('信息').fontSize(18).fontColor(Color.White)
Text('通知').fontSize(18).fontColor(Color.White)
Text('设置').fontSize(18).fontColor(Color.White)
}
.width('50%')
.height(50)
.backgroundColor(Color.Blue)
.margin({bottom:20})
.borderRadius(20)
}.width('100%').height('100%').backgroundColor(Color.Gray)
}
}