当前位置： 首页 > news >正文

HarmonyOS PC实战案例之置顶大卡 + 普通行：视觉层次怎么建立

news 2026/6/16 13:19:47

文章目录

  • 前言
      • 置顶大卡：Stack 实现文字压图
      • 普通行：图左文右的经典结构
      • 完整示例：PC端新闻视觉层次页
      • Stack vs Row：选型逻辑
      • 圆角与 clip
      • 写在最后

前言

资讯 App 里，第一条新闻永远是最显眼的——大封面图、标题叠在图片上、字号更大。后面的普通条目则是小缩略图配文字列表。这种差异化不只是"好看"，而是信息层级的视觉体现：第一条是今天最重要的内容，其他条目是候选内容。

PC 端做这个效果，核心是两种不同的布局结构：置顶卡片用 Stack 图层叠加，普通行用 Row 左图右文。这篇文章把这两种结构拆开来讲。

置顶大卡：Stack 实现文字压图

Stack 允许多个子组件在同一位置叠加，后声明的子组件显示在上层。置顶卡片的结构是：背景图（底层）→ 半透明渐变遮罩（中层）→ 文字信息（顶层）。

Stack({alignContent:Alignment.BottomStart}){// 底层：背景色块（或图片）Column().width('100%').height(200).backgroundColor('#1E3A5F').borderRadius(12)// 中层：渐变遮罩，让文字更可读Column().width('100%').height(120).linearGradient({direction:GradientDirection.Top,colors:[['rgba(0,0,0,0.7)',0],['rgba(0,0,0,0)',1]]})// 顶层：文字信息Column({space:8}){Text('置顶').fontSize(11).fontColor('#FCD34D')Text('HarmonyOS NEXT 正式发布').fontSize(18).fontColor(Color.White).fontWeight(FontWeight.Bold)Text('华为 · 10分钟前').fontSize(12).fontColor('rgba(255,255,255,0.7)')}.padding({left:16,right:16,bottom:16})}.width('100%').height(200).clip(true)// 裁剪超出圆角的内容.borderRadius(12)

alignContent: Alignment.BottomStart让文字默认对齐到左下角。clip(true)确保圆角裁剪对所有子层都生效。

普通行：图左文右的经典结构

普通条目是 Row 布局，左侧缩略图固定宽度，右侧信息列layoutWeight(1)弹性填满：

Row({space:12}){// 左侧缩略图Stack(){RoundRect({width:72,height:72,radiusWidth:8,radiusHeight:8}).fill('#F3F4F6')Text(news.emoji).fontSize(28)}.width(72).height(72)// 右侧信息Column({space:6}){Text(news.title).fontSize(14).fontColor('#111827').fontWeight(FontWeight.Medium).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})Row({space:8}){Text(news.source).fontSize(12).fontColor('#6B7280')Text(news.time).fontSize(11).fontColor('#9CA3AF')}}.layoutWeight(1).alignItems(HorizontalAlign.Start)}

完整示例：PC端新闻视觉层次页

完整示例：PcNewsCardPage.ets

import{router}from'@kit.ArkUI'interfaceNewsItem{id:numbertitle:stringdesc:stringsource:stringtime:stringcategory:stringemoji:stringbgColor:stringisTop:booleanreadCount:number}@Entry@Componentstruct PcNewsCardPage{@StatehoveredId:number=-1privatenewsList:NewsItem[]=[{id:1,title:'HarmonyOS NEXT 正式发布，全面进入鸿蒙时代',desc:'华为正式宣布新一代鸿蒙操作系统正式商用，标志着全面去安卓化完成，生态建设进入新阶段。',source:'华为官方',time:'10分钟前',category:'科技',emoji:'📱',bgColor:'#1E3A5F',isTop:true,readCount:12600},{id:2,title:'ArkUI 4.0 新特性解读：动效系统全面升级',desc:'新版本带来弹簧动画、路径跟随动画等新能力。',source:'开发者社区',time:'1小时前',category:'开发',emoji:'✨',bgColor:'#F3F4F6',isTop:false,readCount:5600},{id:3,title:'鸿蒙 PC 端适配：窗口管理与多任务实战',desc:'详解 PC 端窗口自由拖拽、分屏多任务的实现思路。',source:'技术博客',time:'2小时前',category:'开发',emoji:'🖥️',bgColor:'#F3F4F6',isTop:false,readCount:4200},{id:4,title:'鸿蒙生态应用突破十万：覆盖主流场景',desc:'金融、出行、购物等核心场景已全面覆盖，生态建设取得里程碑进展。',source:'鸿蒙生态',time:'3小时前',category:'产品',emoji:'🌐',bgColor:'#F3F4F6',isTop:false,readCount:8900},{id:5,title:'智能家居设备接入鸿蒙分布式框架全记录',desc:'从设备注册到状态同步，完整的开发流程记录。',source:'极客之家',time:'5小时前',category:'开发',emoji:'🏠',bgColor:'#F3F4F6',isTop:false,readCount:3100},]privategetTopNews():NewsItem{constlist:NewsItem[]=this.newsList??[]consttop=list.find((n:NewsItem)=>n.isTop)returntop??list[0]??{id:0,title:'',desc:'',source:'',time:'',category:'',emoji:'',bgColor:'#1E3A5F',isTop:false,readCount:0}}privategetNormalNews():NewsItem[]{constlist:NewsItem[]=this.newsList??[]returnlist.filter((n:NewsItem)=>!n.isTop)}@BuildertopCard(news:NewsItem){Stack({alignContent:Alignment.BottomStart}){// 背景色块Column().width('100%').height(200).backgroundColor(news.bgColor).borderRadius(12)// 大 emoji 装饰Text(news.emoji).fontSize(80).opacity(0.25).position({x:'55%',y:20})// 渐变遮罩Column().width('100%').height(140).linearGradient({direction:GradientDirection.Top,colors:[['rgba(0,0,0,0.75)',0],['rgba(0,0,0,0)',1]]})// 文字内容Column({space:8}){Row({space:6}){Text('置顶').fontSize(10).fontColor('#FCD34D').backgroundColor('rgba(251,191,36,0.2)').borderRadius(4).padding({left:6,right:6,top:2,bottom:2})Text(news.category).fontSize(10).fontColor('rgba(255,255,255,0.8)').backgroundColor('rgba(255,255,255,0.15)').borderRadius(4).padding({left:6,right:6,top:2,bottom:2})}Text(news.title).fontSize(18).fontColor(Color.White).fontWeight(FontWeight.Bold).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})Text(news.desc).fontSize(12).fontColor('rgba(255,255,255,0.7)').maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})Row({space:8}){Text(news.source).fontSize(12).fontColor('rgba(255,255,255,0.6)')Text('·').fontSize(12).fontColor('rgba(255,255,255,0.4)')Text(news.time).fontSize(12).fontColor('rgba(255,255,255,0.6)')Blank()Text(`👁${(news.readCount/1000).toFixed(1)}k`).fontSize(11).fontColor('rgba(255,255,255,0.6)')}.width('100%')}.padding({left:16,right:16,bottom:16}).width('100%')}.width('100%').clip(true).borderRadius(12).shadow({radius:8,color:`${news.bgColor}40`,offsetY:4})}@BuildernormalCard(news:NewsItem){Row({space:12}){// 缩略图Stack(){Circle({width:64,height:64}).fill('#F3F4F6')Text(news.emoji).fontSize(28)}.width(64).height(64).borderRadius(8)// 信息列Column({space:6}){Text(news.title).fontSize(14).fontColor('#111827').fontWeight(FontWeight.Medium).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})Text(news.desc).fontSize(12).fontColor('#6B7280').maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})Row({space:8}){Text(news.category).fontSize(10).fontColor('#3B82F6').backgroundColor('#EFF6FF').borderRadius(4).padding({left:5,right:5,top:1,bottom:1})Text(news.source).fontSize(11).fontColor('#9CA3AF')Text(news.time).fontSize(11).fontColor('#9CA3AF')Blank()Text(`👁${news.readCount>999?(news.readCount/1000).toFixed(1)+'k':news.readCount}`).fontSize(11).fontColor('#9CA3AF')}.width('100%')}.layoutWeight(1).alignItems(HorizontalAlign.Start)}.width('100%').padding({left:20,right:20,top:14,bottom:14}).backgroundColor(this.hoveredId===news.id?'#F9FAFB':Color.White).border({width:{bottom:1},color:'#F9FAFB'}).onHover((isHover)=>{this.hoveredId=isHover?news.id:-1}).animation({duration:150,curve:Curve.EaseOut})}build(){Scroll(){Column({space:0}){// 置顶大卡片Column(){this.topCard(this.getTopNews())}.padding({left:16,right:16,top:20,bottom:16}).backgroundColor(Color.White)// 分隔线Row(){Text('最新资讯').fontSize(13).fontColor('#6B7280').fontWeight(FontWeight.Medium)}.width('100%').padding({left:20,right:20,top:12,bottom:8}).backgroundColor('#F9FAFB')// 普通新闻列表Column({space:0}){ForEach(this.getNormalNews(),(news:NewsItem)=>{this.normalCard(news)})}.backgroundColor(Color.White)}}.width('100%').height('100%').scrollBar(BarState.Off).backgroundColor('#F9FAFB')}}

Stack vs Row：选型逻辑

Stack 的核心能力是图层叠加：多个子组件在同一位置堆叠，通过alignContent控制对齐，通过position/offset精确定位。

适合用 Stack 的场景：

  • 文字叠在图片上（封面图+标题）
  • 角标（图片右上角数字）
  • 遮罩层（半透明蒙层）

适合用 Row 的场景：

  • 元素横向并排（图左文右）
  • 元素有明确的空间分工

置顶大卡片属于第一类，必须用 Stack；普通行属于第二类，Row 更合适。

圆角与 clip

Stack 给子组件设borderRadius时，注意要在 Stack 上加.clip(true)才能让圆角真正裁剪内部子组件。否则背景色块有圆角，但子组件（比如遮罩层）可能在圆角处溢出。

写在最后

置顶大卡和普通行的差异化设计，本质上是在用视觉语言传达信息权重。Stack 给了我们把文字叠在图片上的能力，Row 给了我们清晰的横向分区。两种结构各司其职，组合起来就是完整的资讯列表视觉方案。

http://www.jsqmd.com/news/1023499/

相关文章：

  • 鞍山市2026奢侈品手表包包回收防骗指南：跑了5家店总结出的真实报价经验 - 马刺总冠军
  • 免费离线OCR神器：Umi-OCR文字识别终极指南
  • 毕节市奢侈品回收门店红黑榜：综合实力最强的五家店铺推荐 - 马刺总冠军
  • Tunshell核心组件解析：中继服务器、客户端与Web界面工作原理
  • 【图像处理】FJFM 分数阶正交傅里叶矩图像重建附matlab代码
  • 如何优化Claude Skills性能：从基础架构到高级调优的完整指南
  • 如何在浏览器中实现任意图像风格迁移？TensorFlow.js解决方案解析
  • Cursor+Copilot+Claude Code三角工作流：让AI真正代劳写代码
  • 思源笔记完全指南：如何用开源知识管理工具重构你的思维
  • 鹤壁市闲置奢侈品变现必看：手表包包回收门店真实测评汇总 - 马刺总冠军
  • OpenLLaMA 3B提示词工程指南：用AutoModelForCausalLM构建智能对话系统
  • 每日AI新闻推送 | 2026年6月16日
  • 靠谱上海环氧地坪公司怎么选？2026选购指南 - 博客万
  • （良心整理）亲测好用的AI论文软件，毕业党收藏备用
  • 如何用HS2-HF_Patch在10分钟内让你的Honey Select 2焕然一新？
  • 计算机毕业设计之智能宿舍管理平台设计
  • 三行代码颠覆机器学习：AutoGluon自动化框架的魔法之旅
  • 2026年众智商学院SCMP供应链专家学习路径和费用拆解？模块选择与备考资料领取说明 - 众智商学院职业教育
  • Midscene.js技术揭秘：视觉驱动UI自动化测试的架构实现与跨平台解决方案
  • 去内蒙古之前，我劝你千万别随便报团！这7位导游才是真正的“草原宝藏”！（附真实客户评价） - 纯玩旅游推荐官
  • 福州黄金回收干货科普：为什么品牌金店回收价偏低？三大核心原因解析 - 奢侈品回收评测
  • TeslaMate更新指南：安全升级到最新版本的最佳实践
  • Switch版wiliwili安装与使用指南：在任天堂掌机上畅享B站视频
  • 220亿美元！福克斯收购Roku，合并后将成美电视行业第三大参与者
  • Liouville CFT线缺陷：量子杂质与双曲几何的桥梁
  • 2026上新：成都青羊区除甲醛公司 5 大排名｜基于全民票选与真实口碑｜高温高湿气候适配性专项测评 - 专注室内空气检测治理
  • TripoSR深度解析：如何用单张图片在0.5秒内生成专业级3D模型？
  • Page Assist技术剖析：本地AI模型与浏览器深度集成的架构实现
  • 寄快递小程序比价，哪个最便宜？2026 年 6 月实测推荐 - 生活情报姬
  • 构建企业级跨平台视觉驱动自动化测试架构：Midscene.js分布式设计实践指南