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

最新推荐文章于 2024-08-15 11:57:09 发布

宸子涵

最新推荐文章于 2024-08-15 11:57:09 发布

阅读量696

点赞数 8

分类专栏： HarmonyOS 文章标签： harmonyos 华为 typescript 鸿蒙 ArkTS ArkUI

本文链接：https://blog.csdn.net/qq_47938951/article/details/135434059

版权

HarmonyOS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何在HarmonyOS中使用ImageTextTextInputButtonSlider组件创建一个可调整图片大小的控件，包括输入框、按钮和滑动条的交互实现。

摘要由CSDN通过智能技术生成

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%')
    }
  }
}