鸿蒙之List组件详解

前言:

List 组件的基本用法,可以用它来展示列表,并且实现列表滚动,日常开发的时候还可以用它来实现更为复杂的效果。
列表是一种复杂的容器,当列表项达到一定数量,超过List容器组件大小 时,可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集,例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求(如通讯录、音乐列表、购物清单等)。

List 表示列表容器,ListItem表示单个列表项,可以包含单个子组件。

基本用法:

js 复制代码
@Entry
@Component
struct Index {
  build() {
    List(){
      ListItem(){
        Text('hello')
      }
      ListItem(){
        Text('hello')
      }
      ListItem(){
        Text('hello')
      }
    }
  }
}

效果如下:

常用属性:

滚动条状态 属性:scrollBar()

参数:枚举 BarState

  • Off: 不显示
  • On:常驻显示
  • Auto:按需显示(触摸时显示,2s 后消失)
js 复制代码
List() {
  listItem()
  ......
}
	.scrollBar(BarState.Off)

分割线样式 列表默认没有分割线

属性:divider()

参数:{ strokeWidth: 数字, color?: 'color', startMargin?: 数字, endMargin?: 数字 }

js 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      List() {
        ListItem() {
          Text('hello')
        }

        ListItem() {
          Text('hello')
        }

        ListItem() {
          Text('hello')
        }

        ListItem() {
          Text('hello')
        }
      }
      .border({width:1})
      .divider({
        strokeWidth: 1, // 设置分割线的宽度为1
        color: Color.Black, // 设置分割线的颜色为橙色
        startMargin: 10, // 设置分割线起点的边距为10
        endMargin: 10           // 设置分割线终点的边距为10
      })
    }
  }
}
相关推荐
jhonjson9 分钟前
在Flutter中,禁止侧滑的方法
前端·javascript·flutter
一名技术极客15 分钟前
Three.js 搭建3D隧道监测
开发语言·javascript·3d
Dragon Wu28 分钟前
前端 JS面向对象 原型 prototype
前端·javascript
看月亮的方源38 分钟前
工作笔记--css文本溢出,盒子模型,NextTick回顾、console调试、样式穿透deep全家,el-upload文件上传,.9图
前端·javascript·vue.js
没资格抱怨1 小时前
vue3中利用路由信息渲染菜单栏
前端·vue.js
TttHhhYy1 小时前
vue写后台管理系统,有个需求将所有的$message消息提示换成确认框来增强消息提示效果,遇到嵌套过多的情况,出现某些问题
前端·javascript·vue.js·anti-design-vue
亿牛云爬虫专家1 小时前
如何在Puppeteer中实现表单自动填写与提交:问卷调查
javascript·爬虫·爬虫代理·puppeteer·问卷调查·代理ip·表单
excel1 小时前
three Lensflare 镜头光晕
前端
FIRE1 小时前
uniapp小程序分享使用canvas自定义绘制 vue3
前端·小程序·uni-app
四喜花露水1 小时前
vue elementui el-dropdown-item设置@click无效的解决方案
前端·vue.js·elementui