效果图:

代码实现

@Entry
@Component
struct Index {
  build() {
    Column() {
      Column() {
        Image($r('app.media.position_moco'))
          .width(160)
          .height(210)
          .borderRadius({
            topLeft: 10,
            topRight: 10
          })

        Text('VIP')
          .fontColor(Color.White)
          .fontStyle(FontStyle.Italic)
          .fontSize(14)
          .width(40)
          .height(20)
          .textAlign(TextAlign.Center)
          .backgroundColor('#ffed7e17')
          .borderRadius({
            topLeft: 10,
            bottomRight: 10
          })
          .border({
            width:2,
            color:'#ffdebe26',
            style:BorderStyle.Solid
          })
          .position({
            x: 0,
            y: 0
          })

        Row({space: 6}) {
          Image($r('app.media.position_earphone'))
            .width(20)
            .borderRadius(10)
            .margin({ top: 10, left: 10 })
            .margin({top: 5, left: 10})
            .fillColor('#fff')
            .backgroundColor('#ff47a4d7')
            .padding(3)

          Text('飞狗MOCO')
            .fontWeight(600)
            .lineHeight(30)
        }
        .height(30)
        .alignItems(VerticalAlign.Center)
        .width('100%')


      }
      .width(160)
      .height(240)
      .backgroundColor('#fff')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

Logo

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

更多推荐