鸿蒙Harmony（五）ArkUI---基础组件：Text、TextInput、Button、Slider_鸿蒙arkts textinput

Text组件

1.设置文案
Text（content?:string|Resource）

// string格式
Text('Hello world')
// resource资源格式，读取本地资源
 Text($r('app.string.hello'))
1
2
3
4

在资源文件中添加对应的文本资源
{
“name”: “hello”,
“value”: “hello world”
}
2.属性设置

  Text($r('app.string.Image_width'))
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#35D')
          .fontStyle(FontStyle.Italic)
          .decoration({type:TextDecorationType.Underline})
1
2
3
4
5
6

效果

TextInput组件

1.声明TextInput组件

TextInput({placeholder?:ResourceStr,text?:ResourceStr})
1

placeholder:输入框无输入时的提示文本
text：输入框当前的文本内容

2.添加属性和事件

      TextInput({ placeholder: '请输入图片宽度' })
            .type(InputType.Number) // 输入框类型
            .placeholderColor('#eeeeee')
            .backgroundColor('#f00')
            .fontColor('#35D')
            .fontSize(20)
            .onChange((value:String)=>{
              console.log("打印"+value)
            })
1
2
3
4
5
6
7
8
9

Button组

Button(options?: {type?: ButtonType, stateEffect?: boolean})
Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

type用于定义按钮样式，示例代码中ButtonType.Capsule表示胶囊形按钮；stateEffect用于设置按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭，默认值为true。

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++
              }
            })
            // button包裹子组件，含有图片的按钮
          Button({ type: ButtonType.Circle, stateEffect: true }) {
            Image($r('app.media.icon')).width(30).height(30)
          }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Slider组件

Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

 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
          })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16