HarmonyOS基础之UI组件（二）

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

十余年的灵台网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整灵台建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“灵台网站设计”,“灵台网站推广”以来，每个客户项目都认真落实执行。

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

https://harmonyos.

概述

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

常见组件

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

1. Text

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

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     ohos:id="$+id:text"
    3. 
  
  
  
  
  3.     ohos:width="match_content"
    4. 
  
  
  
  
  4.     ohos:height="match_content"
    5. 
  
  
  
  
  5.     ohos:text="Text"
    6. 
  
  
  
  
  6.     />
    7.

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     //背景形状，oval椭圆，rectangle方形...
    4. 
  
  
  
  
  4.     ohos:shape="rectangle">  
    5. 
  
  
  
  
  5.     
  
  
  
  
  6.         //背景圆角程度
    7. 
  
  
  
  
  7.         ohos:radius="20"/> 
    8. 
  
  
  
  
  8.     
  
  
  
  
  9.         //背景颜色
    10. 
  
  
  
  
  10.         ohos:color="#878787"/>
    11. 
  
  
  
  
  11.

2. Image

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

2.1 创建 Image

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     ohos:id="$+id:image"
    3. 
  
  
  
  
  3.     ohos:width="match_content"
    4. 
  
  
  
  
  4.     ohos:height="match_content"
    5. 
  
  
  
  
  5.     ohos:layout_alignment="center"
    6. 
  
  
  
  
  6.     ohos:image_src="$media:plant"
    7. 
  
  
  
  
  7.     //设置透明度
    8. 
  
  
  
  
  8.     ohos:alpha="0.5"
    9. 
  
  
  
  
  9. />
    10. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. Image image = new Image(getContext());
    2. 
  
  
  
  
  2. image.setPixelMap(ResourceTable.Media_plant);
    3.

2.2 缩放 Image

 
 
 
 
    
  
  
  
  
  1. ohos:image_src="$media:plant"
    2. 
  
  
  
  
  2.  //设置缩放方式
    3. 
  
  
  
  
  3.  ohos:scale_mode="zoom_center"
    4. 
  
  
  
  
  4.  //设置缩放系数
    5. 
  
  
  
  
  5.  ohos:scale_x="0.5"
    6. 
  
  
  
  
  6.  ohos:scale_y="0.5"
    7.

2.3 裁剪 Image

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

3. ProgressBar

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     ohos:progress_width="10vp"
    3. 
  
  
  
  
  3.     ohos:height="80vp"
    4. 
  
  
  
  
  4.     ohos:width="280vp"
    5. 
  
  
  
  
  5.     //设置进度条方向为水平，（ vertical 为水平）
    6. 
  
  
  
  
  6.     ohos:orientation="horizontal"
    7. 
  
  
  
  
  7.     //设置最大值最小值
    8. 
  
  
  
  
  8.     ohos:max="100"
    9. 
  
  
  
  
  9.     ohos:min="0"
    10. 
  
  
  
  
  10.     //设置当前进度 
    11. 
  
  
  
  
  11.     ohos:progress="60"
    12. 
  
  
  
  
  12.     //设置进度条颜色
    13. 
  
  
  
  
  13.     ohos:progress_element="#FF9900"
    14. 
  
  
  
  
  14.     //设置进度条组件底色
    15. 
  
  
  
  
  15.     ohos:background_instruct_element="#F23456"
    16. 
  
  
  
  
  16.     //设置分割线
    17. 
  
  
  
  
  17.     ohos:divider_lines_enabled="true"
    18. 
  
  
  
  
  18.     ohos:divider_lines_number="5"
    19. 
  
  
  
  
  19.     //设置提示文字以及提示文字颜色
    20. 
  
  
  
  
  20.     ohos:progress_hint_text="60%"
    21. 
  
  
  
  
  21.     ohos:progress_hint_text_color="#FF4989"
    22. 
  
  
  
  
  22.     />
    23.

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

