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

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%') 
    } 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.