学习目标:
List和ListItem的使用
学习内容:
import { NewsInfo, newsInfoList } from '../viewmodel/NewsInfo'class DividerTmp {strokeWidth: Length = 1startMargin: Length = 60endMargin: Length = 10color: ResourceColor = '#ffe9f0f0'constructor(strokeWidth: Length, startMargin: Length, endMargin: Length, color: ResourceColor) {this.strokeWidth = strokeWidththis.startMargin = startMarginthis.endMargin = endMarginthis.color = color}
}@Entry
@Component
struct ListTest {@State egDivider: DividerTmp = new DividerTmp(1, 10, 10, '#ffe9f0f0')build() {RelativeContainer() {List({space: 10}){ForEach(newsInfoList,(item: NewsInfo)=>{ListItem(){Column(){Row(){Text(item.title).fontSize(20)}.width('100%')Row(){Text(item.author).fontColor(Color.Gray).fontSize(12)Text(item.commontsCountLabel).margin({left:10}).fontColor(Color.Gray).fontSize(12)Text(item.dateLabel).margin({left:10}).fontColor(Color.Gray).fontSize(12)}.width('100%').margin({top: 3})}.width('100%')}.padding(5)})}.listDirection(Axis.Vertical).width('100%').height('100%').divider(this.egDivider).scrollBar(BarState.Auto)}.height('100%').width('100%').padding({left:5, right: 5})}
}