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 組件的子組件,用于顯示行內文本的組件 ImageSpan Text、ContainerSpan 組件的子組件,用于顯示行內圖片 ContainerSpan Text 組件的子組件,用于統一管理多個 Span、ImageSpan 的背景色及圓角弧度 SymbolSpan 作為 Text 組件的子組件,用于顯示圖標小符號的組件 SymbolGlyph 顯示圖標小符號的組件 Hyperlink 超鏈接組件,組件寬高范圍內點擊實現跳轉 RichText 富文本組件,解析并顯示 HTML
格式文本 SelectionMenu 文本選擇菜單,適用于 RichEditor 組件或 Text 組件
組件名稱 作用 Image 圖片組件,常用于在應用中顯示圖片 ImageAnimator 提供幀動畫組件來實現逐幀播放圖片的能力,可以配置需要播放的圖片列表 Video 用于播放視頻文件并控制其播放狀態的組件
組件名稱 作用 AlphabetIndexer 可以與容器組件聯動用于按邏輯結構快速定位容器顯示區域的組件 Badge 信息標記組件,可以附加在單個組件上用于信息提醒的容器組件 Chip 操作塊,用于搜索框歷史記錄或者郵件發送列表等場景 ChipGroup ChipGroup 高級組件,提供操作塊群組,用于對文件或者資源內容進行分類等場景 Counter 計數器組件,提供相應的增加或者減少的計數操作 advanced.Counter Counter 是用于精確調節數值的組件 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 負責將其嵌入到視圖中 Component3D 3D 渲染組件,可以加載 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 的子組件),首頁和非首頁通過路由進行切換 AtomicServiceTabs AtomicServiceTabs 高級組件,對 Tabs 組件一些不需提供給用戶自定義設計的屬性進行簡化,限制最多顯示 5 個頁簽,固定頁簽樣式,位置和大小 AtomicServiceWeb 為開發者提供滿足定制化訴求的 Web 高階組件,屏蔽原生 Web 組件中無需關注的接口,并提供 JS 擴展能力 InterstitialDialogAction InterstitialDialogAction 彈框在元服務中用于在保持當前的上下文環境時,臨時展示用戶需關注的信息或待處理的操作,用戶點擊彈框的不同區域可以觸發相應的動作 FullScreenLaunchComponent 全屏啟動元服務組件,當被拉起方授權使用方可以嵌入式運行元服務時,使用方全屏嵌入式運行元服務;未授權時,使用方跳出式拉起元服務 NavPushPathHelper 當跳轉的目標 NavDestination 在不同的 hsp 分包,且未被主包依賴,首次運行元服務只會下載安裝主包,需要使用 NavPushPathHelper 先下載安裝相應 hsp 分包,再將指定的 NavDestination 頁面信息入棧。使 Navigation 支持動態加載 hsp 分包后再跳轉
組件名稱 作用 NodeContainer 基礎組件,不支持尾隨添加子節點。組件接受一個 NodeController 的實例接口。需要 NodeController 組合使用 ContentSlot 用于渲染并管理 Native 層使用 C-API 創建的組件