鴻蒙 ArkUI - ArkTS 組件 官方 UI組件 合集

ArkUI 組件速查表

鴻蒙應用開發頁面上需要實現的 UI 功能組件如果在這 100 多個組件里都找不到,那就需要組合造輪子了

使用技巧:先判斷需要實現的組件大方向,比如“選擇”、“文本”、“信息”等,或者是某種形狀比如“塊”、“圖”,再去表格里面看看具體作用。標題已裝導航,機長,準備起飛。

行列與堆疊

組件名稱作用
Flex彈性布局子組件的容器
Column垂直方向布局的容器
Row水平方向布局容器
Stack層疊布局容器
RelativeContainer相對布局容器
FolderStack繼承于 Stack(層疊布局)控件,新增了折疊屏懸停能力

柵格與分欄

組件名稱作用
GridRow柵格布局容器,僅可以和柵格子組件(GridCol)在柵格布局場景中使用
GridCol柵格子組件,必須作為柵格容器組件(GridRow)的子組件使用
ColumnSplit將子組件縱向布局,并在每個子組件之間插入一根橫向的分割線
RowSplit將子組件橫向布局,并在每個子組件之間插入一根縱向的分割線
SplitLayout上下結構布局,主要分為上下文本和上下圖文兩種類型
FoldSplitContainer折疊屏二分欄、三分欄在展開態、懸停態以及折疊態的區域控制
SideBarContainer提供側邊欄可以顯示和隱藏的側邊欄容器

滾動與滑動

組件名稱作用
List列表布局容器
ListItem用來展示列表具體 item,必須配合 List 來使用
ListItemGroup用來展示列表 item 分組,必須配合 List 組件來使用
Grid網格布局容器,由“行”和“列”分割的單元格所組成
GridItem網格布局容器中單項內容容器
Scroll可滾動的容器,當子組件的布局尺寸超過父組件的時,可以滾動
Swiper滑塊視圖容器,提供子組件滑動輪播顯示的能力
WaterFlow瀑布流容器,由“行”和“列”分割的單元格所組成
FlowItem瀑布流組件的子組件,用來展示瀑布流具體 item
ScrollBar滾動條組件,配合可滾動組件使用,如 List、Grid、Scroll、WaterFlow
Refresh可以進行頁面下拉操作并顯示刷新動效的容器組件
ComposeListItem列表包含一系列相同寬度的列表項
GridObjectSortComponent網格對象的編輯排序,用于網格對象的編輯、拖動排序、新增和刪除
SwipeRefresher內容加載指獲取內容并加載出來,常用于銜接展示下拉加載的內容

導航與切換

組件名稱作用
Indicator導航點組件,提供圓點導航點以及數字導航點兩種導航點樣式
Navigation路由導航的根視圖容器,一般作為 Page 頁面的根容器使用
NavDestination作為子頁面的根容器,用于顯示 Navigation 的內容區
MultiNavigation用于在大尺寸設備上分欄顯示、進行路由跳轉
Stepper步驟導航器組件,適用于引導用戶按照步驟完成任務的導航場景
StepperItem用作 Stepper 組件的頁面子組件
Tabs通過頁簽進行內容視圖切換的容器組件,每個頁簽對應一個內容視圖
TabContent僅在 Tabs 中使用,對應一個切換頁簽的內容視圖

按鈕與選擇

組件名稱作用
Button按鈕組件,可快速創建不同樣式的按鈕
Toggle組件提供勾選框樣式、狀態按鈕樣式和開關樣式
Checkbox提供多選框組件,通常用于某選項的打開或關閉
CheckboxGroup多選框群組,用于控制多選框全選或者不全選狀態
CalendarPicker日歷選擇器組件,提供下拉日歷彈窗,可以讓用戶選擇日期
DatePicker日期選擇器組件,用于根據指定日期范圍創建日期滑動選擇器
TextPicker滑動選擇文本內容的組件
TimePicker時間選擇組件,根據指定參數創建選擇器,支持選擇小時及分鐘
Radio單選框,提供相應的用戶交互選擇項
Rating提供在給定范圍內選擇評分的組件(五星評分)
Select提供下拉選擇菜單,可以讓用戶在多個選項之間選擇
Slider滑動條組件,通常用于快速調節設置值,如音量調節、亮度調節等應用場景
DownloadFileButton下載文件按鈕,獲取到當前應用在 Download 公共目錄中所屬的存儲路徑
ProgressButton文本下載按鈕,可顯示具體下載進度
SegmentButton分段按鈕組件,包含頁簽類分段按鈕、單選類分段按鈕、多選類分段按鈕
Filter多條件篩選,結合具體場景選擇合適篩選方式

