1、List容器组件:列表包含一系列相同宽度的列表项。
@Entry
@Component
struct 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
@Component
struct 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%')
}
}
@Component
struct 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)
}
}