閱讀(833) 書簽贊(0) 我要糾錯

列表具體item

2024-01-22 17:53 更新

用來展示列表具體item，必須配合List來使用。

說明

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

子組件

可以包含單個子組件。

接口

ListItem(value?: string)

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

屬性

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

名稱	參數(shù)類型	描述
sticky(deprecated)	Sticky	設(shè)置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, }	用于設(shè)置ListItem的劃出組件。 - start: ListItem向右劃動時item左邊的組件（List垂直布局時）或ListItem向下劃動時item上方的組件（List水平布局時）。 - end: ListItem向左劃動時item右邊的組件（List垂直布局時）或ListItem向上劃動時item下方的組件（List水平布局時）。 - edgeEffect: 滑動效果。說明： start和end對應(yīng)的@builder函數(shù)中頂層必須是單個組件，不能是if/else、ForEach、LazyForEach語句。

Sticky(deprecated)枚舉說明

從API version9開始廢棄，推薦使用List組件stickyStyle枚舉。

名稱	描述
None	無吸頂效果。
Normal	當前item吸頂。
Opacity	當前item吸頂顯示透明度變化效果。

EditMode枚舉說明

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

SwipeEdgeEffect9+枚舉說明

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

事件

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

名稱

功能描述

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

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

isSelected：進入鼠標框選范圍即被選中返回true，移出鼠標框選范圍即未被選中返回false。

從API version 9開始，該接口支持在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%')
  }
}