鸿蒙开发之ArkUI 界面篇 二十一 人气卡片综合案例

要实现如下图效果：

仔细分析效果，整体分为三个区域，分别是1、2、3，如图所示

我们整体分析，区域1是观察到的是图片，自然是Image组件，区域2有个背景，左边是Image，水平方向是Text，3区域最具有迷惑性，第一次估计会让设计师给图片，Image组件搞定，要是设计师不给图片能不能实现呢？那就是需要自己画了，这里使用的是Text来画，使用了position和zIndex实现层叠效果.fontStyle(FontStyle.Italic)实现倾斜效果，VIP其实是文字，.fontSize(14)字体大小是14，字体的粗细是.fontWeight(777)，文字居中对其.textAlign(TextAlign.Center)，

.borderRadius({topLeft:10,bottomRight:10
})左顶和右边底部的圆角，

border({
width:2,color:'#fbe7a3' }) 一圈线 

完整代码如下：

@Entry
@Component
struct Index {build() {Column(){Column(){Text('VIP').position({x:0,y:0}).zIndex(66).fontColor('#fbe7a3').width(40).height(20).borderRadius({topLeft:10,bottomRight:10}).border({width:2,color:'#fbe7a3' }).fontStyle(FontStyle.Italic).fontSize(14).fontWeight(777).textAlign(TextAlign.Center).backgroundColor(Color.Orange)Image($r('app.media.position_moco')).width('100%').height(210).borderRadius(10)Row(){Image($r('app.media.position_earphone')).width(20).padding(4).backgroundColor('#55b7f4').borderRadius(10).fillColor(Color.White)Text('飞狗MOCO').fontWeight(700).margin({left:6,})}.height(30).width('100%').backgroundColor(Color.Orange)}.width(160).height(240).backgroundColor(Color.White)}.width('100%').height('100%').backgroundColor(Color.Pink)
}
}总结：鸿蒙的层叠效果是position和zIndex一起使用才出现的，圆角是borderRadius，border是边框，VIP效果是文字实现、有文字大小，字体大小文字颜色综合调整实现，Image使用fillColor来实现颜色的更改，界面是目前写界面最简单的界面的了