鸿蒙开发-UI-布局

鸿蒙开发-UI-布局-线性布局

鸿蒙开发-UI-布局-层叠布局

鸿蒙开发-UI-布局-弹性布局

鸿蒙开发-UI-布局-相对布局

鸿蒙开发-UI-布局-格栅布局

鸿蒙开发-UI-布局-列表

​​​​​​鸿蒙开发-UI-布局-网格

鸿蒙开发-UI-布局-轮播

前言

一、按钮

1.创建按钮

2.设置按钮样式

3.自定义样式

4.添加事件

5.常用场景

二、单选框

1.创建单选框

2.添加事件

3.常用场景

三、切换按钮

1.创建切换按钮

2.自定义样式

3.添加事件

4.常用场景

总结

---

前言

上文我们学习了解轮播布局使用的Swiper组件，了解组件的布局约束，详细学习了轮播容器组件的相关应用特性（循环播放、自动播放、导航样式自定义、轮播方向控制、轮播页面控制、单页面多组件控制），本文将学习鸿蒙开发UI相关的常用组件。

一、按钮

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

1.创建按钮

1. 创建不含子组件的按钮调用接口：

//注：创建不包含子组件的按钮
Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })

代码示例：

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

UI渲染效果：

2. 创建包含子组件的按钮调用接口：

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

代码示例：

Button({ type: ButtonType.Normal, stateEffect: true }) {
//button组件包含一个Row组件作为子组件，Row组件定义Image组件和Text组件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)

UI渲染效果：

2.设置按钮样式

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

Capsule：按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角

Circle：按钮为圆形，不支持通过borderRadius属性重新设置圆角

Normal：按钮默认圆角为0，支持通过borderRadius属性重新设置圆角

按钮类型	设置方式	UI渲染效果
Capsule	Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
Circle	Button('Circle', { type: ButtonType.Circle, stateEffect: false })
Normal	Button('Ok', { type: ButtonType.Normal, stateEffect: true })

3.自定义样式

自定义样式	设置方式
设置边框弧度	Button('circle border', { type: ButtonType.Normal })    .borderRadius(20)//通过borderRadius属性设置按钮边框弧度   .height(40) UI渲染
设置文本样式	Button('font style', { type: ButtonType.Normal })   .fontSize(20)    .fontColor(Color.Pink)    .fontWeight(800) //通过fontSize、fontColor、fontWeight设置文本的大小、颜色、粗细 UI渲染
设置背景颜色	Button('background color').backgroundColor(0xF55A42) //通过backgroundColor属性设置按钮的背景颜色 UI渲染
功能型按钮	Button({ type: ButtonType.Circle, stateEffect: true }) {   Image($r('app.media.ic_public_delete_filled')).width(30).height(30)  }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) UI渲染

4.添加事件

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

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .onClick(()=>{ console.info('Button onClick') })
//注意：button添加点击实际，当点击按钮，控制台输入'Button onClick'字符串

5.常用场景

1.用于页面跳转，当点击按钮跳转到指定新页面

2.用于表单提交，当点击按钮向后端服务器发送请求

3.用于可滑动界面的悬浮按钮，当点击可以快速定位到滑动界面的顶部或底部

二、单选框

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

1.创建单选框

1.创建Radio调用接口

Radio(options: {value: string, group: string})

该接口用于创建一个单选框，其中value是单选框的名称，group是单选框的所属群组名称。checked属性：可以设置单选框的状态，设置为true时表示单选框被选中。

Radio仅支持选中和未选中两种样式，不支持自定义颜色和形状

代码示例：

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

UI渲染效果：

2.添加事件

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

  Radio({ value: 'Radio1', group: 'radioGroup' }).onChange((isChecked: boolean) => {if(isChecked) {//注：这里定义单选框Radio1选择执行操作}})Radio({ value: 'Radio2', group: 'radioGroup' }).onChange((isChecked: boolean) => {if(isChecked) {//注：这里定义单选框Radio2选择执行操作}})

3.常用场景

1.用于单选的场景

三、切换按钮

1.创建切换按钮

Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换

1.创建Toggle调用接口

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

ToggleType为开关类型，包括Button、Checkbox和Switch，isOn为切换按钮的状态

2.ToggleType为Checkbox或者Switch时，创建的Toggle不包含子组件

ToggleType	代码示例	UI渲染
Checkbox	Toggle({ type: ToggleType.Checkbox, isOn: false }) Toggle({ type: ToggleType.Checkbox, isOn: true })
Switch	Toggle({ type: ToggleType.Switch, isOn: false }) Toggle({ type: ToggleType.Switch, isOn: true })

3.ToggleType为Button时，创建的Toggle包含子组件，只能包含一个

注：如果子组件有文本设置，则相应的文本内容会显示在按钮内部

Toggle({ type: ToggleType.Button, isOn: false }) {Text('status button').fontColor('#182431').fontSize(12)
}.width(100)
Toggle({ type: ToggleType.Button, isOn: true }) {Text('status button').fontColor('#182431').fontSize(12)
}.width(100)

UI渲染效果：

2.自定义样式

自定义样式	描述	代码示例
selectedColor属性	设置Toggle打开选中后的背景颜色	Toggle({ type: ToggleType.Button, isOn: true }) {   Text('status button')   .fontColor('#182431')   .fontSize(12) }.width(100).selectedColor(Color.Pink) Toggle({ type: ToggleType.Checkbox, isOn: true })   .selectedColor(Color.Pink) Toggle({ type: ToggleType.Switch, isOn: true })   .selectedColor(Color.Pink) UI渲染：
switchPointColor属性	设置Switch类型的圆形滑块颜色，仅对type为ToggleType.Switch生效	Toggle({ type: ToggleType.Switch, isOn: false })   .switchPointColor(Color.Pink) Toggle({ type: ToggleType.Switch, isOn: true })   .switchPointColor(Color.Pink) UI渲染

3.添加事件

Toggle通常用于选中和取消选中后触发某些操作，可以绑定onChange事件来响应操作后的自定义行为

Toggle({ type: ToggleType.Switch, isOn: false }).onChange((isOn: boolean) => {if(isOn) {//注：当被选中后定义执行操作}})

4.常用场景

常用于切换某种功能的开关状态

---

总结

本文学习了鸿蒙开发UI相关的常用组件，包括按钮组件、单选组件、切换组件，详细学习了每种组件的创建方式，样式调整，监听事件以及常见的使用场景，下文继续学习鸿蒙开发UI相关的其他常用组件。