文章目录前言Column 的主轴和交叉轴PC端新闻阅读页Column 的实战用法space 和 margin 的区别layoutWeight 是 Column 里的弹性分配写在最后前言Column 是 ArkUI 里用得最多的布局容器之一但很多人对它的理解就停在子组件从上往下排列这句话上。这当然没错但 Column 真正的价值在于它的对齐控制、间距管理、以及和 Row 嵌套时产生的灵活性。拿 PC 端新闻阅读列表来说侧边栏导航、内容卡片列表、底部分页栏每一层都是 Column 的应用理解了 Column 才能把这种多层结构搭稳。Column 的主轴和交叉轴Column 的主轴是垂直方向Y 轴子组件按声明顺序从上往下排。交叉轴是水平方向X 轴控制子组件在水平方向的对齐。justifyContent控制主轴垂直对齐Column(){Text(标题)Text(内容)}.height(100%).justifyContent(FlexAlign.SpaceBetween)// 顶部一个、底部一个alignItems控制交叉轴水平对齐Column(){Text(这行文字)Button(按钮)}.alignItems(HorizontalAlign.Start)// 左对齐.alignItems(HorizontalAlign.Center)// 居中默认.alignItems(HorizontalAlign.End)// 右对齐PC端新闻阅读页Column 的实战用法完整示例PcNewsListPage.etsimport{router}fromkit.ArkUIinterfaceNewsItem{id:numbertitle:stringsource:stringtime:stringcategory:stringemoji:stringisTop:booleanreadCount:number}EntryComponentstruct PcNewsListPage{StateactiveCategory:string全部StatenewsList:NewsItem[][{id:1,title:HarmonyOS NEXT 正式发布全面进入鸿蒙时代,source:华为官方,time:10分钟前,category:科技,emoji:,isTop:true,readCount:12600},{id:2,title:鸿蒙生态应用突破十万覆盖主流场景,source:鸿蒙生态,time:30分钟前,category:科技,emoji:,isTop:false,readCount:8900},{id:3,title:ArkUI 4.0 新特性解读动效系统全面升级,source:开发者社区,time:1小时前,category:开发,emoji:,isTop:false,readCount:5600},{id:4,title:鸿蒙 PC 端适配指南窗口管理与响应式布局,source:技术博客,time:2小时前,category:开发,emoji:️,isTop:false,readCount:4200},{id:5,title:智能家居新纪元鸿蒙设备互联实战,source:极客之家,time:3小时前,category:产品,emoji:,isTop:false,readCount:3100},{id:6,title:国产操作系统的未来鸿蒙 vs 其他竞争者,source:科技评论,time:5小时前,category:产品,emoji:,isTop:false,readCount:9800},]privatecategories:string[][全部,科技,开发,产品]privategetFilteredNews():NewsItem[]{constlistthis.newsList??[]if(this.activeCategory全部)returnlistreturnlist.filter((n:NewsItem)n.categorythis.activeCategory)}build(){Row(){// ── 左侧侧边栏 ──Column({space:0}){// Logo区Row({space:10}){Text().fontSize(22)Text(鸿蒙资讯).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#111827)}.width(100%).padding({left:16,right:16,top:20,bottom:20}).border({width:{bottom:1},color:#F3F4F6})// 分类导航Column({space:4}){ForEach(this.categories,(cat:string){Row({space:10}){Text([全部,科技,开发,产品].indexOf(cat)0?[,,⚙️,][[全部,科技,开发,产品].indexOf(cat)]:•).fontSize(14)Text(cat).fontSize(14).fontColor(this.activeCategorycat?#3B82F6:#374151).fontWeight(this.activeCategorycat?FontWeight.Medium:FontWeight.Normal)}.width(100%).padding({left:12,right:12,top:10,bottom:10}).borderRadius(8).backgroundColor(this.activeCategorycat?#EFF6FF:Color.Transparent).onClick(()this.activeCategorycat)})}.padding({left:12,right:12,top:12}).layoutWeight(1)// 底部用户信息Row({space:10}){Stack(){Circle({width:32,height:32}).fill(#3B82F6)Text(U).fontSize(14).fontColor(Color.White).fontWeight(FontWeight.Bold)}Column({space:2}){Text(开发者).fontSize(13).fontColor(#111827).fontWeight(FontWeight.Medium)Text(已读 42 篇).fontSize(11).fontColor(#9CA3AF)}.alignItems(HorizontalAlign.Start)}.width(100%).padding({left:16,right:16,top:12,bottom:20}).border({width:{top:1},color:#F3F4F6})}.width(200).height(100%).backgroundColor(Color.White).border({width:{right:1},color:#F3F4F6})// ── 右侧内容区 ──Column(){// 顶部筛选栏Row(){Text(this.activeCategory全部?全部资讯:${this.activeCategory}频道).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#111827)Blank()Text(共${this.getFilteredNews().length}篇).fontSize(13).fontColor(#9CA3AF)}.width(100%).padding({left:24,right:24,top:20,bottom:16})// 新闻列表Scroll(){Column({space:0}){ForEach(this.getFilteredNews(),(news:NewsItem){Row({space:14}){// 图标Stack(){Circle({width:48,height:48}).fill(#F3F4F6)Text(news.emoji).fontSize(22)}.width(48).height(48).borderRadius(8)// 信息 ColumnColumn({space:6}){// 标题行Row({space:8}){if(news.isTop){Text(置顶).fontSize(10).fontColor(#EF4444).backgroundColor(#FEF2F2).borderRadius(4).padding({left:5,right:5,top:2,bottom:2})}Text(news.title).fontSize(14).fontColor(#111827).fontWeight(FontWeight.Medium).layoutWeight(1).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})}// 元信息行Row({space:12}){Text(news.source).fontSize(12).fontColor(#6B7280)Text(news.time).fontSize(12).fontColor(#9CA3AF)Blank()Text(${news.readCount999?(news.readCount/1000).toFixed(1)k:news.readCount}).fontSize(11).fontColor(#9CA3AF)}}.layoutWeight(1).alignItems(HorizontalAlign.Start)}.width(100%).padding({left:20,right:20,top:14,bottom:14}).border({width:{bottom:1},color:#F9FAFB}).backgroundColor(Color.White)})}}.layoutWeight(1).scrollBar(BarState.Off)}.layoutWeight(1).height(100%).backgroundColor(#F9FAFB)}.width(100%).height(100%)}}space 和 margin 的区别Column 的space参数给所有相邻子项之间加统一间距不影响首项顶部和末项底部。适合子项数量固定、间距统一的场景。margin是给单个组件设置外边距更灵活但也更繁琐——每个子组件都要单独写。经验上子项之间距离一致就用space需要某个子项特殊间距就用margin。两者也可以混用。layoutWeight 是 Column 里的弹性分配Column 里的layoutWeight和 Flex 里的flexGrow效果类似子组件按权重比例分配主轴垂直的剩余高度。Column(){Text(固定高度标题).height(60)// 占 60vpContent().layoutWeight(1)// 占剩余全部Footer().height(64)// 占 64vp}.height(100%)这是 PC 端固定顶部 弹性内容 固定底部最常见的结构写法。写在最后Column 的justifyContent控制垂直分布alignItems控制水平对齐space统一间距layoutWeight弹性分配高度——这四个属性搭配用好PC 端大部分页面骨架都能建出来。