Component共有属性原创

starLWW

发布于 2021-8-20 22:44

浏览

1收藏

HarmonyOS提供的ACE UI框架可以为开发人员提供界面开发所需的重要组件，将这些组件进行有效组合来实现页面的设计。本章将学习Java UI框架中常用组件的用法。

在Java UI框架中，图形界面设计方法主要有两种：一是使用XML方式描述整个布局效果，这也是最常使用的方式；二是使用Java代码设计页面展示效果。两种方式都是通过属性和值来制定具体样式，以此创建组件。创建完成后，开发者可以设置各种各样的交互、相应的事件处理及后续属性状态变更或动作行为呈现。HarmonyOS提供了相应的API可供开发者使用。

HarmonyOS应用的绝大部分UI组件都放在ohos.agp.components包中，应用中所有的用户界面元素都是由Component（非容器组件）和ComponentContainer（容器组件）对象构成。Component是绘制在屏幕上的一个对象，用户能与之交互。ComponentContainer是一个用于容纳其他Component或ComponentContainer对象的容器组件。Component与ComponentContainer的层次结构如图1所示。

Component共有属性-鸿蒙开发者社区

图1 Component与ComponentContainer层次结构

Java UI框架提供了一部分Component和ComponentContainer的具体子类，即创建用户界面（UI）的各类组件，包括一些常用的组件（比如：文本框、按钮、图片、列表等）和常用的布局（比如：DirectionalLayout和DependentLayout）。用户可通过组件进行交互操作，并获得响应。所有的UI操作都应该在主线程进行设置。

Component与ComponentContainer的继承关系如图2所示。ComponentContainer是Component的直接子类，且实现了ComponentParent接口。

Component共有属性-鸿蒙开发者社区

图2 Component与ComponentContainer的继承关系

Component和ComponentContainer

Component：提供内容显示，是界面中所有组件的基类，开发者可以给Component设置事件处理回调来创建一个可交互的组件。Java UI框架提供了一些常用的界面元素，也可称之为组件，组件一般直接继承Component或它的子类，如Text、Image等。

ComponentContainer：作为容器容纳Component或ComponentContainer对象，并对它们进行布局。Java UI框架提供了一些标准布局功能的容器，它们继承自ComponentContainer，一般以“Layout”结尾，如DirectionalLayout、DependentLayout等。

用户界面元素统称为组件，组件根据一定的层级结构进行组合形成布局。组件在未被添加到布局中时，既无法显示也无法交互，因此一个用户界面至少包含一个布局。在UI框架中，具体的布局类通常以XXLayout命名，完整的用户界面是一个布局，也可以是嵌套的布局，即一个用户界面必须包含一个XXLayout布局组件，该布局组件中可以包含若干Component、ComponentContainer或XXLayout布局组件。

布局把Component和ComponentContainer以树状的层级结构进行组织，这样的一个布局就称为组件树。组件树的特点是仅有一个根组件，其他组件有且仅有一个父节点，组件之间的关系受到父节点的规则约束。

每个组件对应一个类，每个组件类都有其支持的属性和方法，这些属性有些是自有属性，有些是公有属性。通过继承关系，不同的组件也拥有了公有属性。这些公有属性来自于所有组件的基类Component。Component支持的自有XML属性，其它组件都支持。Component支持的属性分为5类：基础属性、间距属性、滚动属性、缩放属性、焦点属性。

1. 基础属性

（1）id：控件identity，取值为integer类型，用以唯一识别不同控件对象。在XML中的用法：ohos:id=“$+id:component_id”。

（2）width：宽度，必需属性，取值为float类型，其值的设置有3种形式。

固定值：默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。在XML中的用法：ohos:width=“20”、ohos:width=“20vp”、ohos:width=“$float:size_value”（float表示引用资源的类型，size_value表示资源名称）。
match_parent：表示组件宽度与其父组件去掉内部边距后的宽度相同（宽度占满父容器组件）。在XML中的用法：ohos:width=“match_parent”。
match_content：表示组件宽度由其包含的内容决定，包括其内容的宽度以及内部边距的总和。在XML中的用法：ohos:width=“match_content”。

（3）height：高度，必需属性，取值为float类型，其值的设置与width属性相同，有3种形式。

固定值：同width。
match_parent：表示组件高度与其父组件去掉内部边距后的高度相同（高度占满父容器组件）。在XML中的用法：ohos:height=“match_parent”。
match_content：表示组件高度由其包含的内容决定，包括其内容的高度以及内部边距的总和。在XML中的用法：ohos:height=“match_content”。