文本與輸入

組件名稱作用
Text顯示一段文本的組件
TextArea多行文本輸入框組件,當輸入的文本內容超過組件寬度時會自動換行顯示
TextInput單行文本輸入框組件
RichEditor支持圖文混排和文本交互式編輯的組件
Search搜索框組件,適用于瀏覽器的搜索內容輸入框等應用場景
Span作為 Text、ContainerSpan 組件的子組件,用于顯示行內文本的組件
ImageSpanText、ContainerSpan 組件的子組件,用于顯示行內圖片
ContainerSpanText 組件的子組件,用于統一管理多個 Span、ImageSpan 的背景色及圓角弧度
SymbolSpan作為 Text 組件的子組件,用于顯示圖標小符號的組件
SymbolGlyph顯示圖標小符號的組件
Hyperlink超鏈接組件,組件寬高范圍內點擊實現跳轉
RichText富文本組件,解析并顯示 HTML 格式文本
SelectionMenu文本選擇菜單,適用于 RichEditor 組件或 Text 組件

圖片與視頻

組件名稱作用
Image圖片組件,常用于在應用中顯示圖片
ImageAnimator提供幀動畫組件來實現逐幀播放圖片的能力,可以配置需要播放的圖片列表
Video用于播放視頻文件并控制其播放狀態的組件

信息展示

組件名稱作用
AlphabetIndexer可以與容器組件聯動用于按邏輯結構快速定位容器顯示區域的組件
Badge信息標記組件,可以附加在單個組件上用于信息提醒的容器組件
Chip操作塊,用于搜索框歷史記錄或者郵件發送列表等場景
ChipGroupChipGroup 高級組件,提供操作塊群組,用于對文件或者資源內容進行分類等場景
Counter計數器組件,提供相應的增加或者減少的計數操作
advanced.CounterCounter 是用于精確調節數值的組件
DataPanel數據面板組件,用于將多個數據占比情況使用占比圖進行展示
ExceptionPrompt異常提示,適用于有異常需要提示異常內容的情況
Gauge數據量規圖表組件,用于將數據展示為環形圖表
LoadingProgress用于顯示加載動效的組件
Marquee跑馬燈組件,用于滾動展示一段單行文本
PatternLock圖案密碼鎖組件,以九宮格圖案的方式輸入密碼,用于密碼驗證場景
Progress進度條組件,用于顯示內容加載或操作處理等進度
Popup顯示特定樣式氣泡
QRCode用于顯示單個二維碼的組件
TextClock通過文本將當前系統時間顯示在設備上。支持不同時區的時間顯示,最高精度到秒級。
TextTimer通過文本顯示計時信息并控制其計時器狀態的組件
TreeView樹視圖作為一種分層顯示的列表,適合顯示嵌套結構

空白與分隔

組件名稱作用
Blank空白填充組件,在容器主軸方向上,空白填充組件具有自動填充容器空余部分的能力
Divider提供分隔器組件,分隔不同內容塊/內容元素

畫布繪制

組件名稱作用
Canvas提供畫布組件,用于自定義繪制圖形
CanvasGradient漸變對象
CanvasPattern指定圖像和重復方式創建圖片填充的模板
CanvasRenderingContext2D使用 RenderingContext 在 Canvas 組件上進行繪制,可以是矩形、文本、圖片等
DrawingRenderingContext在 Canvas 組件上進行繪制,繪制對象可以是矩形、文本、圖片等
ImageBitmap存儲 canvas 渲染的像素數據,用于高效加載靜態或動態圖像資源
ImageData存儲 canvas 渲染的像素數據,存儲原始像素數據
Matrix2D矩陣對象,可以對矩陣進行縮放、旋轉、平移等變換
OffscreenCanvas用于自定義繪制圖形
OffscreenCanvasRenderingContext2D在 Canvas 上進行離屏繪制,繪制對象可以是矩形、文本、圖片等
Path2D路徑對象,支持通過對象的接口進行路徑的描述,并通過 Canvas 的 stroke 接口或者 fill 接口進行繪制

圖形繪制

組件名稱作用
Circle用于繪制圓形的組件
Ellipse橢圓繪制組件
Line直線繪制組件
Polyline折線繪制組件
Polygon多邊形繪制組件
Path路徑繪制組件,根據繪制路徑生成封閉的自定義形狀
Rect矩形繪制組件
Shape繪制組件的父組件,父組件中會描述所有繪制組件均支持的通用屬性

渲染繪制

