ArkUI-06-页面布局Row&Column

Column 纵向排列

Row  横向排列

6种Column枚举项对齐方式

6种Row的对齐方式

@Entry
@Component
struct Index {
  @State imageWidth:number = 150
  build() {
    Column() {
      Row(){
        Image($r('app.media.test'))
          .width(this.imageWidth)
          .borderRadius(10)
          .interpolation(ImageInterpolation.High)
      }
      .width('100%')
      .height(150)
      .justifyContent(FlexAlign.Center)

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

        TextInput({text:this.imageWidth.toFixed(0)})
          .width(150)
          .backgroundColor('#FFF')
          .type(InputType.Number)
          .onChange(value =>{
            console.log(value);
            this.imageWidth=parseInt(value)
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({left:14,right:14})//控制内边距

      Divider().width('90%')


      Row(){
        Button('缩小').width(80).fontSize(20)
          .onClick(()=>{
            if(this.imageWidth >=10){
              this.imageWidth -= 10
            }
          })
        Button('放大').width(80).fontSize(20).type(ButtonType.Normal)
          .onClick(()=> {
            if (this.imageWidth < 300) {
              this.imageWidth += 10
            }
          })
      }
      .margin(30)  //控制外边距
      .width('80%')
      .justifyContent(FlexAlign.SpaceEvenly)

      Row(){
        Slider({
          min:100, //最小值
          max:300,//最大值
          value:this.imageWidth,//当前值
          step:10,//滑动步长
          style:SliderStyle.OutSet,//Inset
          direction:Axis.Horizontal,//vertical
          reverse:false//是否反向滑动
        }).width('90%')
          .showTips(true)//是否显示百分比
          .blockColor('#36d')
          .trackThickness(8)
          .onChange(value=>{
            this.imageWidth = value

          })
      }

    }
    .width('100%')
    .height('100%')
  }

}