42、鸿蒙/组件/绝对定位实现卡片效果

案例

@Component
export struct PositionLayout2 {
  build() {
    Column(){
      //
      Column(){
        //
        Text('HOT').position({
          x: 150,
          y: 0
        }).zIndex(1).width(50).height(30).backgroundColor(Color.Red)
          .borderRadius({
          topRight: 10,
          bottomLeft: 10
        }).textAlign(TextAlign.Center)
          .fontColor(Color.White).fontStyle(FontStyle.Italic).fontWeight(700)

        //
        Image($r('app.media.background'))
          .width('100%')
          .height(220)
          .borderRadius({
            topLeft: 10,
            topRight: 10
          })
        Row(){
          Image($r('app.media.app_icon'))
            .width(20).height(20)
          Text('圆梦人生').fontSize(20).fontWeight(FontWeight.Bold).margin({left: 12})
        }.width('100%').height(40).alignItems(VerticalAlign.Center)
        .padding({
          left: 15
        })
      }.width(200).height(260)
      .backgroundColor(Color.White).borderRadius(10)

    }.backgroundColor(Color.Gray)
    .width('100%').height('100%')
  }
}