当前位置：首页 > article >正文

HarmonyOS Next ArkUI ListListItem笔记

article 2025/1/5 0:46:13

学习目标：

List和ListItem的使用

学习内容：

import { NewsInfo, newsInfoList } from '../viewmodel/NewsInfo'

class DividerTmp {
  strokeWidth: Length = 1
  startMargin: Length = 60
  endMargin: Length = 10
  color: ResourceColor = '#ffe9f0f0'

  constructor(strokeWidth: Length, startMargin: Length, endMargin: Length, color: ResourceColor) {
    this.strokeWidth = strokeWidth
    this.startMargin = startMargin
    this.endMargin = endMargin
    this.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})
  }
}