大家好，我是潘 Sir，持续分享 IT 技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI 提供了丰富的系统组件，用于制作鸿蒙原生应用 APP 的 UI，本文通过简单案例演示如何使用 Column 和 Row 组件实现线性布局。
一、控制图片缩放
1.1 效果图
1.2 实现代码
拷贝 food.png 到目录 pages/imgs
pages/layout/linear 目录下新建 LinearCase.ets
@Entry@Componentstruct 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+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
评论