鸿蒙应用开发从入门到实战（十五）：线性布局案例

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！

ArkUI提供了丰富的系统组件，用于制作鸿蒙原生应用APP的UI，本文通过简单案例演示如何使用Column和Row组件实现线性布局。

一、控制图片缩放

1.1 效果图

1.2 实现代码

拷贝food.png到目录pages/imgs

pages/layout/linear目录下新建LinearCase.ets

@Entry
@Component
struct LinearCase {
  @State imgWidth: number = 250

  build() {
    Column() {
      Row() {
        Image('pages/imgs/food.png')
          .width(this.imgWidth)
          .borderRadius(15)
      }
      .width('100%')
      .height(400)
      .justifyContent(FlexAlign.Center)

      Row() {
        Text('图片宽度')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        TextInput({ text: this.imgWidth.toFixed(0) })
          .width(150)
          .backgroundColor('#fff')
          .type(InputType.Number)
          .onChange(value => {
            this.imgWidth = parseInt(value)
          })
      }
      .width('100%')
      .padding({ left: 14, right: 14 })
      .justifyContent(FlexAlign.SpaceBetween)

      Divider()
        .width('91%')

      Row(){
        Button('缩小')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            if(this.imgWidth>=10){
              this.imgWidth-=10
            }
          })

        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            if(this.imgWidth<300){
              this.imgWidth+=10
            }
          })
      }
      .width('100%')
      .margin({top:35,bottom:35})
      .justifyContent(FlexAlign.SpaceEvenly)

      Slider({
        min:100,
        max:300,
        value:this.imgWidth,
        step:10,
      })
        .width('90%')
        .blockColor('#36D')
        .trackThickness(5)
        .showTips(true)
        .onChange(value=>{
          this.imgWidth=value
        })
    }
    .width('100%')
    .height('100%')
  }
}

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！