一警检、基礎(chǔ)組件分類
HarmonyOS的常用組件一般在resources/base/layout下的xml文件中聲明痴昧，然后在AbilitySlice中通過super.setUIContent(ResourceTable.某layout布局的文件名)來加載布局摔蓝。在AbilitySlice中通過super.findComponentById(ResourceTable.組件的id)獲取組件膘侮，獲取成功后就可以對該組件進(jìn)行操作清女，如添加監(jiān)聽匀归，設(shè)置內(nèi)容等坑资。當(dāng)然也可以通過代碼動態(tài)的使用控件。
組件之間的繼承關(guān)系：
在這里插入圖片描述
基礎(chǔ)組件的分類如下（個人分類）：
- 文本類
Text穆端，TextField - 按鈕類
Button袱贮，Switch，RadioButton，RadioContainer攒巍，Checkbox - 圖片類
Image - 選擇器類
Picker嗽仪，DatePicker，TimePick - 進(jìn)度條
ProgressBar柒莉，RoundProgressBar - 導(dǎo)航
TabList闻坚、Tab，PageSlider兢孝，PageSliderIndicator - Dialog彈窗
ToastDialog窿凤，PopupDialog，CommonDialog - 列表
ListContainer - 滾動條
ScrollView - 網(wǎng)頁
WebView
二跨蟹、分類說明
① 文本類
Text提供了一種文本顯示雳殊。TextField提供了一種文本輸入框。
Text的自有屬性：
| 屬性名稱 | 屬性描述 | 使用案例 |
|---|---|---|
| text | 顯示文本 | ohos:text="文本內(nèi)容" |
| hint | 提示文本 | ohos:hint="請輸入用戶名" |
| text_font | 字體 | ohos:text_font="HwChinese-medium" |
| truncation_mode | 長文本截?cái)喾绞?/td> | ohos:truncation_mode="none" 無截?cái)?br>... ="ellipsis_at_start"起始處使用省略號截?cái)?br>... ="ellipsis_at_middle" 中間位置使用省略號截?cái)?br>... ="ellipsis_at_end" 結(jié)尾處使用省略號截?cái)?br>... ="auto_scrolling" 滾動顯示全部文本 |
| text_size | 文本大小 | ohos:text_size="30" ohos:text_size="16fp" |
| element_padding | 文本與圖片的邊距 | ... |
| bubble_width bubble_height bubble_left_width bubble_left_height bubble_right_width bubble_right_height |
文本氣泡寬度 文本氣泡高度 文本氣泡左寬度 文本氣泡左高度 文本氣泡右寬度 文本氣泡右高度 |
表示尺寸的float類型窗轩。 可以是浮點(diǎn)數(shù)值,其默認(rèn)單位為px夯秃； 也可以是帶px/vp/fp單位的浮點(diǎn)數(shù)值； 也可以引用float資源痢艺。 |
| max_text_lines | 文本輸入類型 | ohos:text_input_type="pattern_null" 無類型 ... ="pattern_text" 文本類型 ... ="pattern_number" 數(shù)字 ... ="pattern_password" 密碼 |
| text_input_type | 輸入鍵類型 | ohos:input_enter_key_type= "enter_key_type_unspecified" 無類型 ... ="enter_key_type_search" “搜索”動作 ... ="enter_key_type_go" “go”動作 ... ="enter_key_type_send" “發(fā)送”動作 |
| auto_scrolling_duration | 自動滾動時(shí)長 | ohos:auto_scrolling_duration="1000" |
| multiple_lines | 多行模式設(shè)置 | ohos:multiple_lines="true" |
| auto_font_size | 是否支持文本自動調(diào)整 文本字體大小 | ohos:auto_font_size="true" |
| scrollable | 文本是否可滾動 | ohos:scrollable="true" |
| italic | 文本是否斜體字體 | ohos:italic="true" |
| padding_for_text | 設(shè)置文本頂部與底部是否默認(rèn)留白仓洼。 | ohos:padding_for_text="true" |
| additional_line_spacing | 需增加的行間距 | ohos:additional_line_spacing="2.0" |
| line_height_num | 行間距倍數(shù) | ohos:line_height_num="1.5" |
| element_left element_top element_right element_bottom element_start element_end |
文本左側(cè)圖標(biāo) 文本上方圖標(biāo) 文本右側(cè)圖標(biāo) 文本下方圖標(biāo) 文本開始方向圖標(biāo) 文本結(jié)束方向圖標(biāo) |
可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源堤舒。 |
TextField的共有XML屬性繼承自：Text
TextField的自有屬性：
| 屬性名稱 | 屬性描述 | 使用案例 |
|---|---|---|
| basement | 輸入框基線 | 可直接配置色值色建，也可引用color資源或引用media/graphic下的圖片資源。 |
② 按鈕類
Button是一種常見的組件舌缤，點(diǎn)擊可以觸發(fā)對應(yīng)的操作镀岛，通常由文本或圖標(biāo)組成，也可以由圖標(biāo)和文本共同組成友驮。
Button無自有的XML屬性，共有XML屬性繼承自：Text驾锰，其本身并無其他特殊屬性卸留。
Switch是切換單個設(shè)置開/關(guān)兩種狀態(tài)的組件。
Switch的共有XML屬性繼承自：Text椭豫，Switch的自有XML屬性見下表：
| 屬性名稱 | 屬性描述 | 使用案例 |
|---|---|---|
| text_state_on text_state_off |
開啟時(shí)顯示的文本 關(guān)閉時(shí)顯示的文本 |
可以直接設(shè)置文本字串耻瑟，也可以引用string資源 |
| track_element thumb_element check_element |
軌跡樣式 thumb樣式 狀態(tài)標(biāo)志樣式 |
可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源赏酥。 |
| marked | 當(dāng)前狀態(tài)（選中或未選中） | 可以直接設(shè)置true/false喳整，也可以引用boolean資源。true則當(dāng)前狀態(tài)為選中裸扶，false則當(dāng)前狀態(tài)為未選中框都。 |
RadioButton用于多選一的操作，需要搭配RadioContainer使用呵晨，實(shí)現(xiàn)單選效果魏保。
RadioButton的共有XML屬性繼承自：Text熬尺，RadioButton的自有XML屬性見下表：
| 屬性名稱 | 屬性描述 | 使用案例 |
|---|---|---|
| marked | 當(dāng)前狀態(tài)（選中或未選中） | 可以直接設(shè)置true/false，也可以引用boolean資源谓罗。true則當(dāng)前狀態(tài)為選中粱哼，false則當(dāng)前狀態(tài)為未選中。 |
| text_color_on | 處于選中狀態(tài)的文本顏色 | 可以直接設(shè)置色值檩咱，也可以引用color資源揭措。 |
| text_color_off | 處于未選中狀態(tài)的文本顏色 | 可以直接設(shè)置色值，也可以引用color資源刻蚯。 |
| check_element | 狀態(tài)標(biāo)志樣式 | 可直接配置色值绊含，也可引用color資源或引用media/graphic下的圖片資源。 |
Checkbox可以實(shí)現(xiàn)選中和取消選中的功能芦倒。
Checkbox的共有XML屬性繼承自：Text艺挪，Checkbox的自有XML屬性見下表：
| 屬性名稱 | 屬性描述 | 使用案例 |
|---|---|---|
| marked | 當(dāng)前狀態(tài)（選中或未選中） | ohos:marked="true" |
| text_color_on text_color_off |
處于選中狀態(tài)的文本顏色 處于未選中狀態(tài)的文本顏色 |
可以直接設(shè)置色值，也可以引用color資源兵扬。 |
| check_element | 狀態(tài)標(biāo)志樣式 | 可直接配置色值麻裳，也可引用color資源或引用media/graphic下的圖片資源。 |
③ 圖片類
Image是用來顯示圖片的組件器钟。
Image的共有XML屬性繼承自：Component津坑，Image的自有XML屬性見下表：
| 屬性名稱 | 屬性描述 | 使用案例 |
|---|---|---|
| clip_alignment | 圖像裁剪對齊方式 | ohos:clip_alignment="left" 左對齊裁剪 ... ="right" 右對齊裁剪 ... ="top" 頂部對齊裁剪 ... ="bottom" 底部對齊裁剪 ... ="center" 居中對齊裁剪 |
| image_src | 圖像 | 可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源傲霸。 |
| scale_mode | 圖像縮放類型 | ohos:scale_mode="center" 表示原圖按照比例縮放到與Image最窄邊一致疆瑰，并居中顯示 ... ="zoom_start" 表示原圖按照比例縮放到與Image最窄邊一致，并靠起始端顯示 ... ="zoom_end" 表示原圖按照比例縮放到與Image最窄邊一致昙啄，并靠結(jié)束端顯示穆役。 ... ="stretch" 表示將原圖縮放到與Image大小一致。 ... ="center" 表示不縮放梳凛，按Image大小顯示原圖中間部分耿币。 ... ="inside" 表示將原圖按比例縮放到與Image相同或更小的尺寸，并居中顯示韧拒。 ... ="clip_center" 表示將原圖按比例縮放到與Image相同或更大的尺寸淹接，并居中顯示。 |
未完待續(xù)....
