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

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

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

jf_46214456 ? 來(lái)源:jf_46214456 ? 作者:jf_46214456 ? 2024-05-15 15:30 ? 次閱讀

創(chuàng)建列表(List)

  1. 列表容器是為了高效處理長(zhǎng)列表的容器,能支持橫向、豎向滾動(dòng),數(shù)據(jù)分組,分組頭懸浮等功能
  2. 列表容器內(nèi)的所有子元素必須是[ListItemGroup]或[ListItem],我們實(shí)際的內(nèi)容是在這倆容器內(nèi)部的
  3. 創(chuàng)建列表子元素一般使用[ForEach]或者[LazyForEach]來(lái)減少開發(fā)量
  4. 開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

List、ListItemGroup和ListItem組件關(guān)系

image.png

搜狗高速瀏覽器截圖20240326151547.png

`HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿`

typescript
復(fù)制代碼
List() {
    ListItem() {
    }
    ListItem() {
    }
    ListItemGroup() {
    }
    LazyForEach(this.dataSource, item = > {
        ListItem() {
            ...
        }
    })
}
// 設(shè)置垂直方向
.listDirection(Axis.Vertical)
// 粘性header
.sticky(StickyStyle.Header)
// 兩列
.lanes(2)

審核編輯 黃宇

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

    關(guān)注

    0

    文章

    370

    瀏覽量

    40844
  • 鴻蒙
    +關(guān)注

    關(guān)注

    57

    文章

    2352

    瀏覽量

    42863
收藏 人收藏

    評(píng)論

    相關(guān)推薦

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

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

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

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

    鴻蒙開發(fā)-ArkUI框架實(shí)戰(zhàn)【日歷應(yīng)用 】

    對(duì)于剛剛接觸OpenHarmony應(yīng)用開發(fā)開發(fā)者,最快的入門方式就是開發(fā)一個(gè)簡(jiǎn)單的應(yīng)用,下面記錄了一個(gè)日歷應(yīng)用的開發(fā)過(guò)程,通過(guò)日歷應(yīng)用的開發(fā)
    發(fā)表于 01-17 21:37

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

    一系列相同寬度的列表項(xiàng),連續(xù)、多行呈現(xiàn)同類數(shù)據(jù),例如圖片和文本。常見的列表有線性列表List列表)和網(wǎng)格
    發(fā)表于 01-18 20:18

    ArkUI新能力,助力應(yīng)用開發(fā)更便捷

    ArkUI框架的新增/增強(qiáng)能力。 ArkUI框架能力集 接下來(lái),小編將從聲明式繪制能力、混合開發(fā)能力、多樣化布局能力、一多組件能力、UI動(dòng)態(tài)化能力五大能力,詳細(xì)說(shuō)明
    發(fā)表于 02-15 11:40

    OpenHarmony使用ArkUI Inspector分析布局

    本文轉(zhuǎn)載自《#2023 盲盒+碼 # OpenHarmony使用ArkUI Inspector分析布局》,作者:zhushangyuan_ ● 摘要:視圖的嵌套層次會(huì)影響應(yīng)用的性能,開發(fā)者應(yīng)該移除
    發(fā)表于 09-04 15:27

    鴻蒙應(yīng)用ui布局

    請(qǐng)問(wèn),在用java開發(fā)鴻蒙應(yīng)用布局UI時(shí),怎么才能全屏布局(不顯示labelb標(biāo)題)
    發(fā)表于 09-20 22:09

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

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

    鴻蒙跨平臺(tái)框架:【ArkUi-X】創(chuàng)建工程

    鴻蒙推出了鴻ArkUi-X 框架所以就寫個(gè)文章分享一下
    的頭像 發(fā)表于 05-13 17:48 ?952次閱讀
    <b class='flag-5'>鴻蒙</b>跨平臺(tái)框架:【<b class='flag-5'>ArkUi</b>-X】<b class='flag-5'>創(chuàng)建</b>工程

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

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

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

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

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

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

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

    創(chuàng)建輪播(Swiper)實(shí)現(xiàn)輪播圖功能
    的頭像 發(fā)表于 05-15 20:22 ?473次閱讀
    <b class='flag-5'>鴻蒙</b>應(yīng)<b class='flag-5'>用布局</b><b class='flag-5'>ArkUI</b>:【其他<b class='flag-5'>常用布局</b>容器和組件】介紹

    鴻蒙ArkUI-X跨平臺(tái)技術(shù):【開發(fā)準(zhǔn)備】

    本文檔適用于ArkUI跨平臺(tái)應(yīng)用開發(fā)的初學(xué)者。通過(guò)開發(fā)環(huán)境搭建、應(yīng)用工程創(chuàng)建、編譯和運(yùn)行,熟悉ArkUI跨平臺(tái)應(yīng)用
    的頭像 發(fā)表于 05-24 10:40 ?477次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>-X跨平臺(tái)技術(shù):【<b class='flag-5'>開發(fā)</b>準(zhǔn)備】

    鴻蒙ArkUI-X跨平臺(tái)開發(fā):【 編寫第一個(gè)ArkUI-X應(yīng)用】

    通過(guò)構(gòu)建一個(gè)簡(jiǎn)單的ArkUI頁(yè)面跳轉(zhuǎn)示例,快速了解資源創(chuàng)建引用,路由代碼編寫和UI布局編寫等應(yīng)用開發(fā)流程。
    的頭像 發(fā)表于 05-21 17:36 ?711次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>-X跨平臺(tái)<b class='flag-5'>開發(fā)</b>:【 編寫第一個(gè)<b class='flag-5'>ArkUI</b>-X應(yīng)用】