随着纯血鸿蒙（HarmonyOS NEXT）生态的全面铺开，ArkTS 作为鸿蒙系统唯一官方主推的应用开发语言，已经成为移动开发领域的新风口。对于前端开发者、移动端开发者而言，掌握 ArkTS + ArkUI 声明式开发范式，既能快速切入鸿蒙生态，也是未来跨设备开发的核心技能。

在当前鸿蒙应用开发学习浪潮中，很多初学者都会陷入一个误区：只死记语法，却不做完整页面实战。单纯背诵 ArkTS 基础语法、组件属性，很难真正理解布局逻辑和页面搭建思想，而电商店铺详情页作为移动端最经典、最常用的页面类型，非常适合鸿蒙新手用来练手成长。本案例没有使用复杂的自定义组件、网络请求和数据交互，完全基于 ArkTS 原生基础组件搭建，门槛极低，零基础同学也能看懂每一行布局代码、每一处样式设置，非常适合高校课程设计、实训作业以及个人鸿蒙入门项目开发。

为了让大家直观掌握 ArkTS 开发的核心技巧，本文将通过电商店铺详情页实战项目，从零到一实现一个完整的页面。项目包含顶部导航、店铺信息、功能入口、商品列表、价格样式、优惠券、评价等电商高频模块，覆盖布局、组件、样式、状态、交互等全量知识点，代码可直接运行、可复用、可扩展，非常适合鸿蒙开发入门与实战提升。

项目最终实现效果：

1. 顶部返回 + 标题导航栏；
2. 店铺头像、名称、关注按钮；
3. 店铺介绍、证照信息、全部商品、商品分类四大功能入口；
4. 轮播 / 详情横幅展示；
5. 热销商品双列网格列表，包含商品图、标题、现价、原价（划线价）、优惠券、评价、购物车按钮；
6. 全页面自适应布局，符合鸿蒙应用设计规范。

一、开发环境与前置准备

1. 开发工具

本项目使用DevEco Studio NEXT版本（支持纯血鸿蒙），是鸿蒙官方指定 IDE，内置 ArkTS 语法校验、预览器、模拟器，开箱即用。

2. 项目结构

1. 新建 Stage 模型 ArkTS 工程；
2. 图片资源统一放在：src/main/resources/base/media；
3. 主页面文件：Index.ets（所有代码均在此文件实现）。

3. 核心技术栈

• ArkTS 声明式 UI 语法
• 基础组件：Column、Row、Image、Text、Button
• 布局能力：弹性布局、权重布局、内边距、外边距、圆角、边框
• 样式能力：字体颜色、大小、划线样式、背景色、填充色
• 组件适配：layoutWeight 自适应权重、FlexAlign 对齐方式

二、核心知识点前置学习

在开发前，我们先快速掌握本项目必备的 ArkTS 核心知识点，让你看懂代码、学会复用。

1. 容器组件（最常用）

• Column()：垂直布局容器，子组件从上到下排列；
• Row()：水平布局容器，子组件从左到右排列；
• 组合使用：Column 套 Row 是移动端页面开发的标准范式。

2. 对齐与分布

• justifyContent(FlexAlign.SpaceBetween)：两端对齐，中间自动留白；
• justifyContent(FlexAlign.SpaceEvenly)：均匀分布留白；
• justifyContent(FlexAlign.Center)：居中对齐。

3. 自适应权重

layoutWeight(1)：让子组件按比例占满父容器空间，常用于双列 / 多列商品布局。

4. 常用样式

• padding：内边距（让内容与边框有距离）；
• margin：外边距（让组件之间产生间距）；
• borderRadius：圆角；
• decoration：文字划线（原价专用）；
• backgroundColor：背景色；
• fontColor：字体颜色。

5. 图片资源

鸿蒙固定写法：$r("app.media.图片名")，无需加后缀（png/jpg）。

三、项目分步实现（完整可运行）

我会把代码拆分成六大模块，逐段讲解，让你彻底理解每一部分的作用。

模块 1：页面入口与状态定义

@Entry
@Component
struct Index {
  // 页面状态（本项目以静态展示为主，可扩展为接口动态数据）
  @State message: string = 'Hello World';

