线性布局，该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%') 
  
    } 
}