---

1、控件图解

这里我们用一张完整的图来展示 Row 和 Column 的布局效果。如下所示：

Row 表示行容器，一行里面可以有多个列，每列里面也可以有多个控件
Column 表示列容器，一列里面可以有多个行，每行里面也可以有多个控件

2、认识 Cloumn 和 Row 容器

如下图所示：Column 和 Row 容器都有主轴方向和交叉轴默认方向，设置元素位置主要分为主轴排列方式和交叉轴排列方式组合实现。

1、主轴的排列方式（FlexAlgin ）枚举

主轴方向的对齐方式主要有 FlexAlgin 枚举枚举实现。默认主轴方向是 FlexAlign.Start

FlexAlgin 枚举

• FlexAlign.Start----------------------------主轴方向 从上到下紧挨着排列
• FlexAlign.Center-------------------------主轴方向上 居中紧挨着排列 上下边距相等
• FlexAlign.End-----------------------------主轴方向上 从下到上紧挨着排列
• FlexAlign.SpaceBetween-------------主轴方向上 首尾控件靠边，其他控件等距离上下排列
• FlexAlign.SpaceAround---------------主轴方向上 首尾靠边距离是其他控件距离的一半 其他控件等距离上下排列
• FlexAlign.SpaceEvenly----------------主轴方向上 所有控件等距离上下排列

2、主轴的排列效果图

排列效果（Column为例）如下所示

1、交叉轴的排列方式（Horizontal）枚举

Horizontal枚举

• Horizontal.Start----------------------------交叉轴方向 居左
• Horizontal.Center-------------------------交叉轴方向 居中
• Horizontal.End-----------------------------交叉轴方向 居右

2、交叉轴的排列效果图

3、案例布局实现

前面几节已经实现了上图中的所有功能，这里我们就通过Row 和 Column 实现好看的布局，配合容器的对齐方式来实现精美布局。

解决问题：

• 解决图片大小变化时容器变化导致整个页面变化
  给定固定的行高，把图片放在固定的Row 即可解决
• 通过内边距解决文本框文字贴边问题
• 通过外边距控制行与行之间间隔距离

1、代码实现

代码如下（示例）：

@Entry
@Component
struct ImagePage {
  @State imageWidth: number = 30

  build() {
      Column() {

        Row(){
          Image($r("app.media.phone"))
            .width(this.imageWidth)
            .interpolation(ImageInterpolation.High)
        }
        .width('100%')
        .height(400)
        .justifyContent(FlexAlign.Center)

        Row() {
          Text($r('app.string.width_label'))
            .fontSize(20)

          TextInput({ text: this.imageWidth.toFixed(0) })
            .width(150)
            .fontSize(30)
            .backgroundColor('#FFF')
            .type(InputType.Number) //数字类型输入框
            .onChange(value => {
              this.imageWidth = parseInt(value) //将字符串助转成数字
            })
        }
        .width('100%')
        .padding({left:14,right:14})
        .justifyContent(FlexAlign.SpaceBetween)

        Divider()
        .width('92%')
        Row(){
          Button('缩小')
            .width(80)
            .fontSize(20)
            .onClick(()=>{
              if(this.imageWidth>10) {
                this.imageWidth -= 10;
              }
            })
          Button('放大')
            .width(80)
            .fontSize(20)

            .onClick(()=>{
              if(this.imageWidth<=350) {
                this.imageWidth += 10;
              }
            })
        }
        .width('100%')
        .margin({top:35,bottom:35})
        .justifyContent(FlexAlign.SpaceEvenly)

        Slider(
          {
            min:100,
            max:300,
            value:this.imageWidth,
            step:10
          }
        )
          .width('100%')
          .blockColor('#20C')
          .trackThickness(8)
          .showTips(true)
          .onChange((value)=>{
            this.imageWidth=value
          })
      }
      .width('100%')
    .height('100%')
  }
}

3、实现效果

4、总结

`以上就是今天要讲的内容，简单介绍了 Column 和 Row 行列容器的使用，介绍了主轴以及交叉轴方向的枚举对齐方式。也介绍了通过 Padding（内边距）和 Margin （外边距）轻松控制文本位置和控件的距离。