鸿蒙开发-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 }) UI渲染
|
| 设置文本样式 | Button('font style', { type: ButtonType.Normal }) UI渲染
|
| 设置背景颜色 | Button('background color').backgroundColor(0xF55A42) UI渲染
|
| 功能型按钮 | Button({ type: ButtonType.Circle, stateEffect: true }) { 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 }) { UI渲染：
|
| switchPointColor属性 | 设置Switch类型的圆形滑块颜色，仅对type为ToggleType.Switch生效 | Toggle({ type: ToggleType.Switch, isOn: false }) UI渲染
|
3.添加事件
Toggle通常用于选中和取消选中后触发某些操作，可以绑定onChange事件来响应操作后的自定义行为
Toggle({ type: ToggleType.Switch, isOn: false })
.onChange((isOn: boolean) => {
if(isOn) {
//注：当被选中后定义执行操作
}
})4.常用场景
常用于切换某种功能的开关状态
总结
本文学习了鸿蒙开发UI相关的常用组件，包括按钮组件、单选组件、切换组件，详细学习了每种组件的创建方式，样式调整，监听事件以及常见的使用场景，下文继续学习鸿蒙开发UI相关的其他常用组件。
