鸿蒙移动应用开发--UI布局基础
实验要求:
从小红书、大众点评等app中,任意找一个类似下图的卡片进行实现,照着卡片格式做个一样的UI界面。
源代码:
@Entry
@Component
struct demo1 {
@State message: string = 'Hello World';
build() {
Column() {
Row() {
Column() {
Row() {
Image($r('app.media.product')).width(200)
}
Row() {
Image('https://www.xiaohongshu.com/explore').width(200)
}
}
}
Row() {
Text(' 坐观星移如弈子,清明若月照空庭')
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize(20)
.fontWeight(FontWeight.Bold)
.width(200)
}
Row() {
Column() {
Image($r('app.media.avatar')).width(45)
}
Column() {
Row() {
Column() {
Text('安自在Zz')
Text('01-28')
}
}
}
Column() {
Row() {
Image($r('app.media.heart')).width(25).fillColor(Color.Red)
Text('2.9万')
}
}
}
}
}
}
运行结果:
附件:
app.media.product
app.media.avatar
app.media.heart
原文地址:https://blog.csdn.net/m0_74344909/article/details/146196097
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/584892.html 如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/584892.html 如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!