六、ArkTS 常用组件-按钮（Button）/切换按钮（Toggle）/文本输出（TextInput）
六、ArkTS 常用组件-按钮（Button）/切换按钮（Toggle）/文本输出（TextInput）
六、ArkTS 常用组件-按钮（Button）/切换按钮（Toggle）/文本输出（TextInput）
- 按钮
- 1. 概述
- 2. 参数
- 3. 常用属性
- 4. 常用事件
- 切换按钮
- 1. 概述
- 2. 参数
- 3. 常用属性：
- 4. 常用事件
- 文本输入
- 1. 概述
- 2. 参数
- 3. 常用属性
- 4. 常用事件
按钮
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表示是否开启点击（按压态）效果，点击效果如下
img
- 包含子组件
子组件会作为按钮上显示的内容，可以是图片、文字等。这种方式下，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组件的状态，例如
image-20241210104719892
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技术”,关注我,带你看不一样的人间烟火！
腾讯云开发者