  build() {
    // 根容器：垂直布局
    Column() {
      // 后续所有模块写在这里
    }
    .height("100%") // 占满屏幕高度
  }
}

作用：固定页面入口结构，@Entry 表示页面入口，@Component 表示组件，build() 是 UI 渲染函数。

模块 2：顶部导航栏（返回 + 标题）

// 顶部导航
Row(){
  Image($r("app.media.fanhui1")).width(30).height(30).fillColor("#999")
  Text("帮助").fontColor("#999")
}
.width("100%")
.justifyContent(FlexAlign.SpaceBetween)
.padding(10)

功能：左侧返回图标，右侧帮助文字，两端对齐。

模块 3：顶部横幅

// 店铺顶部大图
Row() {
  Image($r("app.media.mainpage")).width(360)
}

作用：展示店铺头部横幅，是电商页面标准模块。

模块 4：店铺信息（头像 + 名称 + 关注按钮）

// 店铺信息：头像 + 名称 + 关注按钮
Row() {
  Image($r("app.media.p2")).width(50).height(50)
  Column() {
    Text('华为手机官方旗舰店').fontSize(16).margin({ bottom: 5 })
    Row() {
      Text('优质店铺')
        .fontSize(12)
        .fontColor('#999')
        .backgroundColor("#fffd7913")
        .borderRadius(3)
        .padding(2)
      Text("1.1万人关注").fontSize(12).fontColor('#ff707070')
    }
  }
  Button('关注')
    .type(ButtonType.Capsule)
    .backgroundColor('#FF4500')
    .width(80)
    .height(30)
}
.width("100%")
.justifyContent(FlexAlign.SpaceBetween)
.padding(10)

核心亮点：

• 胶囊按钮：ButtonType.Capsule；
• 店铺标签圆角背景；
• 水平排列自动对齐。

模块 5：四大功能入口

// 功能入口：店铺介绍、证照信息、全部商品、商品分类
Row() {
  Column() {
    Image($r('app.media.dianpu')).width(30).height(30).margin(5)
    Text('店铺介绍').fontSize(12)
  }
  Column() {
    Image($r('app.media.zhengjianxinxi')).width(30).height(30).margin(5)
    Text('证照信息').fontSize(12)
  }
  Column() {
    Image($r('app.media.shangpin')).width(30).height(30).margin(5)
    Text('全部商品').fontSize(12)
  }
  Column() {
    Image($r('app.media.fenlei')).width(30).height(30).margin(5)
    Text('商品分类').fontSize(12)
  }
}
.justifyContent(FlexAlign.SpaceEvenly)
.width("100%")
.margin({ top: 2 })
.padding({ left: 5 })

作用：图标 + 文字垂直排列，均匀分布，是电商常用功能区。

模块 6：中间横幅 + 热销商品标题

Image($r("app.media.p11")).width(350).padding(15)
Text("热销商品")
  .fontColor("#111111")
  .width("100%")
  .fontSize(20)
  .padding({ top: 10, bottom: 10 })

模块 7：双列商品列表（核心模块）

这是电商页面最核心的部分，包含：

• 商品图片
• 商品标题
• 现价（红色加粗）
• 原价（灰色划线）
• 优惠券标签
• 评价 + 购物车按钮

使用 layoutWeight(1) 实现双列等宽自适应布局。

