閱讀(627) 書(shū)簽贊(0) 我要糾錯(cuò)

列表具體item

2024-01-22 17:53 更新

用來(lái)展示列表具體item，必須配合List來(lái)使用。

說(shuō)明

該組件從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

可以包含單個(gè)子組件。

接口

ListItem(value?: string)

從API version 9開(kāi)始，該接口支持在ArkTS卡片中使用。

屬性

除支持通用屬性外，還支持以下屬性：

名稱	參數(shù)類型	描述
sticky(deprecated)	Sticky	設(shè)置ListItem吸頂效果。默認(rèn)值：Sticky.None 從API version9開(kāi)始廢棄，推薦使用List組件sticky屬性。
editable(deprecated)	boolean \| EditMode	當(dāng)前ListItem元素是否可編輯，進(jìn)入編輯模式后可刪除或移動(dòng)列表項(xiàng)。從API version9開(kāi)始廢棄。默認(rèn)值：false
selectable8+	boolean	當(dāng)前ListItem元素是否可以被鼠標(biāo)框選。從API version 9開(kāi)始，該接口支持在ArkTS卡片中使用。說(shuō)明：外層List容器的鼠標(biāo)框選開(kāi)啟時(shí)，ListItem的框選才生效。默認(rèn)值：true
swipeAction9+	{ start?: CustomBuilder, end?:CustomBuilder, edgeEffect?: SwipeEdgeEffect, }	用于設(shè)置ListItem的劃出組件。 - start: ListItem向右劃動(dòng)時(shí)item左邊的組件（List垂直布局時(shí)）或ListItem向下劃動(dòng)時(shí)item上方的組件（List水平布局時(shí)）。 - end: ListItem向左劃動(dòng)時(shí)item右邊的組件（List垂直布局時(shí)）或ListItem向上劃動(dòng)時(shí)item下方的組件（List水平布局時(shí)）。 - edgeEffect: 滑動(dòng)效果。說(shuō)明： start和end對(duì)應(yīng)的@builder函數(shù)中頂層必須是單個(gè)組件，不能是if/else、ForEach、LazyForEach語(yǔ)句。

Sticky(deprecated)枚舉說(shuō)明

從API version9開(kāi)始廢棄，推薦使用List組件stickyStyle枚舉。

名稱	描述
None	無(wú)吸頂效果。
Normal	當(dāng)前item吸頂。
Opacity	當(dāng)前item吸頂顯示透明度變化效果。

EditMode枚舉說(shuō)明

名稱	描述
None	編輯操作不限制。
Deletable	可刪除。
Movable	可移動(dòng)。

SwipeEdgeEffect9+枚舉說(shuō)明

名稱	描述
Spring	ListItem劃動(dòng)距離超過(guò)劃出組件大小后可以繼續(xù)劃動(dòng)，松手后按照彈簧阻尼曲線回彈。
None	ListItem劃動(dòng)距離不能超過(guò)劃出組件大小。

事件

名稱	功能描述
onSelect(event: (isSelected: boolean) => void)8+	ListItem元素被鼠標(biāo)框選的狀態(tài)改變時(shí)觸發(fā)回調(diào)。 isSelected：進(jìn)入鼠標(biāo)框選范圍即被選中返回true，移出鼠標(biāo)框選范圍即未被選中返回false。從API version 9開(kāi)始，該接口支持在ArkTS卡片中使用。

名稱

功能描述

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

ListItem元素被鼠標(biāo)框選的狀態(tài)改變時(shí)觸發(fā)回調(diào)。

isSelected：進(jìn)入鼠標(biāo)框選范圍即被選中返回true，移出鼠標(biāo)框選范圍即未被選中返回false。

從API version 9開(kāi)始，該接口支持在ArkTS卡片中使用。

示例


// 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%')
  }
}