組件名稱作用
XComponent提供用于圖形繪制和媒體數據寫入的 Surface,XComponent 負責將其嵌入到視圖中
Component3D3D 渲染組件,可以加載 3D 模型資源并做自定義渲染,通常用于 3D 動效場景
EmbeddedComponent用于支持在當前頁面嵌入本應用內其他 EmbeddedUIExtensionAbility 提供的 UI

標題欄與工具欄

組件名稱作用
ComposeTitleBar一種普通標題欄,支持設置標題、頭像和副標題,可用于一級頁面、二級及其以上界面配置返回鍵
EditableTitleBar編輯型標題欄,適用于多選界面或者內容的編輯界面,一般采取左叉右勾的形式
SelectTitleBar下拉菜單標題欄包含一個下拉菜單,可用于頁面之間的切換;可用于一級頁面、二級及其以上界面
TabTitleBar頁簽型標題欄,用于頁面之間的切換。僅一級頁面適用
ToolBar具欄用于展示針對當前界面內容的操作選項,在界面底部顯示
SubHeader子標題,用于列表項頂部,將該組列表劃分為一個區塊,子標題名稱用來概括該區塊內容

菜單

組件名稱作用
Menu以垂直列表形式顯示的菜單
MenuItem用來展示菜單 Menu 中具體的 item 菜單項
MenuItemGroup該組件用來展示菜單 MenuItem 的分組
ContextMenu在頁面范圍內關閉通過 bindContextMenu 屬性綁定的菜單

動畫

組件名稱作用
屬性動畫 (animation)組件的某些通用屬性變化時,可以通過屬性動畫實現漸變過渡效果,提升用戶體驗
顯式動畫 (animateTo)提供全局 animateTo 顯式動畫接口來指定由于閉包代碼導致的狀態變化插入過渡動效
關鍵幀動畫 (keyframeAnimateTo)在 UIContext 中提供 keyframeAnimateTo 接口來指定若干個關鍵幀狀態,實現分段的動畫
頁面間轉場 (pageTransition)當路由進行切換時,通過在 pageTransition 函數中自定義頁面入場和頁面退場的轉場動效
組件內轉場 (transition)通過 transition 屬性配置轉場參數,在組件插入和刪除時顯示過渡動效
共享元素轉場 (sharedTransition)可以通過設置組件的該屬性將該元素標記為共享元素并設置對應的共享元素轉場動效
組件內隱式共享元素轉場 (geometryTransition)在視圖切換過程中提供絲滑的上下文傳承過渡
路徑動畫 (motionPath)設置組件進行位移動畫時的運動路徑
粒子動畫 (Particle)在一定范圍內隨機生成的大量粒子產生運動而組成的動畫
顯式動畫立即下發 (animateToImmediately)用來提供顯式動畫立即下發功能。同時加載多個屬性動畫的情況下,使用該接口可以立即執行閉包代碼中狀態變化導致的過渡動效

彈窗

組件名稱作用
警告彈窗 (AlertDialog)顯示警告彈窗組件,可設置文本內容與響應回調
列表選擇彈窗 (ActionSheet)列表彈窗
自定義彈窗 (CustomDialog)顯示自定義彈窗。使用彈窗組件時,可優先考慮自定義彈窗,便于自定義彈窗的樣式與內容
日歷選擇器彈窗 (CalendarPickerDialog)點擊日期彈出日歷選擇器彈窗,可選擇彈窗內任意日期
日期滑動選擇器彈窗 (DatePickerDialog)根據指定的日期范圍創建日期滑動選擇器,展示在彈窗上
時間滑動選擇器彈窗 (TimePickerDialog)以 24 小時的時間區間創建時間滑動選擇器,展示在彈窗上
文本滑動選擇器彈窗 (TextPickerDialog)根據指定的選擇范圍創建文本選擇器,展示在彈窗上
彈出框 (Dialog)一種模態窗口,用于在保持當前的上下文環境時,臨時展示用戶需關注的信息或待處理的操作,用戶在模態彈出框內完成上述交互任務

卡片

組件名稱作用
FormLink提供靜態卡片交互組件,用于靜態卡片內部和提供方應用間的交互,當前支持 router、message 和 call 三種類型的事件
FormMenu支持應用內長按菜單快捷添加卡片到桌面

安全

組件名稱作用
PasteButton安全控件的粘貼按鈕,用戶通過點擊該粘貼按鈕,可以臨時獲取讀取剪貼板權限
SaveButton安全控件的保存控件,用戶通過點擊該保存按鈕,可以臨時獲取存儲權限,而不需要權限彈框授權確認

主題

組件名稱作用
WithTheme用于設置應用局部頁面自定義主題風格,可設置子組件深淺色模式和自定義配色

