List

列表包含一系列相同寬度的列表項(xiàng)。適合連續(xù)、多行呈現(xiàn)同類數(shù)據(jù)，例如圖片和文本。

說(shuō)明：
開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

• 該組件從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
• 該組件回彈的前提是要有滾動(dòng)。內(nèi)容小于一屏?xí)r，沒(méi)有回彈效果。

子組件

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

說(shuō)明：

List的子組件的索引值計(jì)算規(guī)則：

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

if/else語(yǔ)句中，只有條件成立的分支內(nèi)的子組件會(huì)參與索引值計(jì)算，條件不成立的分支內(nèi)子組件不計(jì)算索引值。

ForEach/LazyForEach語(yǔ)句中，會(huì)計(jì)算展開(kāi)所有子節(jié)點(diǎn)索引值。

[if/else]、[ForEach]和[LazyForEach]發(fā)生變化以后，會(huì)更新子節(jié)點(diǎn)索引值。

ListItemGroup作為一個(gè)整體計(jì)算一個(gè)索引值，ListItemGroup內(nèi)部的ListItem不計(jì)算索引值。

List子組件visibility屬性設(shè)置為Hidden或None依然會(huì)計(jì)算索引值。

List子組件的visibility屬性設(shè)置為None時(shí)不顯示，但該子組件上下的space還會(huì)生效。

接口

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

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

參數(shù)：

屬性

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

ListItemAlign9+枚舉說(shuō)明

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

StickyStyle9+枚舉說(shuō)明

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

說(shuō)明：

List組件[通用屬性clip]的默認(rèn)值為true。

ScrollSnapAlign10+枚舉說(shuō)明

設(shè)置列表項(xiàng)滾動(dòng)結(jié)束對(duì)齊效果。

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

左右和上下這種兩端對(duì)齊的樣式：當(dāng)列表位移至末端，則需要將末端的item完整顯示，同時(shí)不能露出邊界空白區(qū)域，此時(shí)另一端可以出現(xiàn)不限位對(duì)齊的現(xiàn)象。

只支持item等高場(chǎng)景限位，不等高場(chǎng)景可能存在不準(zhǔn)確的情況。

事件

ScrollState枚舉說(shuō)明

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

ScrollState枚舉變更如下。

說(shuō)明：

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

• editMode屬性設(shè)置為true。
• 綁定onItemDelete事件，且事件回調(diào)返回true。
• ListItem的editable屬性設(shè)置為true。

實(shí)現(xiàn)ListItem拖拽，需滿足以下條件：

• editMode屬性設(shè)置為true（從API9開(kāi)始無(wú)需設(shè)置editMode屬性）。
• 綁定onDragStart事件，且事件回調(diào)中返回浮動(dòng)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) // 邊緣效果設(shè)置為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("點(diǎn)擊更改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 })
  }
}

審核編輯 黃宇