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 | 否 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 说明： 不允许和其他滚动类组件绑定同一个滚动控制对象。 |
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) //组件内部间距
}
}精简日常，品质自显不凡！
原文地址：https://blog.csdn.net/qq_74367835/article/details/140546806
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！