0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkUI开发:常用布局【 创建列表(List)】

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-05-15 15:30 次阅读

创建列表(List)

  1. 列表容器是为了高效处理长列表的容器,能支持横向、竖向滚动,数据分组,分组头悬浮等功能
  2. 列表容器内的所有子元素必须是[ListItemGroup]或[ListItem],我们实际的内容是在这俩容器内部的
  3. 创建列表子元素一般使用[ForEach]或者[LazyForEach]来减少开发量
  4. 开发前请熟悉鸿蒙开发指导文档:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

List、ListItemGroup和ListItem组件关系

image.png

搜狗高速浏览器截图20240326151547.png

`HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿`

typescript
复制代码
List() {
    ListItem() {
    }
    ListItem() {
    }
    ListItemGroup() {
    }
    LazyForEach(this.dataSource, item = > {
        ListItem() {
            ...
        }
    })
}
// 设置垂直方向
.listDirection(Axis.Vertical)
// 粘性header
.sticky(StickyStyle.Header)
// 两列
.lanes(2)

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 开发
    +关注

    关注

    0

    文章

    352

    浏览量

    40670
  • 鸿蒙
    +关注

    关注

    55

    文章

    2090

    浏览量

    42261
收藏 人收藏

    评论

    相关推荐

    HarmonyOS开发ArkUI案例:【常用布局容器对齐方式】

    基于ArkTS扩展的声明式开发范式,实现Flex、Column、Row和Stack四种常用布局容器对齐方式。
    的头像 发表于 05-08 16:47 1093次阅读
    HarmonyOS<b class='flag-5'>开发</b><b class='flag-5'>ArkUI</b>案例:【<b class='flag-5'>常用布局</b>容器对齐方式】

    鸿蒙ArkUI开发常用布局【主轴】

    线性布局的子元素在线性方向上(水平方向和垂直方向)依次排列
    的头像 发表于 05-13 17:33 647次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>:<b class='flag-5'>常用布局</b>【主轴】

    鸿蒙开发OpenHarmony组件复用案例

    概述 在开发应用时,有些场景下的自定义组件具有相同的组件布局结构,仅有状态变量等承载数据的差异。这样的组件缓存起来,需要使用到该组件时直接复用, 减少重复创建和渲染的时间,从而提高应用页面的加载速度
    发表于 01-15 17:37

    鸿蒙开发-ArkUI框架实战【日历应用 】

    对于刚刚接触OpenHarmony应用开发开发者,最快的入门方式就是开发一个简单的应用,下面记录了一个日历应用的开发过程,通过日历应用的开发
    发表于 01-17 21:37

    鸿蒙开发实战-(ArkUIList组件和Grid组件的使用

    一系列相同宽度的列表项,连续、多行呈现同类数据,例如图片和文本。常见的列表有线性列表List列表)和网格
    发表于 01-18 20:18

    #2020征文-手机#图解鸿蒙列表组件ListContainer

    ListContainer的使用步骤主要包括:1、创建ListContainer2、创建列表项的布局3、使用POJO类封装数据源中与每个列表
    发表于 12-29 10:31

    ArkUI新能力,助力应用开发更便捷

    ArkUI框架的新增/增强能力。 ArkUI框架能力集 接下来,小编将从声明式绘制能力、混合开发能力、多样化布局能力、一多组件能力、UI动态化能力五大能力,详细说明
    发表于 02-15 11:40

    OpenHarmony使用ArkUI Inspector分析布局

    本文转载自《#2023 盲盒+码 # OpenHarmony使用ArkUI Inspector分析布局》,作者:zhushangyuan_ ● 摘要:视图的嵌套层次会影响应用的性能,开发者应该移除
    发表于 09-04 15:27

    鸿蒙应用ui布局

    请问,在用java开发鸿蒙用布局UI时,怎么才能全屏布局(不显示labelb标题)
    发表于 09-20 22:09

    鸿蒙ArkUI开发-Tabs组件的使用

    鸿蒙ArkUI开发-Tabs组件的使用
    的头像 发表于 01-19 16:01 886次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>-Tabs组件的使用

    鸿蒙跨平台框架:【ArkUi-X】创建工程

    鸿蒙推出了鸿ArkUi-X 框架所以就写个文章分享一下
    的头像 发表于 05-13 17:48 361次阅读
    <b class='flag-5'>鸿蒙</b>跨平台框架:【<b class='flag-5'>ArkUi</b>-X】<b class='flag-5'>创建</b>工程

    鸿蒙ArkUI开发常用布局【交叉轴】

    垂直于主轴方向的轴线。Row容器交叉轴为纵向,Column容器交叉轴为横向。
    的头像 发表于 05-14 09:52 239次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>:<b class='flag-5'>常用布局</b>【交叉轴】

    鸿蒙ArkUI开发常用布局【相对布局

    相对布局可以让子元素指定兄弟元素或父容器作为锚点,基于锚点做位置布局
    的头像 发表于 05-14 20:50 205次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>:<b class='flag-5'>常用布局</b>【相对<b class='flag-5'>布局</b>】

    鸿蒙ArkUI-X跨平台技术:【开发准备】

    本文档适用于ArkUI跨平台应用开发的初学者。通过开发环境搭建、应用工程创建、编译和运行,熟悉ArkUI跨平台应用
    的头像 发表于 05-24 10:40 192次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>-X跨平台技术:【<b class='flag-5'>开发</b>准备】

    鸿蒙ArkUI-X跨平台开发:【 编写第一个ArkUI-X应用】

    通过构建一个简单的ArkUI页面跳转示例,快速了解资源创建引用,路由代码编写和UI布局编写等应用开发流程。
    的头像 发表于 05-21 17:36 235次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>-X跨平台<b class='flag-5'>开发</b>:【 编写第一个<b class='flag-5'>ArkUI</b>-X应用】