// 第一行商品
Row() {
  // 左侧商品
  Column() {
    Image($r("app.media.p13")).width(100).height(100)
    Text("笔记本定制免费设计封面Logo企业…").lineHeight(26).margin({ top: 10 })

    // 价格区域
    Row() {
      Row() {
        Text("¥").fontColor("#F54319").fontSize(10).fontWeight(700)
        Text("23.00").fontColor("#F54319").fontSize(16).fontWeight(700)
      }
      Text("¥40.00")
        .fontSize(12)
        .fontColor("#999999")
        .margin({ left: 10 })
        .decoration({
          type: TextDecorationType.LineThrough,
          color: "#999999"
        })
    }

    // 优惠券
    Row() {
      Text("¥5")
        .backgroundColor("#F54319")
        .fontColor(Color.White)
        .padding(2)
        .borderRadius({ topLeft: 5, bottomLeft: 5 })
      Text("满40使用")
        .border({ width: 0.5, color: "#FE7028" })
        .fontColor("#FE7028")
        .padding(2)
    }

    // 评价 + 购物车
    Row() {
      Text("16条评价 100%好评").fontColor("#999999").fontSize(14)
      Image($r("app.media.gw"))
        .width(30)
        .backgroundColor("#d3d3d3")
        .padding(4)
        .borderRadius("50%")
        .fillColor("#333333")
    }
  }
  .layoutWeight(1)
  .margin({ right: 5, left: 5 })

  // 右侧商品（结构与左侧一致）
  Column() {
    // 商品内容同上
  }
  .layoutWeight(1)
  .margin({ right: 5, left: 5 })
}

// 第二行商品结构同上
Row() {
  // 左商品 + 右商品
}

核心亮点解析

1. 划线价格：使用 decoration 实现原价删除线，电商必备；
2. 优惠券样式：左圆角 + 右边框，真实项目风格；
3. 购物车按钮：圆形背景、图标居中、填充色修改；
4. 双列布局：layoutWeight(1) 自动平分宽度，适配不同屏幕；
5. 文字溢出处理：lineHeight 统一行高，界面更整洁。

四、完整代码（可直接复制运行）

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      // 1.顶部导航
      Row(){
        Image($r("app.media.fanhui1")).width(30).height(30).fillColor("#999")
        Text("帮助").fontColor("#999")
      }.width("100%").justifyContent(FlexAlign.SpaceBetween).padding(10)

      // 2.顶部横幅
      Row() {
        Image($r("app.media.mainpage")).width(360)
      }

      // 3.店铺信息
      Row() {
        Image($r("app.media.p2")).width(50).height(50)
        Column() {
          Text('华为手机官方旗舰店').fontSize(16).margin({ bottom: 5 })
          Row() {
            Text('优质店铺').fontSize(12).fontColor('#999999').backgroundColor("#fffd7913").borderRadius(3).padding(2)
            Text("1.1万人关注").fontSize(12).fontColor('#ff707070')
          }
        }
        Button('关注').type(ButtonType.Capsule).backgroundColor('#FF4500').width(80).height(30)
      }.width("100%").justifyContent(FlexAlign.SpaceBetween).padding(10)

      // 4.功能入口
      Row() {
        Column() {
          Image($r('app.media.dianpu')).width(30).height(30).margin(5)
          Text('店铺介绍').fontSize(12)
        }
        Column() {
          Image($r('app.media.zhengjianxinxi')).width(30).height(30).margin(5)
          Text('证照信息').fontSize(12)
        }
        Column() {
          Image($r('app.media.shangpin')).width(30).height(30).margin(5)
          Text('全部商品').fontSize(12)
        }
        Column() {
          Image($r('app.media.fenlei')).width(30).height(30).margin(5)
          Text('商品分类').fontSize(12)
        }
      }.justifyContent(FlexAlign.SpaceEvenly).width("100%").margin({ top: 2 })

      // 5.中间横幅
      Image($r("app.media.p11")).width(350).padding(15)

      // 6.热销标题
      Text("热销商品").fontColor("#111111").width("100%").fontSize(20).padding({ top: 10, bottom: 10 })

      // 7.商品第一行
      Row() {
        Column() {
          Image($r("app.media.p13")).width(100).height(100)
          Text("笔记本定制免费设计封面Logo企业…").lineHeight(26).margin({ top: 10 })
          Row() {
            Row() {
              Text("¥").fontColor("#F54319").fontSize(10).fontWeight(700)
              Text("23.00").fontColor("#F54319").fontSize(16).fontWeight(700)
            }
            Text("¥40.00").fontSize(12).fontColor("#999999").decoration({ type: TextDecorationType.LineThrough })
          }
          Row() {
            Text("¥5").backgroundColor("#F54319").fontColor(Color.White).padding(2).borderRadius({ topLeft:5, bottomLeft:5 })
            Text("满40使用").border({ width: 0.5, color: "#FE7028" }).fontColor("#FE7028").padding(2)
          }
          Row() {
            Text("16条评价 100%好评").fontColor("#999999").fontSize(14)
            Image($r("app.media.gw")).width(30).backgroundColor("#d3d3d3").padding(4).borderRadius("50%")
          }
        }.layoutWeight(1).margin(5)

        Column() {
          // 同左商品结构
          Image($r("app.media.p13")).width(100).height(100)
          Text("笔记本定制免费设计封面Logo企业…").lineHeight(26).margin({ top: 10 })
          Row() {
            Row() {
              Text("¥").fontColor("#F54319").fontSize(10).fontWeight(700)
              Text("23.00").fontColor("#F54319").fontSize(16).fontWeight(700)
            }
            Text("¥40.00").fontSize(12).fontColor("#999999").decoration({ type: TextDecorationType.LineThrough })
          }
          Row() {
            Text("¥5").backgroundColor("#F54319").fontColor(Color.White).padding(2)
            Text("满40使用").border({ width: 0.5, color: "#FE7028" }).fontColor("#FE7028").padding(2)
          }
          Row() {
            Text("16条评价 100%好评").fontColor("#999999").fontSize(14)
            Image($r("app.media.gw")).width(30).backgroundColor("#d3d3d3").padding(4).borderRadius("50%")
          }
        }.layoutWeight(1).margin(5)
      }

      // 商品第二行
      Row() {
        Column() {}.layoutWeight(1).margin(5)
        Column() {}.layoutWeight(1).margin(5)
      }
    }.height("100%")
  }
}

