当前位置: 首页 > article >正文

鸿蒙移动应用开发--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

相关文章:

  • websocket学习手册及python实现简单的聊天室
  • Docker基础命令说明
  • 爬虫案例十五js逆向七麦数据
  • MySQL Buffer Pool、Undo Log、脏页详解
  • 树莓科技集团董事长:第五代产业园运营模式的深度剖析与展望​
  • MATLAB—从入门到精通的第三天
  • uniapp上传文件问题以及返回上一页出现退出app的问题记录
  • Flutter_学习记录_video_player、chewie 播放视频
  • 80.Dictionary 字典 C#例子
  • 数据库学习笔记
  • CSS3 用户界面设计指南
  • Go执行当前package下的所有方法
  • 微信小程序校园跑腿的设计与实现【lw+源码+部署+视频+讲解】
  • SpringBoot使用Logback日志框架与综合实例
  • 在 WSL中批量执行InSAR任务-stackSentinel.py
  • 【web前端开发】HTML排版标签、HTML语义化标签、常用的文本标签
  • 嵌入式裸机设计--MCU常用裸机架构有哪些?
  • 面试之《实现Event Bus》
  • Qt 驾校考试系统项目实现
  • OSPF-2 邻接建立关系