原子化服務

組件名稱作用
AtomicServiceNavigation作為 Page 頁面的根容器使用,其內部默認包含了標題欄、內容區,其中內容區默認首頁顯示導航內容或非首頁顯示(NavDestination 的子組件),首頁和非首頁通過路由進行切換
AtomicServiceTabsAtomicServiceTabs 高級組件,對 Tabs 組件一些不需提供給用戶自定義設計的屬性進行簡化,限制最多顯示 5 個頁簽,固定頁簽樣式,位置和大小
AtomicServiceWeb為開發者提供滿足定制化訴求的 Web 高階組件,屏蔽原生 Web 組件中無需關注的接口,并提供 JS 擴展能力
InterstitialDialogActionInterstitialDialogAction 彈框在元服務中用于在保持當前的上下文環境時,臨時展示用戶需關注的信息或待處理的操作,用戶點擊彈框的不同區域可以觸發相應的動作
FullScreenLaunchComponent全屏啟動元服務組件,當被拉起方授權使用方可以嵌入式運行元服務時,使用方全屏嵌入式運行元服務;未授權時,使用方跳出式拉起元服務
NavPushPathHelper當跳轉的目標 NavDestination 在不同的 hsp 分包,且未被主包依賴,首次運行元服務只會下載安裝主包,需要使用 NavPushPathHelper 先下載安裝相應 hsp 分包,再將指定的 NavDestination 頁面信息入棧。使 Navigation 支持動態加載 hsp 分包后再跳轉

自定義占位組件

組件名稱作用
NodeContainer基礎組件,不支持尾隨添加子節點。組件接受一個 NodeController 的實例接口。需要 NodeController 組合使用
ContentSlot用于渲染并管理 Native 層使用 C-API 創建的組件

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:
http://www.pswp.cn/bicheng/81281.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/81281.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/81281.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HTTP GET報文解讀

考慮當瀏覽器發送一個HTTP GET報文時,通過Wireshark 俘獲到下列ASCII字符串: GET /cs453/index.html HTTP/1.1 Host: gaia.cs.umass.edu User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.2) Gecko/20040804 Netscape/7.2 (ax) Acc…

【Linux網絡】數據鏈路層

數據鏈路層 用于兩個設備(同一種數據鏈路節點)之間進行傳遞。 認識以太網 “以太網” 不是一種具體的網絡,而是一種技術標準;既包含了數據鏈路層的內容,也包含了一些物理層的內容。例如:規定了網絡拓撲結…

【打破信息差】萌新認識與入門算法競賽

閱前須知 XCPC萌新互助進步群2??:174495261 博客主頁:resot (關注resot謝謝喵) 針對具體問題,應當進行具體分析;并無放之四海而皆準的方法可適用于所有人。本人尊重并支持每位學習者對最佳學習路徑的自主選擇。本篇所列訓練方…

logrotate按文件大小進行日志切割

? 編寫logrotate文件,進行自定義切割方式 adminip-127-0-0-1:/data/test$ cat /etc/logrotate.d/test /data/test/test.log {size 1024M #文件達到1G就切割rotate 100 #保留100個文件compressdelaycompressmissingoknotifemptycopytruncate #這個情況服務不用…

2025認證杯二階段C題完整論文講解+多模型對比

基于延遲估計與多模型預測的化工生產過程不合格事件預警方法研究 摘要 化工生產過程中,污染物濃度如SO?和H?S對生產過程的控制至關重要。本文旨在通過數據分析與模型預測,提出一種基于延遲估計與特征提取的多模型預測方法,優化閾值設置&a…

前端精度問題全解析:用“挖掘機”快速“填平精度坑”的完美解決方案

寫在前面 “為什么我的計算在 React Native 中總是出現奇怪的精度問題?” —— 這可能是許多開發者在作前端程序猿的朋友們都會遇到的第一個頭疼問題。本文將深入探討前端精度問題的根源,我將以RN為例,并提供一系列實用解決方案,讓你的應用告別計算誤差。 一、精度問題的…

2024 睿抗機器人開發者大賽CAIP-編程技能賽-本科組(國賽) 解題報告 | 珂學家

前言 題解 2024 睿抗機器人開發者大賽CAIP-編程技能賽-本科組(國賽)。 國賽比省賽難一些,做得汗流浹背,T_T. RC-u1 大家一起查作弊 分值: 15分 這題真的太有意思,看看描述 在今年的睿抗比賽上,有同學的提交代碼如下&#xff1…

hghac和hgproxy版本升級相關操作和注意事項

文章目錄 環境文檔用途詳細信息 環境 系統平臺:N/A 版本:4.5.6,4.5.7,4.5.8 文檔用途 本文檔用于高可用集群環境中hghac組件和hgproxy組件替換和升級操作 詳細信息 1.關閉服務 所有數據節點都執行 1、關閉hgproxy服務 [roothgdb01 tools]# system…

userfaultfd內核線程D狀態問題排查

問題現象 運維反應機器上出現了很多D狀態進程,也kill不掉,然后將現場保留下來進行排查。 排查過程 都是內核線程,先看下內核棧D在哪了,發現D在了userfaultfd的pagefault流程。 uffd知識補充 uffd探究 uffd在firecracker與e2b的架構下使…

深入解析:構建高性能異步HTTP客戶端的工程實踐

一、架構設計原理與核心優勢 HTTP/2多路復用技術的本質是通過單一的TCP連接并行處理多個請求/響應流,突破了HTTP/1.1的隊頭阻塞限制。在異步編程模型下,這種特性與事件循環機制完美結合,形成了高性能網絡通信的黃金組合。相較于傳統同步客戶…

根據臺賬批量制作個人表

1. 前期材料準備 1)要有 人員總的信息臺賬 2)要有 個人明白卡模板 2. 開始操作 1)打開 人員總的信息臺賬,選擇所需要的數據模塊; 2)點擊插入,選擇數據透視表,按流程操作&…

