元服务—实践篇（1）

构建布局

1. 线性布局
2. 层叠布局
3. 弹性布局
4. 相对布局
5. 栅格布局

线性布局

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

Column

@Entry
@Component
struct TestPage {

  build() {
    Column(){
      Text("一帆風順").fontSize(15).width(65).height(50).backgroundColor(Color.Red)
      Text("二龍騰飛").fontSize(15).width(65).height(50).backgroundColor(Color.Gray)
      Text("三羊開泰").fontSize(15).width(65).height(50).backgroundColor(Color.Yellow)
      Text("四季平安").fontSize(15).width(65).height(50).backgroundColor(Color.Blue)
      Text("五福臨門").fontSize(15).width(65).height(50).backgroundColor(Color.White)
    }.backgroundColor("#66CCFF").width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

ROW

@Entry
@Component
struct TestPage {

  build() {
    Row(){
      Text("一帆風順").fontSize(15).width(65).height(50).backgroundColor(Color.Red)
      Text("二龍騰飛").fontSize(15).width(65).height(50).backgroundColor(Color.Gray)
      Text("三羊開泰").fontSize(15).width(65).height(50).backgroundColor(Color.Yellow)
      Text("四季平安").fontSize(15).width(65).height(50).backgroundColor(Color.Blue)
      Text("五福臨門").fontSize(15).width(65).height(50).backgroundColor(Color.White)
    }.backgroundColor("#66CCFF").width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

布局子元素在排列方向上的间距

在布局容器内，可以通过【space】属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。

@Entry
@Component
struct TestPage {

  build() {
    Row({ space: 7 }){
      Text("一帆風順").fontSize(15).width(65).height(50).backgroundColor(Color.Red)
      Text("二龍騰飛").fontSize(15).width(65).height(50).backgroundColor(Color.Gray)
      Text("三羊開泰").fontSize(15).width(65).height(50).backgroundColor(Color.Yellow)
      Text("四季平安").fontSize(15).width(65).height(50).backgroundColor(Color.Blue)
      Text("五福臨門").fontSize(15).width(65).height(50).backgroundColor(Color.White)
    }.backgroundColor("#66CCFF").width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

容器内子元素在水平方向上的排列

分为Column于Row两个方向的排序。

Column用到的对象是HorizontalAlign，其属性有3：

HorizontalAlign.Start：子元素在水平方向左对齐。

HorizontalAlign.Center：默认为居中，子元素在水平方向居中对齐。

HorizontalAlign.End：子元素在水平方向右对齐。

@Entry
@Component
struct TestPage {

  build() {
    Column({ space: 7 }){
      Text("一帆風順").fontSize(15).width(65).height(50).backgroundColor(Color.Red)
      Text("二龍騰飛").fontSize(15).width(65).height(50).backgroundColor(Color.Gray)
      Text("三羊開泰").fontSize(15).width(65).height(50).backgroundColor(Color.Yellow)
      Text("四季平安").fontSize(15).width(65).height(50).backgroundColor(Color.Blue)
      Text("五福臨門").fontSize(15).width(65).height(50).backgroundColor(Color.White)
    }.backgroundColor("#66CCFF").width('100%').height('100%').justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Start)
  }
}

Row用到的对象是VerticalAlign，其属性有3：

VerticalAlign.Top：子元素在垂直方向顶部对齐。

VerticalAlign.Center：默认状态，子元素在垂直方向居中对齐。

VerticalAlign.Bottom：子元素在垂直方向底部对齐。

@Entry
@Component
struct TestPage {

  build() {
    Row({ space: 7 }){
      Text("一帆風順").fontSize(15).width(65).height(50).backgroundColor(Color.Red)
      Text("二龍騰飛").fontSize(15).width(65).height(50).backgroundColor(Color.Gray)
      Text("三羊開泰").fontSize(15).width(65).height(50).backgroundColor(Color.Yellow)
      Text("四季平安").fontSize(15).width(65).height(50).backgroundColor(Color.Blue)
      Text("五福臨門").fontSize(15).width(65).height(50).backgroundColor(Color.White)
    }.backgroundColor("#66CCFF").width('100%').height('100%').justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Top)
  }
}