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图片不知道为什么会报错
