得意犹堪夸世俗，诏黄新湿字如鸦。这篇文章主要讲述HarmonyOS 基础之 UI组件 相关的知识，希望能为你提供帮助。
作者：陈潘
概述
上一篇【HarmonyOS 基础之 UI 布局（一）】我们一起学习了HarmonyOS的常用 UI 布局和一些基础属性，一个界面除了UI布局，组件也是非常重要的组成部分。HarmonyOS的 UI 常见组件分为显示类和交互类。显示类负责文本图像显示，交互类负责交互响应功能。组件的具体使用场景，需要根据业务需求来选择使用。今天这篇文章我将跟大家分享一下常见组件的使用场景和特性。
常见组件
根据组件的功能，可以将组件分为显示类、交互类：

组件类别	组件名称	功能描述
显示类	Text、Image、ProgressBar	提供了单纯的内容显示，例如用于文本显示的Text，用于图像显示的Image等。
交互类	Button、Picker、Switch、RadioButton、Checkbox、TextField、ToastDialog、ScrollView、ListContainer、PageSlider	提供了具体场景下与用户交互响应的功能，例如Button提供了点击响应功能，Slider提供了进度选择功能等。

1. TextText是用来显示字符串的组件，在界面上显示为一块文本区域。
在layout目录下的xml文件中创建Text。

< Text ohos:id="$+id:text" ohos: ohos: ohos:text="Text" />

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

< ?xml version="1.0" encoding="utf-8"?> < shape xmlns:ohos="http://schemas.huawei.com/res/ohos" //背景形状，oval椭圆，rectangle方形... ohos:shape="rectangle"> < corners //背景圆角程度 ohos:radius="20"/> < solid //背景颜色 ohos:color="#878787"/> < /shape>

2. ImageImage 是用来显示图片的组件。
2.1 创建 Image在 src -> main -> resources -> base -> media，添加一个图片至media文件夹下，既可以在XML中创建 Image，也可以在代码中创建 Image。

< Image ohos:id="$+id:image" ohos: ohos: ohos:layout_alignment="center" ohos:image_src="https://www.songbingjia.com/android/$media:plant" //设置透明度 ohos:alpha="0.5" />

Image image = new Image(getContext()); image.setPixelMap(ResourceTable.Media_plant);

2.2 缩放 Image

ohos:image_src="https://www.songbingjia.com/android/$media:plant" //设置缩放方式 ohos:scale_mode="zoom_center" //设置缩放系数 ohos:scale_x="0.5" ohos:scale_y="0.5"

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

裁剪方式	值
左对齐裁剪。	left
右对齐裁剪。	right
顶部对齐裁剪。	top
底部对齐裁剪。	bottom
居中裁剪。	center

3. ProgressBarProgressBar 用于显示内容或操作的进度。

< ProgressBar ohos:progress_ ohos: ohos: //设置进度条方向为水平，（ vertical 为水平） ohos:orientation="horizontal" //设置最大值最小值 ohos:max="100" ohos:min="0" //设置当前进度 ohos:progress="60" //设置进度条颜色 ohos:progress_element="#FF9900" //设置进度条组件底色 ohos:background_instruct_element="#F23456" //设置分割线 ohos:divider_lines_enabled="true" ohos:divider_lines_number="5" //设置提示文字以及提示文字颜色 ohos:progress_hint_text="60%" ohos:progress_hint_text_color="#FF4989" />

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

文章图片

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

< Button ohos:id="$+id:button" ohos: ohos: ohos:text_size="27fp" ohos:text="button" ohos:background_element="$graphic:background_button" ohos:left_margin="15vp" ohos:bottom_margin="15vp" ohos:right_padding="8vp" ohos:left_padding="8vp" />

4.1 背景样式如上布局xml文件中可以设置 Button 字体大小，文字内容，文字格式，背景等。其中背景可以在 graphic 文件夹下自定义需要的背景风格。
例如：background_button.xml；

< ?xml version="1.0" encoding="utf-8"?> < shape xmlns:ohos="http://schemas.huawei.com/res/ohos" //设置控件形状为方形 ohos:shape="rectangle"> < corners //背景圆角程度 ohos:radius="10"/> < solid //背景背景颜色 ohos:color="#007CFD"/> < /shape>

ohos:background_element="$graphic:oval_button_element"