五、运行效果与功能说明

将图片资源放入 media 文件夹后，直接运行即可看到完整电商店铺页面：

界面亮点

• 配色符合电商平台风格（橙色突出行动按钮）；
• 排版规范、间距统一、层级清晰；
• 支持手机 / 平板 / 折叠屏等多设备适配；
• 代码结构清晰，便于维护与扩展。

六、项目扩展方向（可升级为完整电商 App）

本项目是标准电商店铺详情页，你可以在此基础上快速扩展：

1. 添加商品点击跳转使用 router.pushUrl 跳转到商品详情页。

2. 动态数据渲染使用 ForEach 循环渲染商品列表，从网络接口获取数据。

3. 添加关注状态切换使用 @State 管理关注状态，点击后切换文字与颜色。

4. 上拉加载更多商品使用 List 组件实现下拉刷新、上拉加载。

5. 添加购物车动画点击购物车按钮实现缩放动画。

6. 适配深色模式使用鸿蒙提供的主题变量自动切换亮色 / 暗色。

七、ArkTS 开发实战总结

通过这个电商店铺页面实战，你已经掌握了 ArkTS 开发80% 的常用技能：

1. 布局是核心

• Column + Row 组合搞定所有页面结构；
• layoutWeight 实现自适应；
• padding + margin 控制间距；
• justifyContent 控制对齐。

2. 组件是基础

• Image 展示图片
• Text 展示文字
• Button 实现按钮
• 组合后可实现任意复杂 UI。

3. 样式是颜值

• 圆角、边框、背景色、划线、字体粗细、行高…
• 这些样式在电商、社交、工具类 App 中高频使用。

4. ArkTS 并不难

如果你会 HTML + CSS，一天就能上手 ArkTS；如果你是零基础，一周就能做出商业级页面。

5. 鸿蒙开发前景

• 纯血鸿蒙不支持安卓，ArkTS 是刚需；
• 大量企业急需 ArkTS 开发人才；
• 就业、接包、创业都具备极高价值。

八、结语

本文通过鸿蒙电商店铺详情页实战，从环境搭建、知识点讲解、模块拆分、完整代码到扩展方向，完成了一套完整的 ArkTS 实战教学。项目覆盖了真实商业项目中最常用的布局、组件、样式与交互逻辑，代码简洁、结构清晰、可直接用于课程设计、毕业设计、外包项目。

鸿蒙生态正在高速爆发，ArkTS 作为未来 3-5 年的主流开发语言，越早学习越能占据先机。如果你能独立完成这个页面，说明你已经具备鸿蒙初级开发工程师的能力。