鸿蒙Harmony（六）ArkUI---基础组件：Image、Text、TextInput、Button、Slider_arkui imagebutton

Image组件学习
Text、TextInput、Button、Slider组件学习

import Prompt from '@system.prompt'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 150

  build() {
    Row() {
      Column({ space: 10 }) {
        Row() {
          Image($rawfile('baobao.jpg'))
            .width(this.imageWidth)
            .borderRadius(30) //圆角
            .interpolation(ImageInterpolation.High) // 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）
        }
        .height(400)
        .width("100%")
        .margin({ top: 20 })
        .justifyContent(FlexAlign.Center)
        .backgroundColor('#38D')

        Row() {
          Text($r('app.string.Image_width'))
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor('#35D')
            .fontStyle(FontStyle.Italic)

          TextInput({ placeholder: '请输入图片宽度' })
            .type(InputType.Number) // 输入框类型
            .placeholderColor('#eeeeee')
            .fontColor('#35D')
            .fontSize(20)
            .onChange((value: string) => {
              let tempWidth = parseInt(value)
              if (tempWidth >= 150 && tempWidth <= 300) {
                this.imageWidth = parseInt(value)
              } else {
                Prompt.showToast({ message: "请输入数值范围在150-300的数值", duration: 5 })
              }
            })

        }.width('100%')
        .height(40)
        .justifyContent(FlexAlign.SpaceBetween)

        Divider().margin({ top: -10 })

        Row() {
          Button("缩小", { type: ButtonType.Capsule, stateEffect: true })
            .fontSize(20)
            .onClick((event) => {
              if (this.imageWidth > 150) {
                this.imageWidth--
              }
            })
          Button("放大", { type: ButtonType.Capsule, stateEffect: true })
            .fontSize(20)
            .onClick((event) => {
              if (this.imageWidth < 300) {
                this.imageWidth++
              }
            })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)

        Slider({
          min: 150,
          max: 300,
          value: this.imageWidth,
          step: 10,
          direction: Axis.Horizontal,
          style: SliderStyle.OutSet,

        })
          .blockColor("#38D") // 滑块颜色
          .trackColor("#35D") // 进度条颜色
          .showTips(true) // 是否显示提示
          .trackThickness(5)
          .onChange((value, mode) => {
            this.imageWidth = value
          })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Center)
    }
    .height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94