通过在 graphic 文件夹下自定义 Button 样式文件，可以自定义不同类型的 Button，按照 Button 的形状，按钮可以分为：普通，椭圆，胶囊，圆形等。
4.2 点击事件用户点击Button时，Button对象将收到一个点击事件，然后自定义响应点击事件的方法。如：通过创建一个 Component.ClickedListener 对象，然后通过调用 setClickedListener 将其分配给按钮，再收到该点击事件后，执行相应操作对该事件做出响应。

Button button = (Button) findComponentById(ResourceTable.Id_button); // 为按钮设置点击事件回调 button.setClickedListener(new Component.ClickedListener() { public void onClick(Component v) { // 此处添加点击按钮后的事件处理逻辑 } });

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

< Picker ohos: ohos: ohos:top_margin="60vp" ohos:selected_text_size="40vp" ohos:normal_text_size="20vp" ohos:layout_alignment="center" />

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

文章图片

DatePicker

文章图片

TimePicker

文章图片

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

< Switch ohos: ohos: ohos:layout_alignment="center" ohos:top_margin="60vp" />

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

文章图片

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

< RadioButton ohos:id="$+id:harmony_UI" ohos:top_margin="60vp" ohos: ohos: ohos:text="Hello Harmony" ohos:layout_alignment="center" ohos:text_size="20fp" //字体颜色，text_color_onon 为选中状态，text_color_off 为未选中状态 ohos:text_color_on="#00BFFF" ohos:text_color_off="#808080" />

选中状态

文章图片
未选中状态

文章图片

以上两张图为 RadioButton 的选中与未选中的状态对比。
8. CheckboxCheckbox可以实现选中和取消选中的功能。

< Checkbox ohos:top_margin="60vp" ohos:layout_alignment="center" ohos:id="$+id:check_box" ohos: ohos: ohos:text="harmony checkbox" ohos:text_color_on="#00AAEE" ohos:text_color_off="#000000" ohos:text_size="20fp" />

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

文章图片

9. TextFieldTextField 是一种文本输入框。

< TextField ohos: ohos: //设置提示语 ohos:hint="Please enter......" //设置内边距 ohos:left_padding="24vp" ohos:right_padding="24vp" ohos:top_padding="8vp" ohos:bottom_padding="8vp" //设置可多行显示 ohos:multiple_lines="true" />

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

