HarmonyOS 开发基础(七)内容小结合
制作一个图片大小控制器
使用组件有:
- Image
- Text
- TextInput
- Button
- Slider
@Entry
@Component
struct Index {
@State imgUrl: string = 'https://gw.alicdn.com/imgextra/i2/2201227850912/O1CN01B7gVvP1Ibk6HMiDRz_!!2201227850912.jpg_Q75.jpg_.webp'
@State imageSize: number = 300
build() {
Row() {
Column() {
// 图片行
Row() {
// Image:图片组件
Image(this.imgUrl)
.width(this.imageSize)
.height(this.imageSize)
}
.margin({bottom: 20, top: 20})
.justifyContent(FlexAlign.Center)
// 输入行
Row() {
// Text:文本组件
Text('图片宽度:')
.width('25%')
// TextInput:文本单行文本输入框组件
TextInput({
placeholder: '请输入图片宽度',
text: this.imageSize.toString()
})
.width('50%')
// onChange:组件事件,当输入框当中的值发生改变时触发
.onChange(value => {
// 将 imageSize 值改为单行文本输入框内的值
this.imageSize = parseInt(value)
})
}
.width('100%')
.margin({bottom: 20})
.justifyContent(FlexAlign.Center)
// 按钮行
Row() {
// Button:按钮组件
Button('缩小')
.width(150)
// onClick:组件事件,当点击按钮时触发
.onClick(() => {
// 将 imageSize 值减10
this.imageSize -= 10
})
// Button:按钮组件
Button('放大')
.width(150)
// onClick:组件事件,当点击按钮时触发
.onClick(() => {
// 将 imageSize 值加10
this.imageSize += 10
})
}
.width('100%')
.margin({bottom: 10})
.justifyContent(FlexAlign.SpaceAround)
// 滑块行
Row() {
// Slider:滑动条组件
Slider({
min: 100,
max: 500,
value: this.imageSize,
step: 10,
style: SliderStyle.InSet
})
.width('92%')
.showTips(true)
// onChange:组件事件,当滑块移动时触发
.onChange(value => {
// 将 imageSize 值改变成滑动条组件内的值
this.imageSize = value
})
}
}
.width('100%')
}
}
}