類(lèi)似于A(yíng)ndroid的ListView，展示同類(lèi)數(shù)據(jù)類(lèi)型或數(shù)據(jù)類(lèi)型集益咬。

布局

List組件需要子組件ListItemGroup或ListItem一塊使用，ListItemGroup或ListItem必須配合List來(lái)使用轿钠。

List除了可以垂直或水平布局能力岔擂，還可以進(jìn)行多列垂直或水平布局滾動(dòng)列表。
1.List組件默認(rèn)情況下的列數(shù)為1惩嘉，可通過(guò)設(shè)置lanes來(lái)更改為多列列表罢洲。

      List({space: 20}) {
        ForEach([0,1,2,3,4,5,6,7,8,9,10,11,12,13], (item:number) => {
          ListItem() {
            Text("List布局-" + item).fontSize(20)
          }
        })
      }.lanes(2)

image.png

2.列表自適應(yīng)顯示列數(shù)，可通過(guò)設(shè)置lanes的LengthConstrain類(lèi)型文黎，會(huì)根據(jù)配置的minLength跟maxLength自動(dòng)選擇顯示幾列惹苗。

      List({space: 20}) {
        ForEach([0,1,2,3,4,5,6,7,8,9,10,11,12,13], (item:number) => {
          ListItem() {
            Text("List布局-" + item).fontSize(20)
          }
        })
      }.lanes({
        minLength: 200,
        maxLength: 400
      })

約束

列表的主軸方向是指子組件列的排列方向，也是列表的滾動(dòng)方向耸峭。垂直于主軸的軸叫交叉軸桩蓉。

image.png

List如果沒(méi)有設(shè)置高度，則高度最高不超過(guò)List的父組件高度抓艳，最低不低于子組件的總和高度触机。
1.List組件默認(rèn)主軸是垂直方向帚戳，如果要將主軸方向設(shè)置成水平方向玷或，則需要設(shè)置listDirection為Axis.Horizontal。

List({space: 20}) {
        ForEach([0,1,2,3,4,5,6,7,8,9,10,11,12,13], (item:number) => {
          ListItem() {
            Text("List布局-" + item).fontSize(20)
          }
        })
      }.listDirection(Axis.Horizontal)

image.png

2.設(shè)置主軸上水平方向的位置片任。
.alignListItem(ListItemAlign.Center) 代表列表項(xiàng)居中對(duì)齊偏友。

自定義列表樣式

設(shè)置內(nèi)容間距

如需列表項(xiàng)之間添加間距，可以使用space參數(shù)对供。

List({space: 10}) {
  //...
}

添加分割線(xiàn)

列表項(xiàng)添加分割線(xiàn)位他，通過(guò)設(shè)置divider屬性氛濒，另外還可以通過(guò)strokeWidth和color屬性設(shè)置分割線(xiàn)的粗細(xì)和顏色。
startMargin和endMargin屬性分別用于設(shè)置分割線(xiàn)距離列表側(cè)邊起始端的距離鹅髓。

List({ space: 20 }) {
        ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], (item: number) => {
          ListItem() {
            Text("List布局-" + item).fontSize(20)
          }
        })
      }
      .lanes({
        minLength: 200,
        maxLength: 400
      })
      .alignListItem(ListItemAlign.Center)
      .divider({ strokeWidth: 1, color: '#00f0f0', startMargin: 10, endMargin: 10 })

添加分組列表

在List組件中使用ListItemGroup對(duì)項(xiàng)目進(jìn)行分組舞竿，可以構(gòu)建二維列表。

      List({ space: 20 }) {
        ListItemGroup({
          header: this.itemHead("王懷智")
        }) {
          ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], (item: number) => {
            ListItem() {
              Text("List布局-" + item).fontSize(20)
                .backgroundColor(Color.Red)
                .height(45)
            }
          })
        }
      }

左右滑動(dòng)

通過(guò)ListItem的swipeAction屬性窿冯，實(shí)現(xiàn)列表項(xiàng)的左右滑動(dòng)功能骗奖。

            ListItem() {
              Text("List布局-" + item).fontSize(20)
                .backgroundColor(Color.Red)
                .height(45)
            }.swipeAction({
              end: {
                builder: () => {
                  this.itemHead("刪除")
                }
              }
            })

image.png