（4）min_width：最小宽度，取值为float类型，默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。在XML中的使用方法：ohos:min_width=“20”、ohos:min_width=“20vp”、ohos:min_width=“$float:size_value”。

（5）min_height：最小高度，取值和用法同min_width。

（6）alpha：透明度，取值为float类型，可以直接设置浮点数值，也可以引用float资源。取值范围在0~1。在XML中的用法：ohos:alpha=“0.86”、ohos:alpha=“$float:value”。

（7）clickable：是否可点击，取值为boolean类型，可以直接设置true/false，也可以引用boolean资源。在XML中的用法：ohos:clickable=“true”、ohos:clickable=“$boolean:true”。

（8）long_click_enabled：是否支持长点击，取值为boolean类型，可以直接设置true/false，也可以引用boolean资源。在XML中的用法：ohos:long_click_enabled=“true”、ohos:long_click_enabled=“$boolean:true”。

（9）enabled：是否启用，取值为boolean类型，可以直接设置true/false，也可以引用boolean资源。在XML中的用法：ohos:enabled=“true”、ohos:enabled=“$boolean:true”。

（10）visibility：可见性，取值范围为：

visible：表示控件可见。在XML中的用法：ohos:visibility=“visible”。
invisible：表示控件不可见，但仍然占用布局空间。在XML中的用法：ohos:visibility=“invisible”。
hide：表示控件不可见，且不占用布局空间。在XML中的用法：ohos:visibility=“hide”。

（11）layout_direction：定义水平布局方向，取值范围为：

ltr：表示布局方向为水平方向从左到右。在XML中的用法：ohos:layout_direction=“ltr”。
rtl：表示布局方向为水平方向从右到左。在XML中的用法：ohos:layout_direction=“rtl”。
inherit：表示继承水平布局方向。在XML中的用法：ohos:layout_direction=“inherit”。
locale：表示布局方向跟随系统设置。在XML中的用法：ohos:layout_direction=“locale”。

（12）background_element：背景图层，取值为Element类型，可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。在XML中的用法：

配置颜色值：ohos:background_element=“#FF000000”
引用color资源：ohos:background_element=“$color:black”
引用media图片资源：ohos:background_element=“$media:media_src”
引用graphic图片资源：ohos:background_element=“$graphic:graphic_src”

（13）foreground_element：前景图层，取值和用法同background_element。

（14）theme：样式，取值为引用类型，近可引用pattern资源。在XML中的用方法：ohos:theme=“$pattern:button_pattern”。

（15）component_description：描述，取值为String类型，可以直接设置文本字串，也可以引用String资源。在XML中的用法：ohos:component_description=“test”、ohos:component_description=“$string:test_str”。

2. 间距属性

（1）padding：内间距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法是：ohos:padding=“20”、ohos:padding=“20vp”、ohos:padding=“$float:padding_value”。

注意：

padding与left_padding、right_padding、start_padding、end_padding、top_padding、bottom_padding属性有冲突，不建议一起使用；
同时配置时，left_padding、right_padding、start_padding、end_padding、top_padding、bottom_padding优先级高于padding属性；

（2）left_padding：左内间距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:left_padding=“20”、ohos:left_padding=“20vp”、ohos:left_padding=“$float:padding_value”。

注意：

left_padding与start_padding、end_padding属性有冲突，不建议一起使用；
在“水平布局方向为从左到右”时，left_padding会与start_padding属性冲突；
在“水平布局方向为从右到左”时，left_padding会与end_padding属性冲突。
同时配置时，start_padding、end_padding优先级高于left_padding属性。

（3）start_padding：前内间距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。在XML中的用法：ohos:start_padding=“20”、ohos:start_padding=“20vp”、ohos:start_padding=“$float:padding_value”。

注意：

start_padding与left_padding、right_padding属性有冲突，不建议一起使用；
在“水平布局方向为从左到右”时，start_padding会与left_padding属性冲突；
在“水平布局方向为从右到左”时，start_padding会与right_padding属性冲突。
同时配置时，start_padding优先级高于left_padding、right_padding属性。

（4）right_padding：右内间距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:right_padding=“20”、ohos:right_padding=“20vp”、ohos:right_padding=“$float:padding_value”。

注意：

right_padding与start_padding、end_padding属性有冲突，不建议一起使用；
在“水平布局方向为从左到右”时，right_padding会与end_padding属性冲突；
在“水平布局方向为从右到左”时，right_padding会与start_padding属性冲突。
同时配置时，start_padding、end_padding优先级高于right_padding属性。

（5）end_padding：后内间距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:end_padding=“20”、ohos:end_padding=“20vp”、ohos:end_padding=“$float:padding_value”。

