harmony 鸿蒙ListItem

  • 2022-08-09
  • 浏览 (1517)

ListItem

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

说明：

  • 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  • 该组件的父组件只能是List或者ListItemGroup。

子组件

可以包含单个子组件。

接口

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

ListItem10+

ListItem(value?: ListItemOptions)

参数：

参数名 参数类型 必填 参数描述
value ListItemOptions 否 为ListItem提供可选参数, 该对象内含有ListItemStyle枚举类型的style参数。

ListItem(deprecated)

ListItem(value?: string)

从API version 10开始, 该接口不再维护，推荐使用ListItem10+。

参数：

参数名 参数类型 必填 参数描述
value string 否 无

属性

除支持通用属性外，还支持以下属性：

名称 参数类型 描述
sticky(deprecated) Sticky 设置ListItem吸顶效果。
默认值：Sticky.None
从API version9开始废弃，推荐使用List组件sticky属性。
editable(deprecated) boolean | EditMode 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动列表项。
从API version9开始废弃。
默认值：false
selectable8+ boolean 当前ListItem元素是否可以被鼠标框选。
说明：
外层List容器的鼠标框选开启时，ListItem的框选才生效。
默认值：true
selected10+ boolean 设置当前ListItem选中状态。该属性支持$$双向绑定变量。
说明：
该属性需要在设置选中态样式前使用才能生效选中态样式。
默认值：false
swipeAction9+ {
start?: CustomBuilder | SwipeActionItem,
end?:CustomBuilder | SwipeActionItem,
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语句。
- 滑动手势只在listItem区域上，如果子组件划出ListItem区域外，在ListItem以外部分不会响应划动手势。所以在多列模式下，建议不要将划出组件设置太宽。

Sticky(deprecated)枚举说明

从API version9开始废弃，推荐使用List组件stickyStyle枚举。 |名称|描述| |——–|——–| |None|无吸顶效果。| |Normal|当前item吸顶。| |Opacity|当前item吸顶显示透明度变化效果。|

EditMode(deprecated)枚举说明

从API version9开始废弃。 |名称 |描述 | |——|———| |None |编辑操作不限制。 | |Deletable|可删除。| |Movable|可移动。|

SwipeEdgeEffect9+枚举说明

名称 描述
Spring ListItem划动距离超过划出组件大小后可以继续划动。如果设置了删除区域，ListItem划动距离超过删除阈值后可以继续划动，松手后按照弹簧阻尼曲线回弹。
None ListItem划动距离不能超过划出组件大小。如果设置了删除区域，ListItem划动距离不能超过删除阈值，并且在设置删除回调的情况下，达到删除阈值后松手触发删除回调。

SwipeActionItem10+对象说明

List垂直布局，ListItem向右滑动，item左边的长距离滑动删除选项或向左滑动时，item右边的长距离滑动删除选项。
List水平布局，ListItem向上滑动，item下边的长距离滑动删除选项或向下滑动时，item上边的长距离滑动删除选项。

名称 参数类型 必填 描述
actionAreaDistance Length 否 设置组件长距离滑动删除距离阈值。
默认值：56vp
说明：
不支持设置百分比。
删除距离阈值大于item宽度减去划出组件宽度，或删除距离阈值小于等于0就不会设置删除区域。
onAction () => void 否 组件进入长距删除区后删除ListItem时调用，进入长距删除区后抬手时触发。
说明：
滑动后松手的位置超过或等于设置的距离阈值，并且设置的距离阈值有效时才会触发。
onEnterActionArea () => void 否 在滑动条目进入删除区域时调用，只触发一次，当再次进入时仍触发。
onExitActionArea () => void 否 当滑动条目退出删除区域时调用，只触发一次，当再次退出时仍触发。
builder CustomBuilder 否 当列表项向右或向右滑动（当列表方向为“垂直”时），向下或向下滑动（当列方向为“水平”时）时显示的操作项。

ListItemOptions10+对象说明

名称 参数类型 必填 描述
style ListItemStyle 否 设置List组件卡片样式。
默认值: ListItemStyle.NONE
设置为ListItemStyle.NONE时无样式。
设置为ListItemStyle.CARD时，必须配合ListItemGroup的ListItemGroupStyle.CARD同时使用，显示默认卡片样式。
卡片样式下，ListItem默认规格：高度48vp，宽度100%。
卡片样式下, 为卡片内的列表选项提供了默认的focus、hover、press、selected和disable样式。
说明：
当前卡片模式下，不支持listDirection属性设置，使用默认Axis.Vertical排列方向。
当前卡片模式下，List属性alignListItem默认为ListItemAlign.Center，居中对齐显示。
若仅设置ListItemStyle.CARD，未设置ListItemGroupStyle.CARD时，只显示部分卡片样式及功能。

ListItemStyle10+枚举说明

名称 描述
NONE 无样式。
CARD 显示默认卡片样式。

事件

名称 功能描述
onSelect(event: (isSelected: boolean) => void)8+ ListItem元素被鼠标框选的状态改变时触发回调。
isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。

示例

示例1

// xxx.ets
@Entry
@Component
struct ListItemExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
      }.width('90%')
      .scrollBar(BarState.Off)
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

