ZhGridLayout02.ets 1.19 KB
import { CompDTO, ContentDTO } from 'wdBean';

const TAG = 'Zh_Grid_Layout-02';
const FULL_PARENT: string = '100%';
let listSize: number = 2;

/**
 * 双图卡
 * 枚举值Zh_Grid_Layout-02
 * Zh_Grid_Layout-02
 *
 */
@Preview
@Component
export struct ZhGridLayout02 {
  @State compDTO: CompDTO = {} as CompDTO

  aboutToAppear() {
    if (this.compDTO.operDataList) {
      listSize = this.compDTO.operDataList.length > 5 ? 2 : this.compDTO.operDataList.length;
    }
  }

  build() {
    GridRow({
      columns: { sm: listSize, md: 2 },
      breakpoints: { value: ['320vp', '520vp', '840vp'] }
    }) {
      ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
        GridCol() {
          this.buildItemCard(this.compDTO.operDataList[index]);
        }
      })
    }
  }

  /**
   * 组件项
   *
   * @param programmeBean item 组件项, 上面icon,下面标题
   */
  @Builder
  buildItemCard(item: ContentDTO) {
    Column() {
      Image(item.coverUrl)
        .width(44)
        .aspectRatio(1 / 1)
        .margin(16)
      Text(item.newsTitle)
        .fontSize(13)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .width('100%')
  }
}