六、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，可选的枚举值有

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枚举类型进行设置，可选的枚举值如下

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枚举类型，可选的枚举值有

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技术”,关注我,带你看不一样的人间烟火！