层叠布局,层叠布局在容器内的不同属性下的布局效果

import router from '@ohos.router'; 
import { BusinessError } from '@ohos.base'; 
  
@Entry 
@Component 
struct Index { 
  @State message: string = '层叠布局效果'; 
  
  build() { 
    Row() { 
      Column({space: 20}) { 
        Text(this.message) 
          .fontSize(48) 
          .fontWeight(FontWeight.Bold) 
        Button('Stack容器内子元素布局效果1') 
          .onClick(() =>{ 
            console.info('点击进入Stack容器内子元素布局页面') 
            router.pushUrl({url: 'pages/StackTest'}).then(() =>{ 
              console.info('进入Stack容器内子元素布局页面成功') 
            }).catch((err: BusinessError) => { 
              console.error(`进入Stack容器内子元素布局页面失败。 code is ${err.code}, fail message is ${err.message}`) 
            }) 
          }) 
        Button('Stack容器的对齐方式2') 
          .onClick(() =>{ 
            console.info('点击进入Stack容器内查看子元素对齐方式') 
            router.pushUrl({url: 'pages/StackTest2'}).then(() =>{ 
              console.info('进入Stack容器内查看子元素对齐方式成功') 
            }).catch((err: BusinessError) => { 
              console.error(`进入Stack容器内查看子元素对齐方式失败。 code is ${err.code}, fail message is ${err.message}`) 
            }) 
          }) 
        Button('Stack容器内子元素布局效果3') 
          .onClick(() =>{ 
            console.info('点击进入Stack容器内子元素布局页面') 
            router.pushUrl({url: 'pages/StackTest3'}).then(() =>{ 
              console.info('进入Stack容器内子元素布局页面成功') 
            }).catch((err: BusinessError) => { 
              console.error(`进入Stack容器内子元素布局页面失败。 code is ${err.code}, fail message is ${err.message}`) 
            }) 
          }) 
        Button('Stack容器内子元素布局效果4') 
          .onClick(() =>{ 
            console.info('点击进入Stack容器内子元素布局页面') 
            router.pushUrl({url: 'pages/StackTest4'}).then(() =>{ 
              console.info('进入Stack容器内子元素布局页面成功') 
            }).catch((err: BusinessError) => { 
              console.error(`进入Stack容器内子元素布局页面失败。 code is ${err.code}, fail message is ${err.message}`) 
            }) 
          }) 
      } 
      .width('100%') 
    } 
  } 
}