注意：

end_padding与left_padding、right_padding属性有冲突，不建议一起使用；
在“水平布局方向为从左到右”时，end_padding会与right_padding属性冲突；
在“水平布局方向为从右到左”时，end_padding会与left_padding属性冲突；
同时配置时，end_padding优先级高于left_padding、right_padding属性。

（6）top_padding：上内间距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:top_padding=“20”、ohos:top_padding=“20vp”、ohos:top_padding=“$float:padding_value”。

（7）bottom_padding：下内间距，表示间距尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。在XML中的用法：ohos:bottom_padding=“20”、ohos:bottom_padding=“20vp”、ohos:bottom_padding=“$float:padding_value”。

（8）margin：外边距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:margin=“20”、ohos:margin=“20vp”、ohos:margin=“$float:margin_value”。

注意：

margin与left_margin、right_margin、start_margin、end_margin、top_margin、bottom_margin属性有冲突，不建议一起使用；
同时配置时，margin优先级高于left_margin、right_margin、start_margin、end_margin、top_margin、bottom_margin属性；

（9）left_margin：左外边距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。与margin同时配置时，margin优先级高于left_margin。在XML中的用法：ohos:left_margin=“20”、ohos:left_margin=“20vp”、ohos:left_margin=“$float:margin_value”。

注意：

left_margin与start_margin、end_margin属性有冲突，不建议一起使用；
在“水平布局方向为从左到右”时，left_margin会与start_margin属性冲突；
在“水平布局方向为从右到左”时，left_margin会与end_margin属性冲突；
同时配置时，start_margin、end_margin优先级高于left_margin属性；

（10）start_margin：前外边距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。与margin同时配置时，margin优先级高于start_margin。在XML中的用法：ohos:start_margin=“20”、ohos:start_margin=“20vp”、ohos:start_margin=“$float:margin_value”。

注意：

start_margin与left_margin、right_margin属性有冲突，不建议一起使用；
在“水平布局方向为从左到右”时，start_margin会与left_margin属性冲突；
在“水平布局方向为从右到左”时，start_margin会与right_margin属性冲突；
同时配置时，start_margin优先级高于left_margin、right_margin属性；

（11）right_margin：右外边距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。

与margin同时配置时，margin优先级高于right_margin。在XML中的用法：ohos:right_margin=“20”、ohos:right_margin=“20vp”、ohos:right_margin=“$float:margin_value”。

注意：

right_margin与start_margin、end_margin属性有冲突，不建议一起使用；
在“水平布局方向为从左到右”时，right_margin会与end_margin属性冲突；
在“水平布局方向为从右到左”时，right_margin会与start_margin属性冲突；
同时配置时，start_margin、end_margin优先级高于right_margin属性；

（12）end_margin：后外边距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。与margin同时配置时，margin优先级高于end_margin。在XML中的用法：ohos:end_margin=“20”、ohos:end_margin=“20vp”、ohos:end_margin=“$float:margin_value”。

注意：

end_margin与left_margin、right_margin属性有冲突，不建议一起使用；
在“水平布局方向为从左到右”时，end_margin会与right_margin属性冲突；
在“水平布局方向为从右到左”时，end_margin会与left_margin属性冲突；
同时配置时，end_margin优先级高于left_margin、right_margin属性；

（13）top_margin：上外边距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。与margin同时配置时，margin优先级高于top_margin。在XML中的用法：ohos:top_margin=“20”、ohos:top_margin=“20vp”、ohos:top_margin=“$float:margin_value”。

（14）bottom_margin：下外边距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。与margin同时配置时，margin优先级高于bottom_margin。在XML中的用法：ohos:bottom_margin=“20”、ohos:bottom_margin=“20vp”、ohos:bottom_margin=“$float:margin_value”。

3. 滚动属性

（1）scrollbar_thickness：滚动条的厚度，取值为表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。在XML中的用法：ohos:scrollbar_thickness=“30”、ohos:scrollbar_thickness=“10vp”、ohos:scrollbar_thickness=“$float:size_value”。

（2）scrollbar_start_angle：滚动条的起始角度、取值为float类型。可以直接设置浮点数值，也可以引用float资源。在XML中的用法：ohos:scrollbar_start_angle=“30”、ohos:scrollbar_start_angle=“$float:value”。

（3）scrollbar_sweep_angle：滚动条的扫描角度，取值为float类型。可以直接设置浮点数值，也可以引用float资源。在XML中的用法：ohos:scrollbar_sweep_angle=“30”、ohos:scrollbar_sweep_angle=“$float:value”。

