KaihongOS操作系统：Button按钮组件介绍

Button

按钮组件，可快速创建不同样式的按钮。
常用接口

Button

Button(options: ButtonOptions)
创建可以包含单个子组件的按钮。
参数：
[tr]参数名类型必填说明[/tr]

options

ButtonOptions

是

配置按钮的显示样式。

Button

Button(label: ResourceStr, options?: ButtonOptions)
使用文本内容创建相应的按钮组件，此时Button无法包含子组件。
文本内容默认单行显示。
参数：
[tr]参数名类型必填说明[/tr]

label	ResourceStr	是	按钮文本内容。
options	ButtonOptions	否	配置按钮的显示样式。

常用属性

[tr]名称参数类型描述[/tr]

type	ButtonType	设置Button样式。 默认值：ButtonType.Capsule 从API version 9开始，该接口支持在ArkTS卡片中使用。
fontSize	Length	文本显示字号。 默认值：若controlSize的值为：controlSize.NORMAL，取’16fp’，若controlSize的值为：controlSize.SMALL，取’12fp’
fontColor	ResourceColor	设置文本显示颜色。 默认值：‘#ffffff’
fontWeight	FontWeight | number | string	设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，取值越大，字体越粗。 默认值：400 | FontWeight.Normal
fontStyle	FontStyle	设置文本的字体样式。 默认值：FontStyle.Normal。
fontFamily	Resource | string	字体列表。 默认字体’HarmonyOS Sans’，当前支持’HarmonyOS Sans’字体和注册自定义字体。

Demo示例: Button与点击事件

• 添加Button按钮，并设置大小和样式，点击按钮时上方的数字增加。
  

@Entry@Componentstruct ButtonExample {  @State count: number = 0  build() {    Row() {      Column() {        Text(`${this.count}`)          .fontSize(50)        Button('Click +1', { type: ButtonType.Capsule, stateEffect: true })          .fontSize(30)          .width("50%")          .height("10%")          .onClick(() => {            this.count++            console.info("Index count: " + this.count)          })      }.width('100%')    }.height('100%')  }}

• 预览查看效果。
  

关于Button更详细用法