Harmony学习第二课（UI布局初步尝试）

image.png

案例

image.png

分析

首先整体使用列布局，上方title是一部分，下方评论内容是一部分。

image.png

上方title又实用行布局，一个图片和一个Text，底部使用border属性加上一条线。

image.png

下方使用Row嵌套Column的方式进行布局

image.png

代码

// @ts-nocheck
@Entry
@Component
struct ZhihuComment {
 build() {
   Column({ space: 20 }) {
     Banner()
     CommentView()
   }
 }
}

@Component
struct Banner {
 build() {
   Row() {
     Image($r("app.media.back_icon"))
       .height(24)
       .aspectRatio(1)
       .backgroundColor("#F5F5F5")
       .borderRadius(12)
       .margin({ left: 8 })
     Text("评论回复")
       .layoutWeight(1)
       .textAlign(TextAlign.Center)
       .margin({ right: 39 })
   }
   .height(50)
   .border({
     color: "#f4f4f4",
     width: {
       bottom: 0.5
     }
   })
 }
}

@Component
struct CommentView {
 build() {
   Row() {
     Image($r("app.media.header_icon"))
       .width(44)
       .aspectRatio(1)
       .borderRadius(22)
       .margin({ left: 8 })
     Column({ space: 10 }) {
       Text("周处除三害")
         .fontSize(20)
         .fontStyle(FontWeight.Bold)
       Text("通缉犯陈桂林（阮经天 饰）生命将尽，却发现自己在通缉榜上只排名第三，他决心查出前两名通缉犯的下落，并将他们一一除掉。陈桂林以为自己已成为当代的周处除三害，却没想到永远参不透的贪嗔痴，才是人生终要面对的罪与罚。")

       Row() {
         Text("10-12 .IP属地北京")
         .fontColor("#c3c4c5")
         Row({space: 8}) {
           Image($r("app.media.hart_icon"))
             .width(20)
           Text("123")
             .fontColor("#c3c4c5")
         }
       }
       .width("100%")
       .justifyContent(FlexAlign.SpaceBetween)
     }
     .alignItems(HorizontalAlign.Start)
     .layoutWeight(1)
     .margin({left:8, right:8})
   }
   .alignItems(HorizontalAlign.Start)
 }
}

笔记

• Image($r("app.media.hart icon"))图片命名不可以有空格
• aspectRatio设置宽高比和layoutWeight设置空间分配权重，自己总是记混
• 从iconfont下载的svga图片不知道为什么会报错