HarmonyOS 开发基础（七）内容小结合

HarmonyOS 开发基础（七）内容小结合

制作一个图片大小控制器

使用组件有：

1. Image
2. Text
3. TextInput
4. Button
5. 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%')
    }
  }
}