4. Button

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     ohos:id="$+id:button"
    3. 
  
  
  
  
  3.     ohos:width="match_content"
    4. 
  
  
  
  
  4.     ohos:height="match_content"
    5. 
  
  
  
  
  5.     ohos:text_size="27fp"
    6. 
  
  
  
  
  6.     ohos:text="button"
    7. 
  
  
  
  
  7.     ohos:background_element="$graphic:background_button"
    8. 
  
  
  
  
  8.     ohos:left_margin="15vp"
    9. 
  
  
  
  
  9.     ohos:bottom_margin="15vp"
    10. 
  
  
  
  
  10.     ohos:right_padding="8vp"
    11. 
  
  
  
  
  11.     ohos:left_padding="8vp"
    12. 
  
  
  
  
  12.     />
    13.

4.1 背景样式

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

例如：background_button.xml;

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     //设置控件形状为方形
    4. 
  
  
  
  
  4.     ohos:shape="rectangle">
    5. 
  
  
  
  
  5.     
  
  
  
  
  6.         //背景圆角程度
    7. 
  
  
  
  
  7.         ohos:radius="10"/>
    8. 
  
  
  
  
  8.     
  
  
  
  
  9.         //背景背景颜色
    10. 
  
  
  
  
  10.         ohos:color="#007CFD"/>
    11. 
  
  
  
  
  11. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. ohos:background_element="$graphic:oval_button_element"
    2.

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

4.2 点击事件

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

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

5. Picker

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     ohos:height="match_content"
    3. 
  
  
  
  
  3.     ohos:width="160vp"
    4. 
  
  
  
  
  4.     ohos:top_margin="60vp"
    5. 
  
  
  
  
  5.     ohos:selected_text_size="40vp"
    6. 
  
  
  
  
  6.     ohos:normal_text_size="20vp"
    7. 
  
  
  
  
  7.     ohos:layout_alignment="center"
    8. 
  
  
  
  
  8.     />
    9.

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

Picker

DatePicker

TimePicker

6. Switch

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     ohos:height="60vp"
    3. 
  
  
  
  
  3.     ohos:width="120vp"
    4. 
  
  
  
  
  4.     ohos:layout_alignment="center"
    5. 
  
  
  
  
  5.     ohos:top_margin="60vp"
    6. 
  
  
  
  
  6.     />
    7.

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

7. RadioButton

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     ohos:id="$+id:harmony_UI"
    3. 
  
  
  
  
  3.     ohos:top_margin="60vp"
    4. 
  
  
  
  
  4.     ohos:height="40vp"
    5. 
  
  
  
  
  5.     ohos:width="match_content"
    6. 
  
  
  
  
  6.     ohos:text="Hello Harmony"
    7. 
  
  
  
  
  7.     ohos:layout_alignment="center"
    8. 
  
  
  
  
  8.     ohos:text_size="20fp"
    9. 
  
  
  
  
  9.     //字体颜色，text_color_onon 为选中状态，text_color_off 为未选中状态
    10. 
  
  
  
  
  10.     ohos:text_color_on="#00BFFF"
    11. 
  
  
  
  
  11.     ohos:text_color_off="#808080"
    12. 
  
  
  
  
  12.     />
    13.

选中状态

未选中状态

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

8. Checkbox

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     ohos:top_margin="60vp"
    3. 
  
  
  
  
  3.     ohos:layout_alignment="center"
    4. 
  
  
  
  
  4.     ohos:id="$+id:check_box"
    5. 
  
  
  
  
  5.     ohos:height="match_content"
    6. 
  
  
  
  
  6.     ohos:width="match_content"
    7. 
  
  
  
  
  7.     ohos:text="harmony checkbox"
    8. 
  
  
  
  
  8.     ohos:text_color_on="#00AAEE"
    9. 
  
  
  
  
  9.     ohos:text_color_off="#000000"
    10. 
  
  
  
  
  10.     ohos:text_size="20fp" />
    11.

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

9. TextField

