六、ArkTS 常用组件-按钮（Button）/切换按钮（Toggle）/文本输出（TextInput）

六、ArkTS 常用组件-按钮（Button）/切换按钮（Toggle）/文本输出（TextInput）

按钮

1. 概述

Button为按钮组件，通常用于响应用户的点击操作。

地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-button-V13

2. 参数

Button组件有两种使用方式，分别是不包含子组件和包含子组件，两种方式下，Button 组件所需的参数有所不同，下面分别介绍

• 不包含子组件

不包含子组件时，Button组件所需的参数如下

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

• label

label为按钮上显示的文字内容。

• options.type

options.type为按钮形状，该属性的类型ButtonType，可选的枚举值有

名称	描述	效果
ButtonType.Capsule	胶囊形状
ButtonType.Circle	圆形
ButtonType.Normal	普通形状

 Button('Capsule').type(ButtonType.Capsule).width(100)
 Button('Circle').type(ButtonType.Circle).width(100)
 Button('Normal').type(ButtonType.Normal).width(100)

• options.stateEffect

        Button('测试')
          .stateEffect(true)
          .type(ButtonType.Capsule)
          .width(100)
  

options.stateEffect表示是否开启点击（按压态）效果，点击效果如下

• 包含子组件

子组件会作为按钮上显示的内容，可以是图片、文字等。这种方式下，Button组件就不在需要label参数了，具体如下

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

Button('测试-Normal', { type: ButtonType.Normal, stateEffect: true })
  .stateEffect(true)
  .width(100)

3. 常用属性

3.1. 背景颜色

按钮的颜色可使用backgroundColor()方法进行设置，例如

Button('绿色按钮').backgroundColor(Color.Green)

3.2. 边框圆角

按钮的边框圆角大小可使用borderRadius()方法进行设置，例如

Button('圆角按钮', { type: ButtonType.Normal }).borderRadius(10)

4. 常用事件

对于Button组件而言，最为常用的就是点击事件，可以通过onClick()方法为按钮绑定点击事件，该方法的参数为一个回调函数，当按钮被点击时，就会触发该回调函数，例如

Button('点击事件').onClick(() => {
  console.log('我被点击了')
})

切换按钮

1. 概述

地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-toggle-V13

**Toggle**为切换按钮组件，一般用于两种状态之间的切换，例如下图中的蓝牙开关。

2. 参数

Toggle组件的参数定义如下

Toggle(options: { type: ToggleType, isOn?: boolean })

• type

type属性用于设置Toggle组件的类型，可通过ToggleType枚举类型进行设置，可选的枚举值如下

名称	描述	效果
ToggleType.Switch	开关
ToggleType.Checkbox	单选框样式
ToggleType.Button	按钮

Toggle({ type: ToggleType.Switch })

Toggle({ type: ToggleType.Checkbox })

Toggle({ type: ToggleType.Button }) {
  Text('Toggle-Button').fontColor(Color.White)
}.backgroundColor(Color.Green).width(120)

• isOn

isOn属性用于设置Toggle组件的状态，例如

          Column() {
            Toggle({ type: ToggleType.Switch })

            Toggle({ type: ToggleType.Checkbox })

            Toggle({ type: ToggleType.Button }) {
              Text('Toggle-Button').fontColor(Color.White)
            }.backgroundColor(Color.Gray).width(120)
          }

          Column() {
            Toggle({ type: ToggleType.Switch, isOn: true })

            Toggle({ type: ToggleType.Checkbox, isOn: true })

            Toggle({ type: ToggleType.Button, isOn: true }) {
              Text('Toggle-Button').fontColor(Color.White)
            }.backgroundColor(Color.Gray).width(120)
          }

3. 常用属性：

3.1. 选中状态背景色

可使用selectedColor()方法设置Toggle组件在选中（或打开）状态下的背景色，例如

Toggle({ type: ToggleType.Switch, isOn: true })
.selectedColor(Color.Green)

Toggle({ type: ToggleType.Checkbox, isOn: true })
.selectedColor(Color.Green)

Toggle({ type: ToggleType.Button, isOn: true }) {
Text('Toggle-Button').fontColor(Color.White)
}.backgroundColor(Color.Gray)
.selectedColor(Color.Green)

3.2. Swtich滑块颜色

可使用设置switchPointColor()方法设置Switch类型的Toggle组件中的圆形滑块颜色，例如

  Toggle({ type: ToggleType.Switch })
            .switchPointColor(Color.Orange)
            .width(80)
            .height(30)

4. 常用事件

Toggle组件常用的事件为change事件，每当Toggle组件的状态发生变化，就会触发change事件。开发者可通过onChange()方法为Toggle组件绑定change事件，该方法参数为一个回调函数，具体定义如下

onChange(callback: (isOn: boolean) => void)

当Toggle组件的状态由关闭切换为打开时，isOn为true，从打开切换为关闭时，isOn为false。

Toggle({ type: ToggleType.Switch }).width(80).height(30)
  .onChange((isOn) => {
    console.info('isOn: ' + isOn)
  })

文本输入

1. 概述

TextInput为文本输入组件，用于接收用户输入的文本内容。

地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-textinput-V13

2. 参数

TextInput组件的参数定义如下

TextInput(value?:{placeholder?: string|Resource , text?: string|Resource})

• placeholder

placeholder属性用于设置无输入时的提示文本，效果如下

TextInput({ placeholder: '请输入用户名' })

• text

text用于设置输入框当前的文本内容，效果如下

TextInput({ text: '用户名' })

3. 常用属性

3.1. 输入框类型

可通过type()方法设置输入框的类型，该方法的参数为InputType枚举类型，可选的枚举值有

名称	描述
InputType.Normal	基本输入模式
InputType.Password	密码输入模式
InputType.Number	纯数字输入模式

3.2. 光标样式

可通过caretColor()方法设置光标的颜色，效果如下

 TextInput()
      .type(InputType.Normal)
      .caretColor(Color.Red)

3.3. placeholder样式

可通过placeholderFont()和placeholderColor()方法设置 placeholder 的样式，其中placeholderFont()用于设置字体，包括字体大小、字体粗细等，placeholderColor()用于设置字体颜色，效果如下

TextInput({ placeholder: '请输入用户名' })
  .type(InputType.Normal)
  .placeholderColor(Color.Orange)

3.4. 文本样式

输入文本的样式可通过fontSize()、fontWeight()、fontColor()等通用属性方法进行设置。

 TextInput({ text: '用户名' })
          .type(InputType.Normal)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Red)

4. 常用事件

4.1. change事件

每当输入的内容发生变化，就会触发 change 事件，开发者可使用onChange()方法为TextInput组件绑定 change 事件，该方法的参数定义如下

onChange(callback: (value: string) => void)

其中value为最新内容。

  TextInput()
          .onChange((value) => {
            console.info('当前输出内容：' + value)
          })

4.2. 焦点事件

焦点事件包括获得焦点和失去焦点两个事件，当输入框获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件，开发者可使用onFocus()和onBlur()方法为 TextInput 组件绑定相关事件，两个方法的参数定义如下

onFocus(event: () => void)  
onBlur(event: () => void)

TextInput()
  .onChange((value) => {
    console.info('当前输出内容：' + value)
  })
  .onFocus(() => {
    console.info('获得焦点')
  })
  .onBlur(() => {
    console.info('失去焦点')
  })

公众号搜“Harry技术”,关注我,带你看不一样的人间烟火！