列表具体item

2024-01-22 17:53 更新

用来展示列表具体item,必须配合List来使用。

说明

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含单个子组件。

接口

ListItem(value?: string)

从API version 9开始,该接口支持在ArkTS卡片中使用。

属性

除支持通用属性外,还支持以下属性:

名称

参数类型

描述

sticky(deprecated)

Sticky

设置ListItem吸顶效果。

默认值:Sticky.None

从API version9开始废弃,推荐使用List组件sticky属性

editable(deprecated)

boolean | EditMode

当前ListItem元素是否可编辑,进入编辑模式后可删除或移动列表项。

从API version9开始废弃。

默认值:false

selectable8+

boolean

当前ListItem元素是否可以被鼠标框选。

从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:

外层List容器的鼠标框选开启时,ListItem的框选才生效。

默认值:true

swipeAction9+

{

start?: CustomBuilder,

end?:CustomBuilder,

edgeEffect?: SwipeEdgeEffect,

}

用于设置ListItem的划出组件。

- start: ListItem向右划动时item左边的组件(List垂直布局时)或ListItem向下划动时item上方的组件(List水平布局时)。

- end: ListItem向左划动时item右边的组件(List垂直布局时)或ListItem向上划动时item下方的组件(List水平布局时)。

- edgeEffect: 滑动效果。

说明:

start和end对应的@builder函数中顶层必须是单个组件,不能是if/else、ForEach、LazyForEach语句。

Sticky(deprecated)枚举说明

从API version9开始废弃,推荐使用List组件stickyStyle枚举

名称

描述

None

无吸顶效果。

Normal

当前item吸顶。

Opacity

当前item吸顶显示透明度变化效果。

EditMode枚举说明

名称

描述

None

编辑操作不限制。

Deletable

可删除。

Movable

可移动。

SwipeEdgeEffect9+枚举说明

名称

描述

Spring

ListItem划动距离超过划出组件大小后可以继续划动,松手后按照弹簧阻尼曲线回弹。

None

ListItem划动距离不能超过划出组件大小。

事件

名称

功能描述

onSelect(event: (isSelected: boolean) => void)8+

ListItem元素被鼠标框选的状态改变时触发回调。

isSelected:进入鼠标框选范围即被选中返回true, 移出鼠标框选范围即未被选中返回false。

从API version 9开始,该接口支持在ArkTS卡片中使用。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ListItemExample {
  5. private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  6. build() {
  7. Column() {
  8. List({ space: 20, initialIndex: 0 }) {
  9. ForEach(this.arr, (item) => {
  10. ListItem() {
  11. Text('' + item)
  12. .width('100%').height(100).fontSize(16)
  13. .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
  14. }
  15. }, item => item)
  16. }.width('90%')
  17. }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  18. }
  19. }

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ListItemExample2 {
  5. @State message: string = 'Hello World'
  6. @Builder itemEnd() {
  7. Row () {
  8. Button("Del").margin("4vp")
  9. Button("Set").margin("4vp")
  10. }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
  11. }
  12. build() {
  13. Column() {
  14. List({space:10}) {
  15. ListItem() {
  16. Text(this.message)
  17. .width('100%')
  18. .height(100)
  19. .fontSize(16)
  20. .textAlign(TextAlign.Center)
  21. .borderRadius(10)
  22. .backgroundColor(0xFFFFFF)
  23. }
  24. .swipeAction({ end:this.itemEnd})
  25. ListItem() {
  26. Text(this.message)
  27. .width('100%')
  28. .height(100)
  29. .fontSize(16)
  30. .textAlign(TextAlign.Center)
  31. .borderRadius(10)
  32. .backgroundColor(0xFFFFFF)
  33. }
  34. .swipeAction({ start:this.itemEnd})
  35. }
  36. }
  37. .padding(10)
  38. .backgroundColor(0xDCDCDC)
  39. .width('100%')
  40. .height('100%')
  41. }
  42. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号