HarmonyOS 组件6--Column和Row组件

布局

线性布局组件

Column列容器中的组件呈垂直方向，从上往下排列，主轴的方向也是竖直从上到下的，交叉轴方向与主轴垂直；

Row行容器中的组件呈水平方向，从左到右排列主轴的方向是水平方向的，交叉轴方向与主轴垂直，组件之间的间距为space。

常见的布局属性

1. justifyContent
   设置子元素在**主轴**方向上的对齐格式，参数：FlexAlign枚举

Column({space : 20}){ // space用于调整各容器的间距  
  Text('item1')  
  Text('item2')  
  Text('item3')  
  Text('item4')  
  
}  
.justifyContent(FlexAlign.Center)  
/*  
 * FlexAlign.Center        在居中位置 
 * FlexAlign.Start         在顶部位置 
 * FlexAlign.End           在底部位置 
 * FlexAlign.SpaceBetween  在竖直方向分布 上下不预留空间 中间留空 
 * FlexAlign.SpaceAround   在竖直方向分布 上下预留间隔的一半空间 
 * FlexAlign.SpaceEvenly   在竖直方向平均分布 上下和间隔预留相等空间 
 * */   

2. alignItems
   设置子元素在**交叉轴**方向的对齐格式，参数：Row容器使用VerticalAlign的枚举、Column容器使用HorizonAlign的枚举。
   
3. 调整内边距padding
   `.padding(20)`  padding内边距，上下左右都设置成20
   `.padding({top:10,left:20,right:30,bottom:40})` padding传入对象，对四个方向上的内边距分别设置
4. 调整外边距margin
   `.margin(20)`  margin外边距，上下左右都设置成20
   `.margin({top:10,left:20,right:30,bottom:40})`margin传入对象，对四个方向上的外边距分别设置

修改之后的调整图片的代码

import router from '@ohos.router'  
@Entry  
@Component  
struct Index {  
  @State message1: string = 'Harmony'  
  @State message2: string = '遥遥领先！'  
  @State imageWidth : number = 200  
  build() {  
    Row() {  
      Column() {  
        Image($r('app.media.image'))  
          .width(this.imageWidth)  
          .height(200)  
          .borderRadius(20)  
        Row() {  
          Text($r('app.string.width_label'))  
            .fontSize(25)  
          TextInput({ placeholder: "请输入图片宽度" }) // 带占位符的文本输入框  
            .width('40%') // 宽度  
            .height(40) // 高度  
            .backgroundColor('#fff') // 类型  
            .type(InputType.Number) // 输入框的类型 Password、Normal、Email、Number、PhoneNumber  
            .onChange(value => {  
              console.log('图片的尺寸是：', value, 'vpx')  
              this.imageWidth = parseInt(value)  
            })  
        }  
        .justifyContent(FlexAlign.SpaceBetween)  
        Divider().width('71%')  
        Row(){  
          Button('缩小')  
            .width(100)  
            .height(50)  
            .type(ButtonType.Capsule)  
            .onClick(()=>{  
              if (this.imageWidth>=10) {  
                this.imageWidth -= 10  
              }  
            })  
          Button('放大')  
            .width(100)  
            .padding({})  
            .height(50)  
            .type(ButtonType.Capsule)  
            .onClick(()=>{  
              // if (this.imageWidth<=360) {  
              //   this.imageWidth += 10            
              // }              
              // 也可以写三元表达式              this.imageWidth<=1600?this.imageWidth+=10:this.imageWidth  
            })  
        }  
        .width('90%')  
        .padding({top:40})  
        .margin({bottom:40})  
        .justifyContent(FlexAlign.SpaceEvenly)  
        Slider({  
          min:200, // 滑块的最左边的值  
          max:1600, // 滑块的最右边的值  
          value:200, // 初始值、滑块的当前值  
          step:50, // 滑动一次改变的值，默认值是1  
          direction:Axis.Horizontal, // Axis.Vertical垂直滑动条、Axis.Horizontal水平滑动条  
          style:SliderStyle.InSet, // InSet:滑动条内显（宽）、OutSet:滑动条外显（细）  
          reverse:false // 是否可以改变最大最小值的方向  
        })  
          .onChange((value)=>{  
            this.imageWidth = value  
          })  
          .width('90%')  
          .blockColor('#333') // 滑块的颜色  
          .showTips(true) // 是否展示百分比  
        // Column({space : 20}){ 
        // space用于调整各容器的间距        
        //   Text('item1')        
        //   Text('item2')        
        //   Text('item3')        
        //   Text('item4')        
        // }        
        // .justifyContent(FlexAlign.Center)        
        /*         
        * FlexAlign.Center        在居中位置         
        * FlexAlign.Start         在顶部位置        
        * FlexAlign.End           在底部位置        
        * FlexAlign.SpaceBetween  在竖直方向分布 上下不预留空间 中间留空         
        * FlexAlign.SpaceAround   在竖直方向分布 上下预留间隔的一半空间         
        * FlexAlign.SpaceEvenly   在竖直方向平均分布 上下和间隔预留相等空间        
        * */      
        }
      .width('100%')
    }
    .height('100%')
  }
}