I. Classification of basic components
Common components of HarmonyOS are declared in an XML file under Resources/Base/Layout, and then in AbilitySlice through super.setuicontent (ResourceTable). File name of a layout) to load the layout. FindComponentById (ResourceTable) in AbilitySlice. Component ID). After obtaining the component, you can perform operations on the component, such as adding listeners and setting content. Controls can also be used dynamically through code.
Inheritance relationships between components:
The basic components are classified as follows (individual classification) :
- The text class
Text, TextField
- Button class
Button, Switch, RadioButton, RadioContainer, Checkbox
- Class pictures
Image
- The selector class
Picker, DatePicker, TimePick
- The progress bar
ProgressBar, RoundProgressBar
- navigation
TabList, Tab, PageSlider, PageSliderIndicator
- Dialog window pops
ToastDialog, PopupDialog, CommonDialog
- The list of
ListContainer
- The scroll bar
ScrollView
- Web page
WebView
Ii. Classification description
(1) text class
Text provides a Text display. TextField provides a text input field.
Properties of Text:
| The attribute name | Property description | Use case |
|---|---|---|
| text | According to the text | Ohos :text=” text content” |
| hint | Tooltip text | Ohos :hint=” please enter username” |
| text_font | The font | ohos:text_font=”HwChinese-medium” |
| truncation_mode | Long text truncation | No truncation ohos: truncation_mode = “none” . =” ellipsIS_AT_start “truncated with ellipsis . =” ellipsis_AT_middle “truncated with ellipsis . =” ellipsis_AT_end “truncated with ellipsis . =”auto_scrolling” displays the entire text |
| text_size | Text size | ohos:text_size=”30″ ohos:text_size=”16fp” |
| element_padding | Margin between text and image | . |
| bubble_width bubble_height bubble_left_width bubble_left_height bubble_right_width bubble_right_height |
Text bubble width Text bubble height Text bubble left width Text bubble left height Text bubble right width Text bubble right height |
A float type representing the size. They can be floating point values, which default to px; It can also be a floating point value with px/ VP /fp units; Float resources can also be referenced. |
| max_text_lines | Text input type | Ohos: text_input_type = “pattern_null” type . =”pattern_text” Type of text . = “pattern_number” Numbers . = “pattern_password” password |
| text_input_type | Input key type | ohos:input_enter_key_type= “Enter_key_type_unspecified” type . =”enter_key_type_search” Indicates the search action . Action = “enter_key_type_go” “go” . =”enter_key_type_send” Indicates the “send” action |
| auto_scrolling_duration | Automatic roll time | ohos:auto_scrolling_duration=”1000″ |
| multiple_lines | Multi-line mode Settings | ohos:multiple_lines=”true” |
| auto_font_size | Supports automatic text font resizing | ohos:auto_font_size=”true” |
| scrollable | Whether text is scrollable | ohos:scrollable=”true” |
| italic | Whether the text is in italic font | ohos:italic=”true” |
| padding_for_text | Sets whether the top and bottom of the text is white by default. | ohos:padding_for_text=”true” |
| additional_line_spacing | Line spacing to be increased | Ohos: additional_line_spacing = “2.0” |
| line_height_num | Multiple of line spacing | Ohos: line_height_num = “1.5” |
| element_left element_top element_right element_bottom element_start element_end |
Text left icon Top text icon Icon to the right of text Icon below text Text start direction icon Text end direction icon |
Can directly configure the color value, also can reference color resources or reference media/graphic image resources. |
The common XML attributes of TextField inherit from: Text
TextField’s own properties:
| The attribute name | Property description | Use case |
|---|---|---|
| basement | Input box baseline | Can directly configure the color value, also can reference color resources or reference media/graphic image resources. |
(2) button class
A Button is a common component that can be clicked to trigger an action, usually consisting of text or an icon, or both.
Button has no XML attributes of its own. The common XML attributes are inherited from: Text, and there are no other special attributes.
Switch is a component that toggles a single setting on/off.
The common XML attribute of Switch is inherited from: Text. The XML attribute of Switch is shown in the following table:
| The attribute name | Property description | Use case |
|---|---|---|
| text_state_on text_state_off |
Text displayed when enabled The text displayed when closed |
You can set a text string directly, or you can reference a String resource |
| track_element thumb_element check_element |
Track style Thumb style Status flag style |
Can directly configure the color value, also can reference color resources or reference media/graphic image resources. |
| marked | Current status (selected or unchecked) | You can set true/false directly or refer to a Boolean resource. True indicates that the current status is selected. False indicates that the current status is not selected. |
RadioButton is used for multiple operations. It needs to be used with RadioContainer to achieve single selection effect.
The common XML attribute of RadioButton is inherited from: Text. The self-owned XML attribute of RadioButton is shown in the following table:
| The attribute name | Property description | Use case |
|---|---|---|
| marked | Current status (selected or unchecked) | You can set true/false directly or refer to a Boolean resource. True indicates that the current status is selected. False indicates that the current status is not selected. |
| text_color_on | The color of text in the selected state | You can set the color value directly or reference the color resource. |
| text_color_off | The color of the text in the unchecked state | You can set the color value directly or reference the color resource. |
| check_element | Status flag style | Can directly configure the color value, also can reference color resources or reference media/graphic image resources. |
Checkbox allows you to check and deselect checkboxes.
The common XML attribute of Checkbox is inherited from: Text. The own XML attribute of Checkbox is shown in the following table:
| The attribute name | Property description | Use case |
|---|---|---|
| marked | Current status (selected or unchecked) | ohos:marked=”true” |
| text_color_on text_color_off |
The color of text in the selected state The color of the text in the unchecked state |
You can set the color value directly or reference the color resource. |
| check_element | Status flag style | Can directly configure the color value, also can reference color resources or reference media/graphic image resources. |
(3) image class
Image is the component used to display an Image.
The common XML attribute of Image inherits from: Component. The Image’s own XML attribute is shown in the following table:
| The attribute name | Property description | Use case |
|---|---|---|
| clip_alignment | Image cropping alignment | Ohos :clip_alignment=”left” Left-aligned clipping . =”right” right aligned clipping . =”top” top aligned clipping . =”bottom” bottom aligned clipping . =”center” center aligned clipping |
| image_src | image | Can directly configure the color value, also can reference color resources or reference media/graphic image resources. |
| scale_mode | Image scaling type | Ohos :scale_mode=”center” indicates that the original Image is scaled to the narrowest edge of the Image and is centered . =”zoom_start” indicates that the original Image is scaled to the narrowest edge of the Image and displayed from the beginning . =”zoom_end” indicates that the original Image is scaled to the narrowest edge of the Image and displayed at the end. . =”stretch” : the original Image is scaled to the same size as the Image. . =”center” indicates that the middle part of the original Image is displayed according to the size of Image without scaling. . =”inside” indicates that the original Image is scaled to the same or smaller size as Image and is centered. . =” clip_Center “indicates that the original Image is scaled to the same or larger size as the Image and is centered. |
To be continued….