鸿蒙小案例-人气卡片案例(绝对定位,Z-Index)
·
效果图:

代码实现
@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])
}
}
更多推荐




所有评论(0)