一起学习HarmonyOS应用开发——基础篇（8）

1、List容器组件：列表包含一系列相同宽度的列表项。

@Entry@Componentstruct ListTest {  private data: number[] = [1, 2, 3, 4, 5, 6,]  build() {    Column() {      //space:子组件主轴方向的间隔距离，默认为0      //initialIndex：初次加载时视口起始位置显示的item的索引值，默认为0      List({ space: 10, initialIndex: 0 }) {        ForEach(this.data, (item) => {          ListItem() {            Text('第' + item+'个').width('100%').height(50)              .fontSize(16).textAlign(TextAlign.Center)          }        }, item => item)      }      //listDirection:排列方向,Axis.Vertical为竖向、Axis.Horizontal为横向      .listDirection(Axis.Vertical)      .width('100%')    }.width('100%').height('100%')  }

class Article {  name: string;  phone: string;  constructor(name: string, phone: string) {    this.name = name;    this.phone = phone;  }}@Entry@Componentstruct List2Test {  //另外一种数据源的方式  @State articleList: Array<Article> = [    new Article('张三', '13839312311'),    new Article('李四', '13839312312'),    new Article('赵五', '13839312313'),  ]  build() {    Column({ space: 5 }) {      List() {        ForEach(this.articleList, (item: Article) => {          ListItem() {            ArticleCard({ article: item })              .margin({ top: 20 })          }        },  (item: Article) => item.name)      }    }.width('100%').height('100%')  }}
@Componentstruct ArticleCard {  article: Article;  build() {    Row() {     //条目中放多个内容      Image($r('app.media.icon'))        .width(80).height(80).margin({ right: 20 })      Column() {        Text(this.article.name).fontSize(20).margin({ bottom: 8 })        Text(this.article.phone).fontSize(16).margin({ bottom: 8 })      }      .alignItems(HorizontalAlign.Start)      .width('80%').height('100%')    }.padding(20).borderRadius(12)    .backgroundColor(Color.Red)    .height(120).width('100%').justifyContent(FlexAlign.SpaceBetween)  }}