TextField 是一种文本输入框。

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     ohos:height="40vp"
    3. 
  
  
  
  
  3.     ohos:width="200vp"
    4. 
  
  
  
  
  4.     //设置提示语
    5. 
  
  
  
  
  5.     ohos:hint="Please enter......"
    6. 
  
  
  
  
  6.     //设置内边距
    7. 
  
  
  
  
  7.     ohos:left_padding="24vp"
    8. 
  
  
  
  
  8.     ohos:right_padding="24vp"
    9. 
  
  
  
  
  9.     ohos:top_padding="8vp"
    10. 
  
  
  
  
  10.     ohos:bottom_padding="8vp"
    11. 
  
  
  
  
  11.     //设置可多行显示
    12. 
  
  
  
  
  12.     ohos:multiple_lines="true"
    13. 
  
  
  
  
  13.  />
    14.

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

 
 
 
 
    
  
  
  
  
  1. textField.setFocusChangedListener(((component, isFocused) -> {
    2. 
  
  
  
  
  2.     if (isFocused) { 
    3. 
  
  
  
  
  3.         // 获取到焦点
    4. 
  
  
  
  
  4.         ...
    5. 
  
  
  
  
  5.     }else { 
    6. 
  
  
  
  
  6.         // 失去焦点
    7. 
  
  
  
  
  7.         ...
    8. 
  
  
  
  
  8.     }
    9. 
  
  
  
  
  9. }));
    10.

10. ToastDialog

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

在代码中创建 ToastDialog。

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:height="match_content"
    5. 
  
  
  
  
  5.     ohos:width="match_content"
    6. 
  
  
  
  
  6.     ohos:orientation="vertical">
    7. 
  
  
  
  
  7.     
  
  
  
  
  8.         ohos:id="$+id:msg_toast"
    9. 
  
  
  
  
  9.         ohos:height="match_content"
    10. 
  
  
  
  
  10.         ohos:width="match_content"
    11. 
  
  
  
  
  11.         ohos:left_padding="16vp"
    12. 
  
  
  
  
  12.         ohos:right_padding="16vp"
    13. 
  
  
  
  
  13.         ohos:top_padding="4vp"
    14. 
  
  
  
  
  14.         ohos:bottom_padding="4vp"
    15. 
  
  
  
  
  15.         ohos:layout_alignment="center"
    16. 
  
  
  
  
  16.         ohos:text_size="16fp"
    17. 
  
  
  
  
  17.         ohos:text="This is a ToastDialog for the customized component"
    18. 
  
  
  
  
  18.         ohos:background_element="$graphic:background_toast_element"/>
    19. 
  
  
  
  
  19.

11. ScrollView

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     ohos:id="$+id:scrollview"
    3. 
  
  
  
  
  3.     ohos:height="300vp"
    4. 
  
  
  
  
  4.     ohos:width="300vp"
    5. 
  
  
  
  
  5.     ohos:background_element="#FFDEAD"
    6. 
  
  
  
  
  6.     ohos:top_margin="32vp"
    7. 
  
  
  
  
  7.     ohos:bottom_padding="16vp"
    8. 
  
  
  
  
  8.     ohos:layout_alignment="horizontal_center">
    9. 
  
  
  
  
  9.     
  
  
  
  
  10.         ohos:height="match_content"
    11. 
  
  
  
  
  11.         ohos:width="match_content">
    12. 
  
  
  
  
  12.         
  
  
  
  
  13.             ohos:id="$+id:img_1"
    14. 
  
  
  
  
  14.             ohos:width="300vp"
    15. 
  
  
  
  
  15.             ohos:height="match_content"
    16. 
  
  
  
  
  16.             ohos:top_margin="16vp"
    17. 
  
  
  
  
  17.             ohos:image_src="$media:dog.png"/>
    18. 
  
  
  
  
  18.         
    19. 
  
  
  
  
  19.     
    20. 
  
  
  
  
  20.

12. ListContainer

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

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
  
  
  
  
  3.         xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.         ohos:id="$+id:list_container"
    5. 
  
  
  
  
  5.         ohos:height="200vp"
    6. 
  
  
  
  
  6.         ohos:width="300vp"
    7. 
  
  
  
  
  7.         ohos:layout_alignment="horizontal_center"/>
    8.

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:height="match_content"
    5. 
  
  
  
  
  5.     ohos:width="match_parent"
    6. 
  
  
  
  
  6.     ohos:left_margin="16vp"
    7. 
  
  
  
  
  7.     ohos:right_margin="16vp"
    8. 
  
  
  
  
  8.     ohos:orientation="vertical">
    9. 
  
  
  
  
  9.     
  
  
  
  
  10.         ohos:id="$+id:item_index"
    11. 
  
  
  
  
  11.         ohos:height="match_content"
    12. 
  
  
  
  
  12.         ohos:width="match_content"
    13. 
  
  
  
  
  13.         ohos:padding="4vp"
    14. 
  
  
  
  
  14.         ohos:text="Item0"
    15. 
  
  
  
  
  15.         ohos:text_size="20fp"
    16. 
  
  
  
  
  16.         ohos:layout_alignment="center"/>
    17. 
  
  
  
  
  17.

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

