作者：陈潘
上一篇【HarmonyOS 基础之 UI 布局（一）】我们一起学习了HarmonyOS的常用 UI 布局和一些基础属性，一个界面除了UI布局，组件也是非常重要的组成部分。HarmonyOS的 UI 常见组件分为显示类和交互类。显示类负责文本图像显示，交互类负责交互响应功能。组件的具体使用场景，需要根据业务需求来选择使用。今天这篇文章我将跟大家分享一下常见组件的使用场景和特性。
根据组件的功能，可以将组件分为显示类、交互类：
组件类别
组件名称
功能描述
显示类
Text、Image、ProgressBar
提供了单纯的内容显示，例如用于文本显示的Text，用于图像显示的Image等。
交互类
Button、Picker、Switch、RadioButton、Checkbox、TextField、ToastDialog、ScrollView、ListContainer、PageSlider
提供了具体场景下与用户交互响应的功能，例如Button提供了点击响应功能，Slider提供了进度选择功能等。
Text是用来显示字符串的组件，在界面上显示为一块文本区域。
在layout目录下的xml文件中创建Text。
可以根据不同需要，给Text添加各种属性值。常用的背景如常见的文本背景、按钮背景，可以采用XML格式放置在graphic目录下。如：创建“background_text.xml”，在“background_text.xml”中定义文本的背景。
Image 是用来显示图片的组件。
在 src -> main -> resources -> base -> media，添加一个图片至media文件夹下，既可以在XML中创建 Image，也可以在代码中创建 Image。
当 Image 尺寸小于图片尺寸时，可以对图片进行裁剪，仍以 Image 的宽高为 200 vp 为例，小于图片尺寸。以左对齐裁剪为例，设置 clip_alignment = "256"。
裁剪方式
值
左对齐裁剪。
left
右对齐裁剪。
right
顶部对齐裁剪。
top
底部对齐裁剪。
bottom
居中裁剪。
center
ProgressBar 用于显示内容或操作的进度。
如上图，进度条展示效果如下：
Button是一种常见的组件，点击可以触发对应的操作，通常由文本或图标组成，也可以由图标和文本共同组成。
如上布局xml文件中可以设置 Button 字体大小，文字内容，文字格式，背景等。其中背景可以在 graphic 文件夹下自定义需要的背景风格。
例如：background_button.xml；
通过在 graphic 文件夹下自定义 Button 样式文件，可以自定义不同类型的 Button，按照 Button 的形状，按钮可以分为：普通，椭圆，胶囊，圆形等。
用户点击Button时，Button对象将收到一个点击事件，然后自定义响应点击事件的方法。如：通过创建一个 Component.ClickedListener 对象，然后通过调用 setClickedListener 将其分配给按钮，再收到该点击事件后，执行相应操作对该事件做出响应。
Picker 提供了滑动选择器，允许用户从预定义范围中进行选择。常见的 Picker 有 DatePicker ( 选择日期 ) 和 TimePicker ( 选择时间 )。
根据 xml 布局文件配置自己需要的 Picker 种类，显示效果如下：
Picker
DatePicker
TimePicker
Switch是切换单个设置开/关两种状态的组件。
Switch相当于一个双相开关，点击开关的时候会进行切换，效果如下：
RadioButton 是用于多选一操作的组件，需要搭配 RadioContainer 使用，实现单选效果，RadioContainer 是 RadioButton 的容器，在其包裹下的 RadioButton 保证只有一个被选项。
选中状态
未选中状态
以上两张图为 RadioButton 的选中与未选中的状态对比。
Checkbox可以实现选中和取消选中的功能。
xml 布局文件中创建 Checkbox 组件，显示效果如下：
TextField 是一种文本输入框。
在代码中，我们也可以对文本输入框设置响应事件。
ToastDialog 是在窗口上方弹出的对话框，是通知操作的简单反馈。ToastDialog 会在一段时间后消失，在此期间，用户还可以操作当前窗口的其他组件。
在代码中创建 ToastDialog。
自定义布局 Resource 文件 Layout_layout_toast.xml 内容如下：
ScrollView 是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。
ListContainer 是用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。
首先需要在 layout 目录下的 xml 布局文件中创建 ListContainer。
然后在 layout 目录下新建 xml 文件（例：item_listContainer.xml），作为 ListContainer 的子布局。
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)
设置着色器颜色
看看效果：
PageSlider 是一个交互类组件。
main_pageSlider.xml
pageSlider1.xml
pageSlider2.xml
然后启动程序看一下控件效果:
更多原创内容请关注：开鸿 HarmonyOS 学院
入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。
【本文正在参与51CTO HarmonyOS技术社区创作者激励-星光计划1.0】
想了解更多关于鸿蒙的内容，请访问：
51CTO和华为官方战略合作共建的鸿蒙技术社区
https://harmonyos.51cto.com/#bkwz
::: hljs-center
:::