鸿蒙小案例-B站-视频卡片(Stack容器)
·
效果


实现
@Entry
@Component
struct Index {
build() {
Column() {
Column() {
Stack({alignContent: Alignment.Bottom}){
Image($r('app.media.bz_img'))
.width(200)
.height(125)
.borderRadius({
topLeft: 10,
topRight: 10
})
Row(){
Row({space: 5}){
Image($r('app.media.bz_play'))
.width(15)
.fillColor(Color.White)
Text('288万')
.fontColor(Color.White)
.fontSize(12)
}
.margin({right: 8})
Row({space:5}){
Image($r('app.media.bz_msg'))
.width(20)
.fillColor(Color.White)
.width(15)
Text('8655')
.fontColor(Color.White)
.fontSize(12)
}
Blank()
Text('4:33')
.fontColor(Color.White)
.fontSize(12)
}
// .justifyContent(FlexAlign.SpaceBetween)
.padding({left: 5, right: 5})
.height(24)
.width('100%')
// .backgroundColor(Color.Pink)
}
.width(200)
.height(125)
Text('【凤凰传奇新歌16迎来到国风统治区:唢呐一响神曲《铁衣Song》唢呐一响神曲《铁衣Song》')
.lineHeight(16)
.fontSize(12)
.maxLines(2)
.textOverflow({overflow: TextOverflow.Ellipsis})
// .padding({ left: 5, right: 5 })
Row(){
Text('19万点赞')
.fontColor('#ffe97a49')
.backgroundColor('#FEEDED')
.fontSize(10)
.padding(5)
Image($r('app.media.bz_more'))
.width(14)
.fillColor('#BFBFBF')
}
// .padding({ left: 10, right: 10 })
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.justifyContent(FlexAlign.SpaceAround)
.borderRadius(10)
.height(200)
.width(200)
.backgroundColor(Color.White)
.padding({left: 5, right: 5})
}
.width('100%')
.height('100%')
.backgroundColor('#eee')
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
}
更多推荐

所有评论(0)