鸿蒙小案例---得物卡片

最终效果

代码实现

@Entry
@Component
struct Index {build() {Column() {Column() {//   图片Image($r('app.media.nick')).width(200).borderRadius({topLeft: 5,topRight: 5}).padding(3)Text('今晚吃这个 | 每日艺术分享 No.43').fontWeight(600).fontSize(14).lineHeight(22).height(60)Row(){Row({space:8}){Image($r('app.media.user')).width(16).borderRadius(8)Text('插画师分享聚集地').fontSize(10).fontColor('#999')}.layoutWeight(1)Row({space: 8}){Image($r('app.media.ic_like')).width(12).fillColor('#999')Text('2300').fontSize(10).fontColor('#666')}}.padding(10)}.backgroundColor('#fff').borderRadius(5).width(200).height(300) // 暂定}.padding(10).width('100%')// .height('100%').backgroundColor('#999').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])}
}