鸿蒙UI（ArkUI-方舟UI框架）- 添加组件

xianKOG

已于 2025-02-05 15:06:58 修改

阅读量175

点赞数 1

分类专栏：鸿蒙文章标签： harmonyos

于 2025-01-17 16:55:39 首次发布

本文链接：https://blog.youkuaiyun.com/xianKOG/article/details/145210774

版权

鸿蒙专栏收录该内容

8 篇文章

订阅专栏

返回主章节 → 鸿蒙UI（ArkUI-方舟UI框架）

添加组件

按钮（Button）

Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。

创建按钮

Button通过调用接口来创建，接口调用有以下两种形式：

创建不包含子组件的按钮
其中，label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

在这里插入图片描述

创建包含子组件的按钮

Button({ type: ButtonType.Normal, stateEffect: true }) {
  Row() {
    Image($r('app.media.loading')).width(20).height(40).margin({ left: 12 })
    Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
  }.alignItems(VerticalAlign.Center)
}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

在这里插入图片描述

设置按钮类型

Button有三种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle）和普通按钮（Normal），通过type进行设置。

胶囊类型（默认类型）

此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。
```
Button('默认样式',{type:ButtonType.Capsule, stateEffect:false})
	.backgroundColor(0x31aff)
	.widt(90)
	.height(90)
```

圆形按钮
此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。

Button('圆形按钮',{type:ButtonType.Circle, stateEffext: false})
	.backgroundColor(0x317aff)
	.width(90)
	.height(90)

在这里插入图片描述

普通按钮
此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

Button('普通按钮',{ type:ButtonType.Normal, stateEffect.true})
	.backgroundColor()
	.width()
	.height()

在这里插入图片描述

自定义样式

设置边框弧度
使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。
```
Button('circle border',{type:ButtonType.Normal})
	.borderRadius(20)
	.height(40)
```

设置文本样式

Button('',{type: ButtonType.Normal})
	.fontSize(20)
	.fontColor(Color.Pink)
	.fontHeight(800）

在这里插入图片描述

设置背景颜色
添加backgroundColor属性设置按钮的背景颜色。
```
Button('background color').backgroundColor(0xF55A42)
```

在这里插入图片描述

创建功能型按钮
为删除操作创建一个按钮

let MarLeft: Record<string,number> = {'left':20}
Button({type:ButtonType.Circle,stateEffect:true}){

	Image($r('app.media.ic_public_delete_filled')).width(30).height(30)

}.width(55).height(55).margin(MarLeft).backgroundColor(0xF55A42)

在这里插入图片描述

添加事件

Button组件通常用于触发某些操作，可以绑定onClick事件来响应点击操作后的自定义行为。

Button('OK',{type:ButtonType.Nomal,stateEffect:true})
	.onClick(()=>{
		console.info('Button onClick')
	})

场景示例

单选框 (Radio)

Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。

创建单选框

Radio({value:'Radio1',group:'radioGroup'})
	.checked(false)
Radio({value:'Radio2',group:'radioGroup'})
	.checked(true)

在这里插入图片描述

添加事件

除支持通用事件外，Radio还用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。

Radio({value:'Radio1',radioGroup:'radioGroup'})
	.onChange((isChecked:boolean)=>{
		if(isChhecked){
			// 需要执行相应操作
		}
	})
Radio({value:'Radio2',radioGroup:'radioGroup'})
	.onChange((isChecked:boolean)=>{
		if(isChhecked){
			// 需要执行相应操作
		}
	})