textField.setFocusChangedListener(((component, isFocused) -> { if (isFocused) { // 获取到焦点 ... }else { // 失去焦点 ... } }));

10. ToastDialogToastDialog 是在窗口上方弹出的对话框，是通知操作的简单反馈。ToastDialog 会在一段时间后消失，在此期间，用户还可以操作当前窗口的其他组件。
在代码中创建 ToastDialog。
自定义布局 Resource 文件 Layout_layout_toast.xml 内容如下：

< ?xml version="1.0" encoding="utf-8"?> < DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos: ohos: ohos:orientation="vertical"> < Text ohos:id="$+id:msg_toast" ohos: ohos: ohos:left_padding="16vp" ohos:right_padding="16vp" ohos:top_padding="4vp" ohos:bottom_padding="4vp" ohos:layout_alignment="center" ohos:text_size="16fp" ohos:text="This is a ToastDialog for the customized component" ohos:background_element="$graphic:background_toast_element"/> < /DirectionalLayout>

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

< ScrollView ohos:id="$+id:scrollview" ohos: ohos: ohos:background_element="#FFDEAD" ohos:top_margin="32vp" ohos:bottom_padding="16vp" ohos:layout_alignment="horizontal_center"> < DirectionalLayout ohos: ohos:> < Image ohos:id="$+id:img_1" ohos: ohos: ohos:top_margin="16vp" ohos:image_src="https://www.songbingjia.com/android/$media:dog.png"/> < !--放置任意需要展示的组件--> < /DirectionalLayout> < /ScrollView>

12. ListContainerListContainer 是用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。
首先需要在 layout 目录下的 xml 布局文件中创建 ListContainer。

< ?xml version="1.0" encoding="utf-8"?> < ListContainer xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:id="$+id:list_container" ohos: ohos: ohos:layout_alignment="horizontal_center"/>

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

< ?xml version="1.0" encoding="utf-8"?> < DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos: ohos: ohos:left_margin="16vp" ohos:right_margin="16vp" ohos:orientation="vertical"> < Text ohos:id="$+id:item_index" ohos: ohos: ohos:padding="4vp" ohos:text="Item0" ohos:text_size="20fp" ohos:layout_alignment="center"/> < /DirectionalLayout>

ListContainer 每一行可以为不同的数据，因此需要适配不同的数据结构，使其都能添加到 ListContainer 上。
创建 ListcontainerItemProvider.java，继承自RecycleItemProvider。

方法名	作用
int getCount()	返回填充的表项个数
Object getItem(int position)	根据position返回对应的数据
long getItemId(int position)	返回某一项的ID
Component getComponent(int position, Component covertComponent,ComponentContainer componentContainer)	根据position返回对应的界面组件

ListContainer 的样式设置

属性	java方法	作用
orientation	setOrientation(int orientation)	设置布局方向
-	setContentStartOffSet(int startOffset)	设置列表容器的开始和结束偏移量
-	setContentEndOffSet(int endOffset)	-
-	setContentOffSet(int startOffset, int endOffset)	-
rebound_effect	setReboundEffect(boolean enabled)	设置是否启用回弹效果
-	setReboundEffectParams(int overscrollPercent, float overscrollRate, int remainVisiblePercent)	设置回弹效果参数
-	setReboundEffectParams(ListContainer.ReboundEffectParams reboundEffectParams)	-
shader_color	setShaderColor(Color color)	设置着色器颜色

看看效果：

文章图片

13. PageSliderPageSlider 是一个交互类组件。
main_pageSlider.xml

< ?xml version="1.0" encoding="UTF-8"?> < DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos: ohos: ohos:background_element="blue" ohos:orientation="vertical"> < PageSlider ohos:id="$+id:pager_slider" ohos: ohos: ohos:background_element="#ffffff" ohos:weight="1"/> < RadioContainer ohos:id="$+id:radio_container" ohos: ohos: ohos:alignment="horizontal_center" ohos:orientation="horizontal"> < RadioButton ohos: ohos: ohos:text_size="20fp" /> < RadioButton ohos: ohos: ohos:text_size="20fp" /> < /RadioContainer> < /DirectionalLayout>

pageSlider1.xml

< ?xml version="1.0" encoding="utf-8"?> < DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos: ohos:> < Text ohos: ohos: ohos:center_in_parent="true" ohos:text="PageSlider1" ohos:text_size="25fp"/> < /DependentLayout>

pageSlider2.xml

< ?xml version="1.0" encoding="utf-8"?> < DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos: ohos:> < Text ohos: ohos: ohos:center_in_parent="true" ohos:text="PageSlider2" ohos:text_size="25fp"/> < /DependentLayout>

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

文章图片


文章图片

更多原创内容请关注：开鸿 HarmonyOS 学院
入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。
【本文正在参与51CTO HarmonyOS技术社区创作者激励-星光计划1.0】
想了解更多关于鸿蒙的内容，请访问：
51CTO和华为官方战略合作共建的鸿蒙技术社区
https://harmonyos.51cto.com/#bkwz
::: hljs-center

文章图片

【HarmonyOS 基础之 UI组件】:::

推荐阅读

• 

  nmap指令分析,端口扫描nmap属于动态分析吗
• 

  销售数据分析有哪些
• 

  系统的使用和维护分析
• 

  芍药什么时候种合适 芍药什么时候种
• 

  省下你的钱，又能延长打印机使用寿命 ip2880废墨清零技巧大揭秘
• 

  刘莐（感受到冷，才能看到风口）
• 

  好看的历史漫画书 历史是个什么玩意儿
• 

  消除眼袋黑眼圈最好的办法 深度黑眼圈如何去除
• 

  怎么评价20日RNG对阵FPX的比赛输掉第一局后,走A怪上场,还选出了德莱文？
• 

  微小说
• 

  如何以最优惠的价格购买云服务器？ 云服务器怎么抢购便宜
• 

  sonos|满足音乐发烧友需求，Sonos音响品牌在中国推出两款新品
• 

  影视行业缴纳什么税 电影院税收有哪些，税收怎么算
• 

  兴盛优选是送货上门还是自提
• 

  与现实保持一致的功能设计
• 

  在县城怎么创业？
• 

  农场简笔画 农场简笔画怎么画
• 

  铝锅蒸包子有毒吗
• 

  胡萝卜山药西红柿可以一起炖吗
• 

  秋梨膏

• 技术分享| 音视频多频道使用的正确姿势
• “不出户，知天下”，3D可视化的智慧应用
• VRRP实验
• VMware Tanzu社区版初体验
• HGDB企业版V6逻辑复制搭建
• ACL理论及配置
• 5款国产开源低代码开发平台推荐
• 链路聚合
• C++类和对象--多态