0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙應用布局ArkUI:【其他常用布局容器和組件】介紹

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-05-15 20:22 ? 次閱讀

其他常用布局容器和組件

  • 創(chuàng)建輪播(Swiper)實現(xiàn)輪播圖功能

開發(fā)前請熟悉鴻蒙開發(fā)指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

image.png

  • 柵格布局(GridRow/GridCol)和Grid布局類似,但是可以根據(jù)設置的分割點動態(tài)顯示列數(shù)。特別適合做多設備適配布局

image.png

  • Badge實現(xiàn)消息小紅點和消息數(shù)功能

image.png

  • WaterFlow實現(xiàn)瀑布流功能

image.png

  • Video實現(xiàn)視頻播放功能

image.png

  • Web實現(xiàn)加載本地、遠程網(wǎng)頁功能
  • QRCode實現(xiàn)二維碼功能

image.png

  • TextTimer實現(xiàn)倒計時顯示功能

image.png

  • DataPanel數(shù)據(jù)面板組件,使用占比圖展示多個數(shù)據(jù)的占比情況

image.png

image.png

  • Marquee走馬燈效果
  • PatternLock圖形密碼鎖組件

image.png

  • Rating評分組件

image.png

  • Stepper步驟導航器組件,主要用于引導介紹功能

審核編輯 黃宇

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權轉載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 組件
    +關注

    關注

    1

    文章

    496

    瀏覽量

    17744
  • 鴻蒙
    +關注

    關注

    57

    文章

    2272

    瀏覽量

    42526
收藏 人收藏

    評論

    相關推薦

    使用TMUXHS4412多路復用器的PCIe?Gen 4.0應用布局指南

    電子發(fā)燒友網(wǎng)站提供《使用TMUXHS4412多路復用器的PCIe?Gen 4.0應用布局指南.pdf》資料免費下載
    發(fā)表于 09-14 10:41 ?0次下載
    使用TMUXHS4412多路復用器的PCIe?Gen 4.0應<b class='flag-5'>用布局</b>指南

    鴻蒙ArkTS容器組件:Scroll

    可滾動的容器組件,當子組件布局尺寸超過父組件的尺寸時,內容可以滾動。
    的頭像 發(fā)表于 07-12 15:24 ?748次閱讀

    鴻蒙ArkTS容器組件:Flex

    以彈性方式布局組件容器組件
    的頭像 發(fā)表于 07-08 10:19 ?286次閱讀
    <b class='flag-5'>鴻蒙</b>ArkTS<b class='flag-5'>容器</b><b class='flag-5'>組件</b>:Flex

    鴻蒙用布局ArkUI【基礎運用案例】

    平級導航的復合網(wǎng)格視圖常出現(xiàn)在同時展示多種不同內容的界面。
    的頭像 發(fā)表于 05-17 11:19 ?340次閱讀
    <b class='flag-5'>鴻蒙</b>應<b class='flag-5'>用布局</b><b class='flag-5'>ArkUI</b>【基礎運用案例】

    鴻蒙ArkUI開發(fā):常用布局【創(chuàng)建網(wǎng)格(Grid/GridItem)】

    網(wǎng)格布局主要用于處理固定行列的UI,也支持動態(tài)調整。很類似iOS中的UICollectionView。
    的頭像 發(fā)表于 05-15 16:24 ?562次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>開發(fā):<b class='flag-5'>常用布局</b>【創(chuàng)建網(wǎng)格(Grid/GridItem)】

    鴻蒙ArkUI開發(fā):常用布局【 創(chuàng)建列表(List)】

    列表容器是為了高效處理長列表的容器,能支持橫向、豎向滾動,數(shù)據(jù)分組,分組頭懸浮等功能
    的頭像 發(fā)表于 05-15 15:30 ?536次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>開發(fā):<b class='flag-5'>常用布局</b>【 創(chuàng)建列表(List)】

    鴻蒙ArkUI開發(fā):常用布局【相對布局

    相對布局可以讓子元素指定兄弟元素或父容器作為錨點,基于錨點做位置布局
    的頭像 發(fā)表于 05-14 20:50 ?380次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>開發(fā):<b class='flag-5'>常用布局</b>【相對<b class='flag-5'>布局</b>】

    鴻蒙ArkUI開發(fā):常用布局【交叉軸】

    垂直于主軸方向的軸線。Row容器交叉軸為縱向,Column容器交叉軸為橫向。
    的頭像 發(fā)表于 05-14 09:52 ?421次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>開發(fā):<b class='flag-5'>常用布局</b>【交叉軸】

    鴻蒙ArkUI開發(fā):常用布局【彈性布局方向圖】

    FlexDirection.Row(默認值):主軸為水平方向,子組件從起始端沿著水平方向開始排布
    的頭像 發(fā)表于 05-14 09:23 ?287次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>開發(fā):<b class='flag-5'>常用布局</b>【彈性<b class='flag-5'>布局</b>方向圖】

    鴻蒙ArkUI開發(fā):常用布局【主軸】

    線性布局的子元素在線性方向上(水平方向和垂直方向)依次排列
    的頭像 發(fā)表于 05-13 17:33 ?759次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>開發(fā):<b class='flag-5'>常用布局</b>【主軸】

    HarmonyOS實戰(zhàn)開發(fā)-Flex布局性能提升使用指導

    長度分配設置為最常用場景的布局結果,使子組件主軸長度總和等于Flex容器主軸長度。 最后 如果大家覺得這篇內容對學習鴻蒙開發(fā)有幫助,我想邀請
    發(fā)表于 05-10 14:26

    HarmonyOS開發(fā)ArkUI案例:【常用布局容器對齊方式】

    基于ArkTS擴展的聲明式開發(fā)范式,實現(xiàn)Flex、Column、Row和Stack四種常用布局容器對齊方式。
    的頭像 發(fā)表于 05-08 16:47 ?1360次閱讀
    HarmonyOS開發(fā)<b class='flag-5'>ArkUI</b>案例:【<b class='flag-5'>常用布局</b><b class='flag-5'>容器</b>對齊方式】

    鴻蒙ArkUI開發(fā)-Tabs組件的使用

    鴻蒙ArkUI開發(fā)-Tabs組件的使用
    的頭像 發(fā)表于 01-19 16:01 ?1456次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>開發(fā)-Tabs<b class='flag-5'>組件</b>的使用

    鴻蒙開發(fā)實戰(zhàn)-(ArkUI)List組件和Grid組件的使用

    一系列相同寬度的列表項,連續(xù)、多行呈現(xiàn)同類數(shù)據(jù),例如圖片和文本。常見的列表有線性列表(List列表)和網(wǎng)格布局(Grid列表): 為了幫助開發(fā)者構建包含列表的應用,ArkUI提供了List組件和Grid
    發(fā)表于 01-18 20:18

    鴻蒙NEXT-Column和Row組件的使用

    1 概述 一個豐富的頁面需要很多組件組成,那么,我們如何才能讓這些組件有條不紊地在頁面上布局呢?這就需要借助容器組件來實現(xiàn)。
    發(fā)表于 01-18 16:44