HarmonyOS 基础之 UI组件 （二）

发布时间：2025-11-05 02:40:08 来源：创站工坊 作者：应用开发

想了解更多内容，组件请访问：

和华为官方合作共建的组件鸿蒙技术社区

https://harmonyos.51cto.com

概述

上一篇【HarmonyOS 基础之 UI 布局(一)】我们一起学习了HarmonyOS的常用 UI 布局和一些基础属性，一个界面除了UI布局，组件组件也是组件非常重要的组成部分。HarmonyOS的组件 UI 常见组件分为显示类和交互类。显示类负责文本图像显示，组件交互类负责交互响应功能。组件组件的组件具体使用场景，需要根据业务需求来选择使用。组件今天这篇文章我将跟大家分享一下常见组件的组件使用场景和特性。

常见组件

根据组件的组件功能，可以将组件分为显示类、组件交互类：

1. Text

Text是组件用来显示字符串的组件，在界面上显示为一块文本区域。组件

在layout目录下的组件xml文件中创建Text。

可以根据不同需要，给Text添加各种属性值。常用的背景如常见的文本背景、按钮背景，可以采用XML格式放置在graphic目录下。如：创建“background_text.xml”，IT技术网在“background_text.xml”中定义文本的背景。

2. Image

Image 是用来显示图片的组件。

2.1 创建 Image

在 src -> main -> resources -> base -> media，添加一个图片至media文件夹下，既可以在XML中创建 Image，也可以在代码中创建 Image。

2.2 缩放 Image

2.3 裁剪 Image

当 Image 尺寸小于图片尺寸时，可以对图片进行裁剪，仍以 Image 的宽高为 200 vp 为例，小于图片尺寸。以左对齐裁剪为例，设置 clip_alignment = “256”。

3. ProgressBar

ProgressBar 用于显示内容或操作的进度。

如上图，进度条展示效果如下：

4. Button

Button是一种常见的组件，点击可以触发对应的操作，通常由文本或图标组成，也可以由图标和文本共同组成。

4.1 背景样式

如上布局xml文件中可以设置 Button 字体大小，文字内容，文字格式，背景等。免费源码下载其中背景可以在 graphic 文件夹下自定义需要的背景风格。

例如：background_button.xml;

复制通过在 graphic 文件夹下自定义 Button 样式文件，可以自定义不同类型的 Button，按照 Button 的形状，按钮可以分为：普通，椭圆，胶囊，圆形等。

4.2 点击事件

用户点击Button时，Button对象将收到一个点击事件，然后自定义响应点击事件的方法。如：通过创建一个 Component.ClickedListener 对象，然后通过调用 setClickedListener 将其分配给按钮，再收到该点击事件后，执行相应操作对该事件做出响应。

5. Picker

Picker 提供了滑动选择器，允许用户从预定义范围中进行选择。常见的 Picker 有 DatePicker ( 选择日期 ) 和 TimePicker ( 选择时间 )。

根据 xml 布局文件配置自己需要的 Picker 种类，显示效果如下：

Picker

DatePicker

TimePicker

6. Switch

Switch是切换单个设置开/关两种状态的组件。

Switch相当于一个双相开关，点击开关的时候会进行切换，效果如下：

7. RadioButton

RadioButton 是亿华云用于多选一操作的组件，需要搭配 RadioContainer 使用，实现单选效果，RadioContainer 是 RadioButton 的容器，在其包裹下的 RadioButton 保证只有一个被选项。

选中状态

未选中状态

以上两张图为 RadioButton 的选中与未选中的状态对比。

8. Checkbox

Checkbox可以实现选中和取消选中的功能。

xml 布局文件中创建 Checkbox 组件，显示效果如下：

9. TextField

TextField 是一种文本输入框。

在代码中，我们也可以对文本输入框设置响应事件。

10. ToastDialog

ToastDialog 是在窗口上方弹出的对话框，是通知操作的简单反馈。ToastDialog 会在一段时间后消失，在此期间，用户还可以操作当前窗口的其他组件。

在代码中创建 ToastDialog。

自定义布局 Resource 文件 Layout_layout_toast.xml 内容如下：

11. ScrollView

ScrollView 是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。

12. ListContainer

ListContainer 是用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。

首先需要在 layout 目录下的 xml 布局文件中创建 ListContainer。

 然后在 layout 目录下新建 xml 文件(例：item_listContainer.xml)，作为 ListContainer 的子布局。

ListContainer 每一行可以为不同的数据，因此需要适配不同的数据结构，使其都能添加到 ListContainer 上。

创建 ListcontainerItemProvider.java，继承自RecycleItemProvider。

ListContainer 的样式设置

看看效果：

13. PageSlider

PageSlider 是一个交互类组件。

main_pageSlider.xml

pageSlider1.xml

pageSlider2.xml

然后启动程序看一下控件效果:

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

相关文章