代码拉取完成,页面将自动刷新
用来展示列表具体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元素是否可以被鼠标框选。 说明: 外层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语句。 |
从API version9开始废弃不再使用,推荐使用List组件stickyStyle枚举。
名称 | 枚举值 | 描述 |
---|---|---|
None | 0 | 无吸顶效果。 |
Normal | 1 | 当前item吸顶。 |
Opacity | 2 | 当前item吸顶显示透明度变化效果。 |
名称 | 枚举值 | 描述 |
---|---|---|
None | 0 | 编辑操作不限制。 |
Deletable | 1 | 可删除。 |
Movable | 2 | 可移动。 |
名称 | 枚举值 | 描述 |
---|---|---|
Spring | 0 | ListItem划动距离超过划出组件大小后可以继续划动。 如果设置了删除区域,ListItem划动距离超过删除阈值后可以继续划动, 松手后按照弹簧阻尼曲线回弹。 |
None | 1 | ListItem划动距离不能超过划出组件大小。 如果设置了删除区域,ListItem划动距离不能超过删除阈值, 并且在设置删除回调的情况下,达到删除阈值后松手触发删除回调。 |
名称 | 功能描述 |
---|---|
onSelect(event: (isSelected: boolean) => void)8+ | ListItem元素被鼠标框选的状态改变时触发回调。 isSelected:进入鼠标框选范围即被选中返回true, 移出鼠标框选范围即未被选中返回false。 |
// 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) => {
ListItem() {
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}
}, item => item)
}.width('90%')
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}
// xxx.ets
@Entry
@Component
struct ListItemExample2 {
@State message: string = 'Hello World'
@Builder itemEnd() {
Row () {
Button("Del").margin("4vp")
Button("Set").margin("4vp")
}.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
}
build() {
Column() {
List({space:10}) {
ListItem() {
Text(this.message)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
.swipeAction({ end:this.itemEnd})
ListItem() {
Text(this.message)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
.swipeAction({ start:this.itemEnd})
}
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。