ArkTS-ArkUI-List：列表

一.官方文档

List官方文档！

二.基础语法 

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

列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。 

列表项既可以纵向排列，又可以横向排列。

参数名	参数类型	必填	参数描述
space	number | string	否	子组件主轴方向的间隔。（主轴交叉轴可见Cloumn、Row） 默认值：0 说明： 设置为除-1外其他负数或百分比时，按默认值显示。 space参数值小于List分割线宽度时，子组件主轴方向的间隔取分割线宽度。
initialIndex	number	否	设置当前List初次加载时视口起始位置显示的item的索引值。 默认值：0 说明： 设置为除-1外其他负数或超过了当前List最后一个item的索引值时视为无效取值，无效取值按默认值显示。
scroller	Scroller	否	可滚动组件的控制器。用于与可滚动组件进行绑定。 说明： 不允许和其他滚动类组件绑定同一个滚动控制对象。

space使用频率较高。 

List 包含ListItem、ListItemGroup子组件。

 List的子组件必须是ListItemGroup或ListItem，ListItem和ListItemGroup必须配合List来使用。

list是容器，listitem不是，是一个标记或约束代表list内部一项.

 三.案例

继续对ForEach代码优化：

添加容器List设置其元素间距为4，列表方向为垂直。

将“商品列表”高度设置为30，剩余空间由List全部填充（使用权重）。

 将渲染语句剪切进List中

 

 List的子组件必须为ListItemGroup或ListItem，可将其他容器嵌入ListItem中进行使用

 找到渲染的元素将其嵌入ListItem中

 

最终效果： 

最终代码：

class Item{
  name:string
  image:ResourceStr
  price:number
  discount:number

  constructor(name:string,image:ResourceStr,price:number,discount:number=0) {
    this.name=name
    this.image=image
    this.price=price
    this.discount=discount
  }
}

@Entry
@Component

struct Index {
  private items:Item[]=[   //Item类型 （Array<Item>）
    new Item('WATCH FIT 3',$r('app.media.watchfit3'),999,50),
    new Item('Pura 70',$r('app.media.pura70'),6999),
    new Item('Mate X5',$r('app.media.mateX5'),11999),
    new Item('Matepad 11.5S',$r('app.media.matePad'),2299),
    new Item('MateBook XPro',$r('app.media.mateBookXPro'),19999),
    new Item('FreeBuds Lipstick 2',$r('app.media.freeBudslipstick2'),1999),
    new Item('FreeClip',$r('app.media.freeclip'),1299)
  ]


  build() {
      Column({space:4}) {
        Row(){
          Text('商品列表')
            .fontSize(30)
            .fontStyle(FontStyle.Italic)
            .fontWeight(FontWeight.Bold)
        }
        .height(30)
        .width('100%')
        List({space:4}){    //间距为4
          ForEach(
            this.items,
            (item:Item)=>{    //:Item(类型)可不写，若不写下方无法直接弹出其参数
              ListItem(){
                Row({space:10}){
                  Image(item.image)
                    .width(100)
                  Column({space:4}){
                    if(item.discount) {
                      Text(item.name)
                        .fontWeight(FontWeight.Bold)
                        .fontSize(20)
                      Text('￥'+item.price)
                        .fontSize(15)
                        .fontColor('#CCC')
                        .decoration({type: TextDecorationType.LineThrough})  
                            //文本装饰线样式及其颜色
                      Text('补贴：￥'+item.discount)
                        .fontSize(16)
                        .fontColor(Color.Red)
                      Text('折扣价：￥'+(item.price-item.discount))
                        .fontSize(17)
                        .fontColor(Color.Red)
                    } else {
                      Text(item.name)
                        .fontWeight(FontWeight.Bold)
                        .fontSize(20)
                      Text('￥'+item.price)
                        .fontSize(17)
                        .fontColor(Color.Red)

                    }

                  }
                  .height('100%')
                  .alignItems(HorizontalAlign.Start)  //交叉轴上对齐方式
                }
                .height(120)      //每一行的行高固定
                .width('100%')
                .backgroundColor(Color.White)
                .borderRadius(20)   //边框圆角
                .padding(10)

              }



            }
          )

        }
        .lanes(1)           //几列，默认值为1
        .layoutWeight(1)    //布局权重
        .width('100%')
        .listDirection(Axis.Vertical)
        // .divider({strokeWidth:4,color:Color.Pink})

        // List({space:7}){
        //   ListItem(){
        //       //列表内容只能包含一个根组件
        //     Text('HarmonyOS')
        //   }
        // }
        // .width('100%')
        // .listDirection(Axis.Vertical)    //排列方向，垂直为默认




      }
      .height('100%')
      .width('100%')
      .backgroundColor('#FFECECEC')
      .padding(20)  //组件内部间距

  }
}

 

精简日常，品质自显不凡！