（4）scrollbar_background_color：滚动条背景颜色，取值为color类型。可以直接设置色值，也可以引用color资源。在XML中的用法：ohos:scrollbar_background_color=“#A8FFFFFF”、ohos:scrollbar_background_color=“$color:black”。

（5）scrollbar_color：滚动条颜色，取值为color类型。可以直接设置色值，也可以引用color资源。在XML中的用法：ohos:scrollbar_color=“#A8FFFFFF”、ohos:scrollbar_color=“$color:black”。

（6）scrollbar_fading_enabled：滚动条是否会渐隐，取值为boolean类型。可以直接设置true/false，也可以引用boolean资源。在XML中的用法：ohos:scrollbar_fading_enabled=“true”、ohos:scrollbar_fading_enabled=“$boolean:true”。

（7）scrollbar_overlap_enabled：滚动条是否可以重叠，取值为boolean类型。可以直接设置true/false，也可以引用boolean资源。在XML中的用法：ohos:scrollbar_overlap_enabled=“true”、ohos:scrollbar_overlap_enabled=“$boolean:true”。

（8）scrollbar_fading_delay：滚动条渐隐前的延迟时间（单位ms），取值为integer类型。可以直接设置整型数值，也可以引用integer资源。在XML中的用法：ohos:scrollbar_fading_delay=“1000”、ohos:scrollbar_fading_delay=“$integer:delay”。

（9）scrollbar_fading_duration：滚动条渐隐时长（单位ms），取值为integer类型。可以直接设置整型数值，也可以引用integer资源。在XML中的用法：ohos:scrollbar_fading_duration=“1000”、ohos:scrollbar_fading_duration=“$integer:duration”。

4. 缩放属性

（1）pivot_x：旋转点X位置，取值为表示尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:pivot_x=“20”、ohos:pivot_x=“$float:value”。

（2）pivot_y：旋转点Y位置，取值为表示尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:pivot_y=“20”、ohos:pivot_y=“$float:value”。

（3）rotate：围绕其中心点旋转的角度，取值为float类型。可以直接设置浮点数值，也可以引用float资源。在XML中的用法：ohos:rotate=“30”、ohos:rotate=“$float:value”。

（4）scale_x：X方向的缩放级别，取值为float类型。可以直接设置浮点数值，也可以引用float浮点数资源。在XML中的用法：ohos:scale_x=“1.2”、ohos:scale_x=“$float:value”。

（5）scale_y：Y方向的缩放级别，取值为float类型。可以直接设置浮点数值，也可以引用float资源。在XML中的用法：ohos:scale_y=“1.2”、ohos:scale_y=“$float:value”。

（6）translation_x：X方向移动的距离，取值为表示尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:translation_x=“20”、ohos:translation_x=“20vp”、ohos:translation_x=“$float:value”。

（7）translation_y：Y方向移动的距离，取值为表示尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:translation_y=“20”、ohos:translation_y=“20vp”、ohos:translation_y=“$float:value”。

5. 焦点属性

（1）focusable：是否可获焦，取值范围为：

focus_disable：表示控件不可获焦，在XML中的用法：ohos:focusable=“focus_disable”；
focus_adaptable：表示控件获焦状态跟随控件自身默认特性，在XML中的用法：ohos:focusable=“focus_adaptable”；
focus_enable：表示控件可以获焦，在XML中的用法：ohos:focusable=“focus_enable”；

（2）focus_border_radius：焦点边框圆角半径，取值为表示尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:focus_border_radius=“10”、ohos:focus_border_radius=“10vp”、ohos:focus_border_radius=“$float:value”。

（3）focus_border_enable：是否有焦点边框，取值为boolean类型。可以直接设置true/false，也可以引用boolean资源。在XML中的用法：ohos:focus_border_enable=“true”、ohos:focus_border_enable=“$boolean:true”。

（4）focus_border_width：焦点边框宽度，取值为表示尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:focus_border_width=“20”、ohos:focus_border_width=“20vp”、ohos:focus_border_width=“$float:size_value”。

（5）focus_border_padding：焦点边框的边距，取值为表示间距尺寸的float类型。可以是浮点数值，其默认单位为px，也可以是带px/vp/fp单位的浮点数值，也可以引用float资源。在XML中的用法：ohos:focus_border_padding=“20”、ohos:focus_border_padding=“20vp”、ohos:focus_border_padding=“$float:padding_value”

（6）focusable_in_touch：触摸状态下，取值为boolean类型。可以直接设置true/false，也可以引用boolean资源。在XML中的用法：ohos:focusable_in_touch=“true”、ohos:focusable_in_touch=“$boolean:true”。

分类

标签