List

列表包含一系列相同寬度的列表項。適合連續、多行呈現同類數據，例如圖片和文本。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

• 該組件從API Version 7開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。
• 該組件回彈的前提是要有滾動。內容小于一屏時，沒有回彈效果。

子組件

僅支持[ListItem]、[ListItemGroup]子組件。

說明：

List的子組件的索引值計算規則：

按子組件的順序依次遞增。

if/else語句中，只有條件成立的分支內的子組件會參與索引值計算，條件不成立的分支內子組件不計算索引值。

ForEach/LazyForEach語句中，會計算展開所有子節點索引值。

[if/else]、[ForEach]和[LazyForEach]發生變化以后，會更新子節點索引值。

ListItemGroup作為一個整體計算一個索引值，ListItemGroup內部的ListItem不計算索引值。

List子組件visibility屬性設置為Hidden或None依然會計算索引值。

List子組件的visibility屬性設置為None時不顯示，但該子組件上下的space還會生效。

接口

List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})

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

參數：

屬性

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

ListItemAlign9+枚舉說明

該接口支持在ArkTS卡片中使用。

StickyStyle9+枚舉說明

該接口支持在ArkTS卡片中使用。

說明：

List組件[通用屬性clip]的默認值為true。

ScrollSnapAlign10+枚舉說明

設置列表項滾動結束對齊效果。

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

左右和上下這種兩端對齊的樣式：當列表位移至末端，則需要將末端的item完整顯示，同時不能露出邊界空白區域，此時另一端可以出現不限位對齊的現象。

只支持item等高場景限位，不等高場景可能存在不準確的情況。

事件

ScrollState枚舉說明

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

ScrollState枚舉變更如下。

說明：

要使List處于可編輯模式需配合onItemDelete事件和ListItem的editable屬性，即可編輯模式實現刪除列表項功能，需滿足以下條件（該功能從API9開始廢棄）：

• editMode屬性設置為true。
• 綁定onItemDelete事件，且事件回調返回true。
• ListItem的editable屬性設置為true。

實現ListItem拖拽，需滿足以下條件：

• editMode屬性設置為true（從API9開始無需設置editMode屬性）。
• 綁定onDragStart事件，且事件回調中返回浮動UI布局。
  HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

示例

示例1

// xxx.ets
@Entry
@Component
struct ListExample {
  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)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之間的分界線
      .edgeEffect(EdgeEffect.Spring) // 邊緣效果設置為Spring
      .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) = > {
        console.info('first' + firstIndex)
        console.info('last' + lastIndex)
        console.info('center' + centerIndex)
      })
      .onScroll((scrollOffset: number, scrollState: ScrollState) = > {
        console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
      })
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

示例2

// xxx.ets
@Entry
@Component
struct ListLanesExample {
  @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]
  @State alignListItem: ListItemAlign = ListItemAlign.Start

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: string) = > {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
          .border({ width: 2, color: Color.Green })
        }, (item: string) = > item)
      }
      .height(300)
      .width("90%")
      .friction(0.6)
      .border({ width: 3, color: Color.Red })
      .lanes({ minLength: 40, maxLength: 40 })
      .alignListItem(this.alignListItem)
      .scrollBar(BarState.Off)

      Button("點擊更改alignListItem:" + this.alignListItem).onClick(() = > {
        if (this.alignListItem == ListItemAlign.Start) {
          this.alignListItem = ListItemAlign.Center
        } else if (this.alignListItem == ListItemAlign.Center) {
          this.alignListItem = ListItemAlign.End
        } else {
          this.alignListItem = ListItemAlign.Start
        }
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

示例3

// xxx.ets
@Entry
@Component
struct ListExample {
  @State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State editFlag: boolean = false

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column() {
        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.arr, (item: number, index?: number) = > {
            ListItem() {
              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
                Text('' + item)
                  .width('100%')
                  .height(80)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
                  .borderRadius(10)
                  .backgroundColor(0xFFFFFF)
                  .flexShrink(1)
                if (this.editFlag) {
                  Button() {
                    Text("delete").fontSize(16)
                  }.width('30%').height(40)
                  .onClick(() = > {
                    if (index != undefined) {
                      console.info(this.arr[index] + 'Delete')
                      this.arr.splice(index, 1)
                      console.info(JSON.stringify(this.arr))
                      this.editFlag = false
                    }
                  }).stateEffect(true)
                }
              }
            }
          }, (item: string) = > item)
        }.width('90%')
        .scrollBar(BarState.Off)
        .friction(0.6)
      }.width('100%')

      Button('edit list')
        .onClick(() = > {
          this.editFlag = !this.editFlag
        }).margin({ top: 5, left: 20 })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

審核編輯 黃宇