zh-cn_image_0000001219864159

示例2

// xxx.ets
@Entry
@Component
struct ListItemExample2 {
  @State message: string = 'Hello World'
  @State arr: number[] = [0, 1, 2, 3, 4]
  @State enterEndDeleteAreaString: string = "not enterEndDeleteArea"
  @State exitEndDeleteAreaString: string = "not exitEndDeleteArea"

  @Builder itemEnd() {
    Row() {
      Button("Delete").margin("4vp")
      Button("Set").margin("4vp")
    }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text("item" + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
          .transition({ type: TransitionType.Delete, opacity: 0 })
          .swipeAction({
            end: {
              builder: () => { this.itemEnd() },
              onAction: () => {
                animateTo({ duration: 1000 }, () => {
                  let index = this.arr.indexOf(item)
                  this.arr.splice(index, 1)
                })
              },
              actionAreaDistance: 56,
              onEnterActionArea: () => {
                this.enterEndDeleteAreaString = "enterEndDeleteArea"
                this.exitEndDeleteAreaString = "not exitEndDeleteArea"
              },
              onExitActionArea: () => {
                this.enterEndDeleteAreaString = "not enterEndDeleteArea"
                this.exitEndDeleteAreaString = "exitEndDeleteArea"
              }
            }
          })
        }, (item: string) => item)
      }
      Text(this.enterEndDeleteAreaString).fontSize(20)
      Text(this.exitEndDeleteAreaString).fontSize(20)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}

deleteListItem

示例3

// xxx.ets
@Entry
@Component
struct ListItemExample3 {
  build() {
    Column() {
      List({ space: "4vp", initialIndex: 0 }) {
        ListItemGroup({ style: ListItemGroupStyle.CARD }) {
          ForEach([ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE], (itemStyle: number, index?: number) => {
            ListItem({ style: itemStyle }) {
              Text("" + index)
                .width("100%")
                .textAlign(TextAlign.Center)
            }
          })
        }
        ForEach([ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE], (itemStyle: number, index?: number) => {
          ListItem({ style: itemStyle }) {
            Text("" + index)
              .width("100%")
              .textAlign(TextAlign.Center)
          }
        })
      }
      .width('100%')
      .multiSelectable(true)
      .backgroundColor(0xDCDCDC) // 浅蓝色的List
    }
    .width('100%')
    .padding({ top: 5 })
  }
}

ListItemStyle

你可能感兴趣的鸿蒙文章

harmony 鸿蒙基于ArkTS的声明式开发范式

harmony 鸿蒙@ohos.arkui.advanced.Counter（计数器组件）

harmony 鸿蒙@ohos.arkui.advanced.SegmentButton（分段按钮）

harmony 鸿蒙@ohos.multimedia.avCastPicker (投播组件)

harmony 鸿蒙属性动画

harmony 鸿蒙枚举说明

harmony 鸿蒙Blank

harmony 鸿蒙Button

harmony 鸿蒙CalendarPicker

harmony 鸿蒙Checkbox

0  赞
  • 所属分类： 后端技术
  • 本文标签： 软件 鸿蒙
  • 版权声明： 原创文章如转载，请注明本文链接: https://www.seaxiang.com/blog/0d40a4873946437a8157fe969142da60
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录