《AI大模型應知應會100篇》第65篇:基于大模型的文檔問答系統實現

第65篇:基于大模型的文檔問答系統實現 📚 摘要:本文詳解如何構建一個基于大語言模型(LLM)的文檔問答系統,支持用戶上傳 PDF 或 Word 文檔,并根據其內容進行智能問答。從文檔解析、向量化、存儲到…

RTK哪個品牌好?2025年RTK主流品牌深度解析

在測繪領域,RTK 技術的發展日新月異,選擇一款性能卓越、穩定可靠的 RTK 設備至關重要。2025 年,市場上涌現出眾多優秀品牌,本文將深入解析幾大主流品牌的核心競爭力。 華測導航(CHCNAV):技術創…

SpringCloud微服務開發與實戰

本節內容帶你認識什么是微服務的特點,微服務的拆分,會使用Nacos實現服務治理,會使用OpenFeign實現遠程調用(通過黑馬商城來帶你了解實際開發中微服務項目) 前言:從谷歌搜索指數來看,國內從自201…

pgsql14自動創建表分區

最近有pgsql的分區表功能需求,沒想到都2025年了,pgsql和mysql還是沒有自身支持自動創建分區表的功能 現在pgsql數據庫層面還是只能用老三樣的辦法來處理這個問題,每個方法各有優劣 1. 觸發器 這是最傳統的方法,通過創建一個觸發…

math toolkit for real-time development讀書筆記一三角函數快速計算(1)

一、基礎知識 根據高中知識我們知道,很多函數都可以用泰勒級數展開。正余弦泰勒級數展開如下: 將其進一步抽象為公式可知: 正弦和余弦的泰勒級數具有高度結構化的模式,可拆解為以下核心特征: 1. 符號交替特性 正弦級…

uni-app 中適配 App 平臺

文章目錄 前言? 1. App 使用的 Runtime 架構:**WebView 原生容器(plus runtime)**📌 技術棧核心: ? 2. WebView Native 的通信機制詳解(JSBridge)📤 Web → Native 調用&#xf…

SpringBoot基礎(靜態資源導入)

靜態資源導入 在WebMvcAutoConfiguration自動配置類中 有一個添加資源的方法: public void addResourceHandlers(ResourceHandlerRegistry registry) { //如果靜態資源已經被自定義了,則直接生效if (!this.resourceProperties.isAddMappings()) {logg…

基于OpenCV的人臉識別:LBPH算法

文章目錄 引言一、概述二、代碼實現1. 代碼整體結構2. 導入庫解析3. 訓練數據準備4. 標簽系統5. 待識別圖像加載6. LBPH識別器創建7. 模型訓練8. 預測執行9. 結果輸出 三、 LBPH算法原理解析四、關鍵點解析五、改進方向總結 引言 人臉識別是計算機視覺領域的一個重要應用&…

ElasticSearch重啟之后shard未分配問題的解決

以下是Elasticsearch重啟后分片未分配問題的完整解決方案,結合典型故障場景與最新實踐: 一、快速診斷定位 ?檢查集群狀態 GET /_cluster/health?pretty # status為red/yellow時需關注unassigned_shards字段值 ? 2.查看未分配分片詳情 …