HarmonyOS7 电商首页拆解：Flex 嵌套如何撑起完整首页

文章目录电商首页先拆大区块数据结构先看这里状态变量负责让页面动起来布局代码怎么读交互逻辑别藏太深使用时我会怎么改完整代码代码里的几个细节常见改造坑写在最后电商首页不是一个属性能写完搜索、Banner、分类、秒杀区都要分层处理。这里我会多讲一点代码。很多教程只把完整代码贴出来看着是完整了但读者真正改项目时还是不知道该动哪里。下面这几段会把数据、状态、布局和事件拆开说。电商首页先拆大区块这个案例对应的是「电商首页」。如果只是运行一下效果当然很快但真要把它改进自己的项目里最好先把页面分成“数据层、状态层、布局层、交互层”四块。我比较推荐这种读法先看interface定义再看State最后看build()里的Column、Row、Flex怎么嵌套。这样不容易被一长串样式绕晕。数据结构先看这里这份代码里的核心数据模型是BannerItem / CategoryEntry / FlashSaleProduct。它决定了页面每一项需要哪些字段比如标题、描述、颜色、状态、价格、数量、角标等。很多 ArkUI 页面写得乱根源不是布局而是数据字段没想清楚。如果你要接真实接口优先改这一层。接口字段名和页面字段名不一致也没关系可以在请求完成后做一次映射别把接口返回结构直接塞进 UI 里。那样短期省事后面改样式会很难受。状态变量负责让页面动起来这个案例里最关键的状态是currentBanner / cartCount。它不是摆设页面里的选中、展开、切换、数量变化、输入内容基本都靠它驱动。写 HarmonyOS7 ArkUI 页面时我会刻意把“会变的东西”和“不会变的静态数据”分开。像banners / categories / flashProducts这种列表数据负责提供内容currentBanner / cartCount负责描述当前用户操作后的界面状态。这样读代码时很清楚数据从哪里来界面为什么变。布局代码怎么读布局部分不要从第一行样式读到最后一行这样很累。先找最外层容器看页面是纵向结构还是横向结构再看每个区域内部是Row、Column还是Flex。这个案例的布局重点是复杂首页要按区域拆搜索、Banner、分类、商品卡不要塞在同一层。如果你调页面时发现内容挤压、对齐不准、间距失控优先检查这几个地方固定宽高是不是太多layoutWeight或Blank是否用对列表项里长文本有没有设置省略Flex 换行条件是否满足。交互逻辑别藏太深这个页面的交互主线是点击分类会增加购物车数量Banner 和秒杀区组成完整首页氛围。小案例里直接在.onClick()里改状态没问题读起来也直观。但如果后面业务变复杂比如要请求接口、弹确认框、写缓存就别把逻辑全塞在事件回调里。可以拆成一个私有方法让 UI 代码只表达“点了什么”具体怎么处理交给方法。使用时我会怎么改如果你只是学习布局直接运行下面代码就行。如果你准备放进项目里我建议按这个顺序改先替换数据数组再调整颜色和字体最后再改交互逻辑。还有一个小经验不要一开始就把所有东西拆成组件。先让页面跑通等你发现某个卡片、按钮组、列表项重复出现两三次再抽成Builder或单独组件。这样代码会更贴近真实需求。完整代码/** * Flex 嵌套布局电商首页综合布局 * 知识点Flex 容器嵌套实现复杂电商首页布局结构 */ interface BannerItem_48yv { id: number title: string subTitle: string bgColor: string emojiIcon: string } interface CategoryEntry { id: number name: string emojiIcon: string bgColor: string } interface FlashSaleProduct { id: number productName: string currentPrice: string originalPrice: string soldPercent: number emojiIcon: string } Entry Component struct EcommerceHomeFlexPage { State currentBanner: number 0 State cartCount: number 0 private banners: BannerItem_48yv[] [ { id: 1, title: 618年中大促, subTitle: 全场最高优惠 50%, bgColor: #FF4D4D, emojiIcon: }, { id: 2, title: 新品首发, subTitle: HarmonyOS 5.0 开发者套件, bgColor: #007DFF, emojiIcon: }, { id: 3, title: 会员专享, subTitle: 限时积分兑换, bgColor: #9B59B6, emojiIcon: }, ] private categories: CategoryEntry[] [ { id: 1, name: 手机, emojiIcon: , bgColor: #FFE8E8 }, { id: 2, name: 电脑, emojiIcon: , bgColor: #E8F0FF }, { id: 3, name: 耳机, emojiIcon: , bgColor: #E8FFE8 }, { id: 4, name: 平板, emojiIcon: , bgColor: #FFF3E0 }, { id: 5, name: 手表, emojiIcon: ⌚, bgColor: #F3E8FF }, { id: 6, name: 相机, emojiIcon: , bgColor: #E8FFFF }, { id: 7, name: 家电, emojiIcon: , bgColor: #FFFFE8 }, { id: 8, name: 更多, emojiIcon: ⋯, bgColor: #F5F5F5 }, ] private flashSaleItems: FlashSaleProduct[] [ { id: 1, productName: 蓝牙耳机 Pro, currentPrice: ¥199, originalPrice: ¥499, soldPercent: 75, emojiIcon: }, { id: 2, productName: 智能手表, currentPrice: ¥399, originalPrice: ¥799, soldPercent: 88, emojiIcon: ⌚ }, { id: 3, productName: 充电宝 20000, currentPrice: ¥89, originalPrice: ¥159, soldPercent: 60, emojiIcon: }, { id: 4, productName: 机械键盘, currentPrice: ¥299, originalPrice: ¥599, soldPercent: 45, emojiIcon: ⌨️ }, ] build() { Column() { // 顶部导航栏 // Flex RowLogo 搜索框(flexGrow) 购物车图标 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { Text( 商城) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#FFFFFF) .flexShrink(0) Row({ space: 8 }) { Text().fontSize(14).fontColor(#BBBBBB) Text(搜索商品...) .fontSize(14) .fontColor(#BBBBBB) .layoutWeight(1) } .layoutWeight(1) // flexGrow: 1 .height(36) .backgroundColor(rgba(255,255,255,0.2)) .borderRadius(18) .padding({ left: 12, right: 12 }) .margin({ left: 12, right: 12 }) Stack({ alignContent: Alignment.TopEnd }) { Text() .fontSize(24) if (this.cartCount 0) { Text(this.cartCount.toString()) .fontSize(10) .fontColor(#FFFFFF) .backgroundColor(#FF4D4D) .width(16).height(16) .borderRadius(8) .textAlign(TextAlign.Center) } } .flexShrink(0) } .width(100%) .padding({ left: 16, right: 16, top: 16, bottom: 12 }) .backgroundColor(#007DFF) // Banner 区 // Flex Row三个 Banner 水平布局中间大两侧小 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Stretch }) { ForEach(this.banners, (banner: BannerItem_48yv, idx: number) { Column({ space: 8 }) { Text(banner.emojiIcon).fontSize(idx 1 ? 40 : 28) Text(banner.title) .fontSize(idx 1 ? 16 : 13) .fontWeight(FontWeight.Bold) .fontColor(#FFFFFF) Text(banner.subTitle) .fontSize(idx 1 ? 12 : 10) .fontColor(rgba(255,255,255,0.85)) .maxLines(1) } .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .backgroundColor(banner.bgColor) .borderRadius(idx 1 ? 14 : 10) .flexGrow(idx 1 ? 2 : 1) // 中间 banner flexGrow:2两侧各 flexGrow:1 .height(idx 1 ? 120 : 100) .margin(idx 0 ? { right: 8 } : idx 2 ? { left: 8 } : { left: 0, right: 0 }) .onClick(() { this.currentBanner idx }) }) } .width(100%) .padding({ left: 16, right: 16, top: 12, bottom: 4 }) // 分类导航 // 外层 Flex Row Wrap内层每项 Flex Column Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceAround }) { ForEach(this.categories, (cat: CategoryEntry) { // 每个分类项Flex Column Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text(cat.emojiIcon) .fontSize(24) .width(48).height(48) .textAlign(TextAlign.Center) .backgroundColor(cat.bgColor) .borderRadius(14) Text(cat.name) .fontSize(12) .fontColor(#555555) .margin({ top: 6 }) } .flexBasis(12.5%) // 8等分 .padding({ top: 4, bottom: 4 }) .onClick(() { this.cartCount }) }) } .width(100%) .padding({ left: 8, right: 8, top: 12 }) .backgroundColor(#FFFFFF) // 限时秒杀 Column({ space: 12 }) { // 标题行Flex Row Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { Text(⚡ 限时秒杀) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#FF4D4D) Text(02:45:30) .fontSize(14) .fontColor(#FFFFFF) .backgroundColor(#FF4D4D) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .borderRadius(6) .margin({ left: 10 }) Blank() Text(全部 ›) .fontSize(14) .fontColor(#007DFF) } .width(100%) // 商品横排Flex Row等分 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { ForEach(this.flashSaleItems, (product: FlashSaleProduct) { // 每个商品Flex Column Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { // 商品图 Text(product.emojiIcon) .fontSize(32) .width(72).height(72) .textAlign(TextAlign.Center) .backgroundColor(#F5F5F5) .borderRadius(10) // 价格 Text(product.currentPrice) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#FF4D4D) .margin({ top: 8 }) Text(product.originalPrice) .fontSize(11) .fontColor(#BBBBBB) .decoration({ type: TextDecorationType.LineThrough }) // 进度条 Column({ space: 3 }) { Progress({ value: product.soldPercent, total: 100, type: ProgressType.Linear }) .width(100%) .color(#FF4D4D) .backgroundColor(#FFE0E0) .style({ strokeWidth: 4, enableScanEffect: false }) Text(已售 product.soldPercent %) .fontSize(10) .fontColor(#FF8C00) } .width(100%) .margin({ top: 6 }) } .flexBasis(23%) // 四等分每项约占 23%留间距 .padding({ top: 8, bottom: 8 }) }) } .width(100%) } .padding({ left: 16, right: 16, top: 14, bottom: 14 }) .backgroundColor(#FFFFFF) .margin({ top: 8 }) } .width(100%) .height(100%) .backgroundColor(#F5F6FA) } }代码里的几个细节看完完整代码后可以回头重点检查三处。第一处是数据声明。BannerItem / CategoryEntry / FlashSaleProduct这类结构把页面需要的字段提前摆出来后面ForEach渲染时就不会到处临时拼数据。第二处是状态更新。currentBanner / cartCount变化后相关 UI 会自动刷新这也是声明式 UI 写起来舒服的地方。你不用手动找某个控件改样式只要把状态描述清楚。第三处是容器嵌套。这个案例不是为了炫技才套Row、Column、Flex而是每一层都在解决具体排版问题。读代码时多问一句这一层容器负责什么如果答不上来它可能就该被简化。常见改造坑最容易踩的坑是把示例里的颜色、文案、尺寸都保留然后只替换数据。这样页面能跑但很难和自己的项目风格统一。另一个坑是过度依赖固定宽高。固定宽高在演示里很方便在真实设备上就未必稳。文本变长、屏幕变窄、系统字体变大都会把问题暴露出来。我一般会保留固定尺寸给图标、头像、按钮这类稳定元素文本区域、列表区域、内容卡片尽量交给弹性布局处理。写在最后这个案例的价值不只是“有一份完整代码”。更重要的是你能从里面看到 ArkUI 页面的一条基本思路数据先定义清楚状态单独管理布局按区域拆交互只改必要状态。按这个思路去写页面复杂一点也不会马上失控。