线性布局，该demo主要用于展示线性布局在不同容器以及不同属性下的布局效果

import router from '@ohos.router'; 
import {BusinessError} from '@ohos.base' 
  
@Entry 
@Component 
struct Index { 
  @State message: string = '线性布局'; 
  
  build() { 
      Column({space: 40}) { 
        Text(this.message) 
          .fontSize(48) 
          .fontWeight(FontWeight.Bold) 
        Button('Column容器内子元素的布局效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Column容器内子元素的布局页面') 
            router.pushUrl({url: 'pages/Column'}).then(() =>{ 
              console.info('成功进入Column容器内子元素的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Column容器内子元素的布局页面失败。code is ${err.code}, message is ${err.message}`) 
            }) 
          }) 
        Button('Column容器内子元素在水平方向上的排列效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Column容器内子元素在水平方向上的布局页面') 
            router.pushUrl({url: 'pages/ColumnHorizontalAlignTest'}).then(() =>{ 
              console.info('成功进入Column容器内子元素在水平方向上的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Column容器内子元素在水平方向上的布局页面失败。code is ${err.code}, message is ${err.message}`) 
            }) 
          }) 
        Button('Column容器内子元素在主轴方向上的排列效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Column容器内子元素在主轴方向上的布局页面') 
            router.pushUrl({url: 'pages/ColumnJustifyContentTest'}).then(() =>{ 
              console.info('成功进入Column容器内子元素在主轴方向上的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Column容器内子元素在主轴方向上的布局页面失败。code is ${err.code}, message is ${err.message}`) 
            }) 
          }) 
        Button('Row容器内子元素的布局效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Row容器内子元素的布局页面') 
            router.pushUrl({url: 'pages/Row'}).then(() =>{ 
              console.info('成功进入Row容器内子元素的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Row容器内子元素的布局页面失败。code is ${err.code}, message is ${err.message}`) 
            }) 
          }) 
        Button('Row容器内子元素在主轴方向上的排列效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Row容器内子元素的布局页面') 
            router.pushUrl({url: 'pages/RowJustifyContentTest'}).then(() =>{ 
              console.info('成功进入Row容器内子元素的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Row容器内子元素的布局页面失败。code is ${err.code}, message is ${err.message}`) 
            }) 
          }) 
        Button('Row容器内子元素在垂直方向上的排列效果') 
          .onClick(() =>{ 
            console.info('点击按钮进入Row容器内子元素的布局页面') 
            router.pushUrl({url: 'pages/RowVerticalAlignTest'}).then(() =>{ 
              console.info('成功进入Row容器内子元素的布局页面') 
            }).catch((err: BusinessError) =>{ 
              console.error(`进入Row容器内子元素的布局页面失败。code is ${err.code}, 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.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.