鸿蒙开发-UI-组件

最新推荐文章于 2024-05-23 23:36:29 发布

鸿蒙布道

最新推荐文章于 2024-05-23 23:36:29 发布

阅读量1.4k

点赞数 37

分类专栏：鸿蒙开发文章标签： harmonyos ui 华为

本文链接：https://blog.csdn.net/u013488266/article/details/135850481

版权

鸿蒙开发专栏收录该内容

42 篇文章 6 订阅

订阅专栏

鸿蒙开发-UI-布局

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

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

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

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

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

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

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

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

文章目录

前言

上文我们学习了解轮播布局使用的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相关的其他常用组件。

鸿蒙布道

关注

37
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙开发-UI-组件

上文我们学习了解轮播布局使用的Swiper组件，了解组件的布局约束，详细学习了轮播容器组件的相关应用特性（循环播放、自动播放、导航样式自定义、轮播方向控制、轮播页面控制、单页面多组件控制），本文将学习鸿蒙开发UI相关的常用组件。自定义样式设置方式设置边框弧度.borderRadius(20)//通过borderRadius属性设置按钮边框弧度UI渲染设置文本样式//通过fontSize、fontColor、fontWeight设置文本的大小、颜色、粗细UI渲染设置背景颜色。
复制链接

扫一扫