大家好，我是潘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+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