创建 ListcontainerItemProvider.java，继承自RecycleItemProvider。

ListContainer 的样式设置

看看效果：

13. PageSlider

PageSlider 是一个交互类组件。

main_pageSlider.xml

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:height="match_parent"
    5. 
  
  
  
  
  5.     ohos:width="match_parent"
    6. 
  
  
  
  
  6.     ohos:background_element="blue"
    7. 
  
  
  
  
  7.     ohos:orientation="vertical">
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.     
  
  
  
  
  10.         ohos:id="$+id:pager_slider"
    11. 
  
  
  
  
  11.         ohos:height="0vp"
    12. 
  
  
  
  
  12.         ohos:width="match_parent"
    13. 
  
  
  
  
  13.         ohos:background_element="#ffffff"
    14. 
  
  
  
  
  14.         ohos:weight="1"/>
    15. 
  
  
  
  
  15. 
  
  
  
  
  16.     
  
  
  
  
  17.         ohos:id="$+id:radio_container"
    18. 
  
  
  
  
  18.         ohos:height="60vp"
    19. 
  
  
  
  
  19.         ohos:width="match_parent"
    20. 
  
  
  
  
  20.         ohos:alignment="horizontal_center"
    21. 
  
  
  
  
  21.         ohos:orientation="horizontal">
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.         
  
  
  
  
  24.             ohos:height="match_parent"
    25. 
  
  
  
  
  25.             ohos:width="match_content"
    26. 
  
  
  
  
  26.             ohos:text_size="20fp"
    27. 
  
  
  
  
  27.             />
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.         
  
  
  
  
  30.             ohos:height="match_parent"
    31. 
  
  
  
  
  31.             ohos:width="match_content"
    32. 
  
  
  
  
  32.             ohos:text_size="20fp"
    33. 
  
  
  
  
  33.             />
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.     
    36. 
  
  
  
  
  36.

pageSlider1.xml

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:height="match_parent"
    5. 
  
  
  
  
  5.     ohos:width="match_parent">
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.     
  
  
  
  
  8.         ohos:height="match_content"
    9. 
  
  
  
  
  9.         ohos:width="match_content"
    10. 
  
  
  
  
  10.         ohos:center_in_parent="true"
    11. 
  
  
  
  
  11.         ohos:text="PageSlider1"
    12. 
  
  
  
  
  12.         ohos:text_size="25fp"/>
    13. 
  
  
  
  
  13.

pageSlider2.xml

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:height="match_parent"
    5. 
  
  
  
  
  5.     ohos:width="match_parent">
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.     
  
  
  
  
  8.         ohos:height="match_content"
    9. 
  
  
  
  
  9.         ohos:width="match_content"
    10. 
  
  
  
  
  10.         ohos:center_in_parent="true"
    11. 
  
  
  
  
  11.         ohos:text="PageSlider2"
    12. 
  
  
  
  
  12.         ohos:text_size="25fp"/>
    13. 
  
  
  
  
  13.

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

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

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

https://harmonyos.

文章题目：HarmonyOS基础之UI组件（二）
浏览路径：http://www.hantingmc.com/qtweb/news20/218320.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

做网站知识

行业网站建设

宜宾网站建设　　 　乐山企业网站设计　　 　保温橡塑管　　 　bgp多线机房托管　　 　做网站　　 　成都网站建设流程　　 　400电话办理　　 　成都做网站　　 　优化排名　　 　上市企业网站建设方案　　 　亮美家　　 　广安网站建设　　 　华泰海航　　 　成都网站设计　　 　成都口碑营销公司　　 　内江智速网站建设　　 　芦山网站建设　　 　网站SEO优化　　 　手机网站制作　　 　高端网站建设