效果

实现

@Entry
@Component
struct Index {
  build() {
    Column() {
      Column() {
        Stack({alignContent: Alignment.Bottom}){
          Image($r('app.media.bz_img'))
            .width(200)
            .height(125)
            .borderRadius({
              topLeft: 10,
              topRight: 10
            })

          Row(){
            Row({space: 5}){
              Image($r('app.media.bz_play'))
                .width(15)
                .fillColor(Color.White)

              Text('288万')
                .fontColor(Color.White)
                .fontSize(12)

            }
            .margin({right: 8})
            Row({space:5}){
              Image($r('app.media.bz_msg'))
                .width(20)
                .fillColor(Color.White)
                .width(15)

              Text('8655')
                .fontColor(Color.White)
                .fontSize(12)
            }

            Blank()

            Text('4:33')
              .fontColor(Color.White)
              .fontSize(12)
          }
          // .justifyContent(FlexAlign.SpaceBetween)
          .padding({left: 5, right: 5})
          .height(24)
          .width('100%')
          // .backgroundColor(Color.Pink)
        }
        .width(200)
        .height(125)

        Text('【凤凰传奇新歌16迎来到国风统治区:唢呐一响神曲《铁衣Song》唢呐一响神曲《铁衣Song》')
          .lineHeight(16)
          .fontSize(12)
          .maxLines(2)
          .textOverflow({overflow: TextOverflow.Ellipsis})
          // .padding({ left: 5, right: 5 })

        Row(){
          Text('19万点赞')
            .fontColor('#ffe97a49')
            .backgroundColor('#FEEDED')
            .fontSize(10)
            .padding(5)

          Image($r('app.media.bz_more'))
            .width(14)
            .fillColor('#BFBFBF')
        }
        // .padding({ left: 10, right: 10 })
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .justifyContent(FlexAlign.SpaceAround)
      .borderRadius(10)
      .height(200)
      .width(200)
      .backgroundColor(Color.White)
      .padding({left: 5, right: 5})
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