鸿蒙学习笔记
第十六节 List学习
与所有界面一样,鸿蒙提供当组件溢出界面时,
能够上下或者左右滚动的list
List
1.列表项(ListItem) 当数量过多时,会提供滚动功能
1.列表项(ListItem) 既可以纵向,也可以横向
方法:
listDirection(Axis.Vertical) //列表方向,默认垂直
layoutWeight() 组件权重
例子:
class Node{
name:string
age:number
score:number
constructor(name:string,age:number,score:number) {
this.name = name
this.age = age
this.score = score
}
}
let nodes:Node[] =[{name:'zs',age:12,score:77}
,{name:'ls',age:12,score:67}
,{name:'ww',age:12,score:78}];
function init() {
for(let i = 0;i<10;i++){
nodes[i] = {name:'同学'+i,age:i*10,score:i*20}
}
}
@Entry
@Component
struct Index2 {
@State message: string = 'Hello World'
@State imageWidth: number = 200
build() {
Column() {
Row() {
Image($r("app.media.app_icon"))
.width(this.imageWidth)
.interpolation(ImageInterpolation.High)
}
.width("100%")
.height(200)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
List({space:8}){
ForEach(
nodes,
(node:Node)=>{
ListItem(){
Row(){
Column(){
Text("姓名:"+node.name)
Text("年龄:"+node.age)
Text("分数:"+node.score)
}.width('100%')
}
}
})
}.width('100%')
.layoutWeight(1)
}
.width('100%')
}
}