AlbumCardComponent.ets 3.81 KB
@Component
export struct AlbumCard {
  // @Link isRefreshData: boolean; // Timer to fresh
  // @State title: Resource = $r('app.string.title_default');

  build() {
    Column({ space: 8 }) {
      Text('测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' +
      '测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字' +
      '测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字')
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .fontSize(17)
        .fontColor(0x222222)
        .lineHeight(25)
        .maxLines(3)
        .margin({ top: 6,
          left: 16,
          right: 16 })
        .width(343)
        .height(75)

      RelativeContainer() {
          Image($r('app.media.icon'))
            .width(229)
            .height(154)
            .alignRules({
              top: {anchor: "__container__", align: VerticalAlign.Top},
              left: {anchor: "__container__", align: HorizontalAlign.Start}
            })
            .id('mainImage')

          Image($r('app.media.icon'))
            .width(112)
            .height(76)
            .alignRules({
              top: {anchor: "__container__", align: VerticalAlign.Top},
              right: {anchor: "__container__", align: HorizontalAlign.End}
            })
            .id('subTopImage')

          Image($r('app.media.icon'))
            .width(112)
            .height(76)
            .alignRules({
              right: {anchor: "__container__", align: HorizontalAlign.End},
              bottom: {anchor: "__container__", align: VerticalAlign.Bottom}
            })
            .id('subBottomImage')

          Shape() {
            Rect().width(33).height(18)
          }
          // .viewPort({ x: -2, y: -2, width: 304, height: 130 })
          .fill(0x000000)
          .fillOpacity(0.3)
          // .strokeDashArray([20])
          // .strokeDashOffset(10)
          .strokeLineCap(LineCapStyle.Round)
          .strokeLineJoin(LineJoinStyle.Round)
          .antiAlias(true)
        .id('shape')
        .alignRules({
          right: {anchor: "__container__", align: HorizontalAlign.End},
          bottom: {anchor: "__container__", align: VerticalAlign.Bottom}
        })
        .margin({right:4 ,
        bottom:4})

        Image($r('app.media.album_card_shape'))
          .width(22)
          .height(18)
          .alignRules({
            left: {anchor: "shape", align: HorizontalAlign.Start},
            top: {anchor: "shape", align: VerticalAlign.Top}
          })
          .id('shapeSubImage')

        Text('6')
          .fontSize(13)
          .fontColor(0xFFFFFF)
          .id('pageIndex')
          .alignRules({
            right: {anchor: "shape", align: HorizontalAlign.End},
            top: {anchor: "shape", align: VerticalAlign.Top}
          })
          .margin({right:2})
          .textAlign(TextAlign.Center)
          .width(17)
          .height(17)
      }
      .width(343)
      .height(154)

      Row() {
        Text('人民日报')
          .fontSize(13)
          .fontColor(0xB0B0B0)
          .margin({
            left:16
          })

        Image($r('app.media.album_card_divide'))
          .width(16)
          .height(16)

        Text('46分钟前')
          .fontSize(13)
          .fontColor(0xB0B0B0)

        Text('328评')
          .fontSize(13)
          .fontColor(0xB0B0B0)
          .margin({
            left:6
          })
      }
      .width(375)
      .height(16)
      .id('label')
    }
    .width(375)
    .height(289)
    // .backgroundColor(0x000000)
  }
}