一起学习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)  }}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值