【练习】使用DevEco Studio编写鸿蒙代码,实现卡片效果,主要是练习布局

效果展示

实现代码

TypeScript 复制代码
build() {
    Column(){
      Column(){
        Image($r("app.media.avatar"))
          .width("100%")
          .borderRadius({
            topLeft:10,
            topRight:10
          })
          Text("今晚吃这个 | 每日艺术分享 No.43")
            .fontSize(14)
            .fontWeight(600)
            .lineHeight(22)
            .height(60)
          Row(){
            Row({space:6}){
              Image($r("app.media.app_icon"))
                .width(20)
                .borderRadius(10)//宽度的一半就是正圆
              Text("插画师分享聚集地")
                .fontSize(10)
                .fontColor("#999")
            }
              .layoutWeight(1)
            Row(){
              Image($r("app.media.zan"))
                .width(20)
                .fillColor("#999")
              Text("2300")
                .fontSize(10)
                .fontColor("#666")
            }
          }
          .padding({
            left:15,
            right:15,
            bottom:10
          })
          .width("100%")
          .justifyContent(FlexAlign.SpaceBetween)
      }
      .width(200)
      .borderRadius(10)
      .backgroundColor("#fff")
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#ccc")
    .padding(20)
  }
相关推荐
御承扬5 小时前
Hypium UIViewer 让 MacOS 与鸿蒙NEXT手机实现多屏协同
macos·智能手机·harmonyos·多屏协同
程序猿阿伟15 小时前
《解锁鸿蒙系统AI能力,开启智能应用开发新时代》
人工智能·华为·harmonyos
轻口味15 小时前
【每日学点鸿蒙知识】包体积优化、WebView下载PDF等
华为·pdf·harmonyos
雨汨15 小时前
HarmonyOS 鸿蒙Next 预览pdf文件
华为·pdf·harmonyos
半夜偷删你代码17 小时前
鸿蒙中自定义slider实现字体大小变化
华为·harmonyos·鸿蒙
半夜偷删你代码18 小时前
鸿蒙中调整应用内文字大小
华为·harmonyos
青椒101319 小时前
HarmonyOS(ArkUI框架介绍)
harmonyos
aidou13141 天前
HarmonyOS中实现TabBar(相当于Android中的TabLayout+ViewPager)
华为·harmonyos·tabbar·tabcontent·标签联动
程序猿阿伟1 天前
《探秘鸿蒙NEXT中的人工智能核心架构》
人工智能·架构·harmonyos
轻口味1 天前
HarmonyOS Next 日志工具介绍
华为·pdf·harmonyos