---

1、控件图解

这里我们用一张完整的图来汇整 Button 的用法格式、属性和事件，如下所示：

按钮默认类型就是胶囊类型。

2、案例实现

这里我们实现一个根据放大和缩小按钮来改变图片大小的功能。

功能描述：

• 点击放大，图片放大；点击缩小，图片缩小。

1、代码实现

代码如下（示例）：

@Entry
@Component
struct ImagePage {
  @State imageWidth: number = 30

  build() {
    Row() {
      Column() {
        Image($r("app.media.icon"))
          .width(this.imageWidth)
          .interpolation(ImageInterpolation.High)

        Text($r('app.string.width_label'))
          .fontSize(30)

        TextInput({text:this.imageWidth.toFixed(0)})
          .fontSize(30)
          .backgroundColor('#36D')
          .type(InputType.Number)//数字类型输入框
          .onChange(value=>{
            this.imageWidth=parseInt(value)//将字符串助转成数字
          })
        //带水印的输入框
        TextInput({placeholder:'请输入图片宽度'})
          .fontSize(30)
          .width(150)

        Row(){
          Button('缩小')
            .width(80)
            .fontSize(20)
            .type(ButtonType.Normal)
            .onClick(()=>{
              if(this.imageWidth>10) {
                this.imageWidth -= 10;
              }
            })
          Button('放大')
            .width(80)
            .fontSize(20)
            .onClick(()=>{
              if(this.imageWidth<=350) {
                this.imageWidth += 10;
              }
            })
        }

      }
      .width('100%')
    }
    .height('100%')
  }
}

2、代码解释

导入和声明

@Entry
@Component
struct ImagePage {
  @State imageWidth: number = 30
  }

• @Entry：标记这是一个页面的入口。
• @Component：标记这是一个组件。
• @State：标记 imageWidth 是一个状态变量，初始值为30。
  构建页面

  build() {
    Row() {
      Column() 
	  }
	  }

• Row()：创建一个水平布局容器。
• Column()：创建一个垂直布局容器。
  图片显示

        Image($r("app.media.icon"))
          .width(this.imageWidth)
          .interpolation(ImageInterpolation.High)

• Image($r(“app.media.icon”))：加载资源文件中的图片，路径为 app.media.icon。
• .width(this.imageWidth)：设置图片的宽度为 imageWidth。
• .interpolation(ImageInterpolation.High)：设置图片插值方式为高质量。
  文本标签

        Text($r('app.string.width_label'))
          .fontSize(30)

• Text($r(‘app.string.width_label’))：显示资源文件中的文本，路径为 app.string.width_label。
• .fontSize(30)：设置文本的字体大小为30。
  数字输入框

        TextInput({text:this.imageWidth.toFixed(0)})
          .fontSize(30)
          .backgroundColor('#36D')
          .type(InputType.Number)//数字类型输入框
          .onChange(value=>{
            this.imageWidth=parseInt(value)//将字符串转换成数字
          })

• TextInput({text:this.imageWidth.toFixed(0)})：创建一个输入框，初始值为 imageWidth 的整数部分。
• .fontSize(30)：设置输入框的字体大小为30。
• .backgroundColor(‘#36D’)：设置输入框的背景颜色为蓝色。
• .type(InputType.Number)：设置输入框为数字类型。
• .onChange(value=>{ this.imageWidth=parseInt(value) })：当输入框内容变化时，将输入值转换为数字并赋值给 imageWidth。
  带水印的输入框

        TextInput({placeholder:'请输入图片宽度'})
          .fontSize(30)
          .width(150)

• TextInput({placeholder:‘请输入图片宽度’})：创建一个带有占位符文本的输入框。
• .fontSize(30)：设置输入框的字体大小为30。
• .width(150)：设置输入框的宽度为150。
  按钮组

        Row(){
          Button('缩小')
            .width(80)
            .fontSize(20)
            .type(ButtonType.Normal)
            .onClick(()=>{
              if(this.imageWidth>10) {
                this.imageWidth -= 10;
              }
            })
          Button('放大')
            .width(80)
            .fontSize(20)
            .onClick(()=>{
              if(this.imageWidth<=350) {
                this.imageWidth += 10;
              }
            })
        }

• Row()：创建一个水平布局容器，用于放置按钮。
• Button(‘缩小’)：创建一个按钮，文本为“缩小”。
• .width(80)：设置按钮的宽度为80。
• .fontSize(20)：设置按钮的字体大小为20。
• .type(ButtonType.Normal)：设置按钮的类型为普通按钮。
• .onClick(()=>{ if(this.imageWidth>10) { this.imageWidth -= 10; } })：点击按钮时，如果 imageWidth 大于10，则减去10。
• Button(‘放大’)：创建一个按钮，文本为“放大”。
• .width(80)：设置按钮的宽度为80。
• .fontSize(20)：设置按钮的字体大小为20。
• .onClick(()=>{ if(this.imageWidth<=350) { this.imageWidth += 10; } })：点击按钮时，如果 imageWidth 小于等于350，则加上10。
  设置布局容器的宽度和高度

      .width('100%')
    }
    .height('100%')
  }
}

• .width(‘100%’)：设置垂直布局容器的宽度为100%。
• .height(‘100%’)：设置水平布局容器的高度为100%。

3、运行效果

4、总结

本节通过Button控件的学习，实现一个简单的页面，用于动态调整图片的宽度。页面包含一个图片、一个显示宽度的文本标签、一个数字输入框、一个带水印的输入框以及两个按钮（缩小和放大）。通过改变 Button 属性，实现不同样式效果。