阅读视图

发现新文章，点击刷新页面。

HarmonyOS 应用开发基础案例（三）：使用DevEco Studio高效开发（篇一）

掘金前端

Raink

2025年11月30日 09:50

HUAWEI DevEco Studio是基于IntelliJ IDEA Community开源版本打造，为运行在HarmonyOS系统上的应用和元服务提供一站式的开发平台。

作为一款开发工具，除了具有基本的代码开发、编译构建及调测等功能外，DevEco Studio还具有如下特点：

高效智能代码编辑：支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能，提升代码编写效率。
多端双向实时预览：支持UI界面代码的双向预览、实时预览、动态预览、组件预览以及多端设备预览，便于快速查看代码运行效果。
多端设备模拟仿真：提供HarmonyOS本地模拟器，支持Phone等设备的模拟仿真，便捷获取调试环境。
DevEco Profiler性能调优：提供实时监控能力和场景化调优模板，便于全方位的设备资源监测，采集数据覆盖多个维度，为开发者带来高效、直通代码行的调优体验。

1. 工程管理

DevEco Studio的工程管理涵盖应用和元服务的结构，其中APP Pack由HAP包和pack.info文件组成；支持工程目录的两种视图形式，并展示基于ArkTS Stage模型的目录结构；同时提供多种工程模板及创建新工程的详细流程，帮助开发者高效搭建与管理项目。

1.1. 工程介绍

1.1.1. App包结构

在进行应用/元服务开发前，我们应该掌握应用/元服务的逻辑结构。

应用/元服务发布形态为APP Pack（Application Package），它是由一个或多个HAP（Harmony Ability Package）包以及描述APP Pack属性的pack.info文件组成。

一个HAP在工程目录中对应一个Module，它是由代码、资源、三方库及应用/元服务配置文件组成，HAP可以分为Entry和Feature两种类型。

Entry： 应用的主模块，作为应用的入口，提供了应用的基础功能。
Feature： 应用的动态特性模块，作为应用能力的扩展，可以根据用户的需求和设备类型进行选择性安装。

Stage模型应用程序包结构如图1所示。

图1 App包结构

1.1.2. 切换工程视图

DevEco Studio工程目录结构提供工程视图和Ohos视图。工程视图（Project）展示工程中实际的文件结构，Ohos视图会隐藏一些编码中不常用到的文件，并将常用到的文件进行重组展示，方便开发者查询或定位所需编辑的模块或文件。

工程创建或打开后，默认显示工程视图，如果要切换到Ohos视图，在左上角单击Project > Ohos进行切换。如图2所示。

图2 工程视图目录截图

1.2. 工程目录结构

ArkTS Stage模型支持API Version 10及以上版本，其工程目录结构如图3所示：

图3 某工程目录结构

AppScope > app.json5：应用的全局配置信息。
entry： 应用/元服务模块，编译构建生成一个HAP。

- src > main > ets：用于存放ArkTS源码。
- src > main > ets > entryability：应用/元服务的入口。
- src > main > ets > pages：应用/元服务包含的页面。
- src > main > resources： 用于存放应用/元服务模块所用到的资源文件，如图形、多媒体、字符串、布局文件等。如表4-1所示。

资源目录	资源文件说明
base>element	包括字符串、整型数、颜色、样式等资源的json文件。每个资源均由json格式进行定义，例如：- - - boolean.json：布尔型

    -   color.json：颜色
    -   float.json：浮点型
    -   intarray.json：整型数组
    -   integer.json：整型
    -   pattern.json：样式
    -   plural.json：复数形式
    -   strarray.json：字符串数组
    -   string.json：字符串值 |

表4-1 资源目录与文件说明

- src > main > module.json5：Stage模型模块配置文件，主要包含HAP的配置信息、应用在具体设备上的配置信息以及应用的全局配置信息。
- build-profile.json5： 当前的模块信息、编译信息配置项，包括buildOption、targets配置等。
- hvigorfile.ts：模块级编译构建任务脚本。
- oh-package.json5：描述三方包的包名、版本、入口文件（类型声明文件）和依赖项等信息。

oh_modules：用于存放三方库依赖信息，包含应用/元服务所依赖的第三方库文件。
build-profile.json5： 应用级配置信息，包括签名、产品配置等。
hvigorfile.ts： 应用级编译构建任务脚本。
oh-package.json5： 描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。

1.3. 工程模板介绍

DevEco Studio支持多种品类的应用/元服务开发，预置丰富的工程模板，可以根据工程向导轻松创建适应于各类设备的工程，并自动生成对应的代码和资源模板。同时，DevEco Studio还提供了多种编程语言供开发者进行应用/元服务开发，包括ArkTS、JS和C/C++。如图4所示。

图4 创建项目

工程模板支持的开发语言及模板说明如表4-2所示：

模板名称	说明
Empty Ability	用于Phone、Tablet、2in1、Car设备的模板，展示基础的Hello World功能。
Native C++	用于Phone、Tablet、2in1、Car设备的模板，作为应用调用C++代码的示例工程，界面显示“Hello World”。
[CloudDev]Empty Ability	端云一体化开发通用模板。
[Lite]Empty Ability	用于Lite Wearable设备的模板，展示了基础的Hello World功能。可基于此模板，修改设备类型及RuntimeOS，进行小型嵌入式设备开发。
Flexible Layout Ability	用于创建跨设备应用开发的三层工程结构模板。三层工程结构包含common（公共能力层）、features（基础特性层）、products（产品定制层）。
Embeddable Ability	用于开发支持被其他应用嵌入式运行的元服务的工程模板。

表4-2 模版说明

1.4. ****创建一个新的工程

当您开始开发一个应用/元服务时，首先需要根据工程创建向导，创建一个新的工程，工具会自动生成对应的代码和资源模板。

通过如下两种方式，打开工程创建向导界面。

如果当前未打开任何工程，可以在DevEco Studio的欢迎页，选择Create Project开始创建一个新工程。
如果已经打开了工程，可以在菜单栏选择File > New > Create Project来创建一个新工程。

根据工程创建向导，选择创建Application或Atomic Service。再选择需要的Ability工程模板，然后单击Next。
在工程配置页面，需要根据向导配置工程的基本信息。

Project name：工程的名称，可以自定义，由大小写字母、数字和下划线组成。
Bundle name：标识应用的包名，用于标识应用的唯一性。
Save location：工程文件本地存储路径，由大小写字母、数字和下划线等组成，不能包含中文字符。
Compatible SDK：兼容的最低API Version。
Module name：模块的名称。
Device type： 该工程模板支持的设备类型。

如图5所示。

图5 配置项目

单击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

2. 代码编辑

本节介绍代码阅读、生成/补全、实时检查与修复、重构等常用操作。DevEco Studio支持多语言代码的高亮显示、快捷跳转和智能格式化，提供自动补全、构造器快速生成等功能，能够实时检测并修复代码错误，同时支持提取方法、重命名等重构操作，有效提升编码效率。

2.1. 代码阅读

DevEco Studio支持使用多种语言进行应用/元服务的开发，包括ArkTS、JS和C/C++。在编写应用/元服务阶段，可以通过掌握代码编写的各种常用技巧，来提升编码效率。

2.1.1. 代码高亮

支持对代码关键字、运算符、字符串、类、标识符、注释等进行高亮显示，您可以打开File > Settings（macOS为DevEco Studio > Preferences）面板，在Editor > Color Scheme自定义各字段的高亮显示颜色。默认情况下，您可以在Language Defaults中设置源代码中的各种高亮显示方案，该设置将对所有语言生效；如果您需要针对具体语言的源码高亮显示方案进行定制，可以在左侧边栏选择对应的语言，然后取消“Inherit values from”选项后设置对应的颜色即可。如图6所示。

图6 代码高亮设置

2.1.2. 代码跳转

在编辑器中，可以按住Ctrl键（macOS为Command键），鼠标单击代码中引用的类、方法、参数、变量等名称，自动跳转到定义处。若单击定义处的类、变量等名称，当仅有一处引用时，可直接跳转到引用位置；若有多处引用，在弹窗中可以选择想要查看的引用位置。

2.1.3. 代码格式化

代码格式化功能可以帮助您快速的调整和规范代码格式，提升代码的美观度和可读性。默认情况下，DevEco Studio已预置了代码格式化的规范，您也可以个性化的设置各个文件的格式化规范，设置方式如下：在File > Settings > Editor > Code Style（macOS为DevEco Studio > Preferences > ****Editor ****> ****Code Style）下，选择需要定制的文件类型，如ArkTS，然后自定义格式化规范即可。

图7 代码格式化设置

在使用代码格式化功能时，您可以使用快捷键Ctrl + Alt + L（macOS为Option+Command +L）可以快速对选定范围的代码进行格式化。

如果在进行格式化时，对于部分代码片段不需要进行自动的格式化处理，可以通过如下方式进行设置：

在File > Settings >Editor > Code Style（macOS为DevEco Studio > Preferences > Editor > Code Style），单击“Formatter”，勾选“Turn formatter on/off with markers in code comments”。如图8所示。

图8 代码样式

在不需要进行格式化操作的代码块前增加“//@formatter:off”，并在该代码块的最后增加“//@formatter:on”，即表示对该范围的代码块不需要进行格式化操作。如图9所示。

图9 代码格式化

2.1.4. 代码折叠

支持对代码块的快速折叠和展开，既可以单击编辑器左侧边栏的折叠和展开按钮对代码块进行折叠和展开操作，还可以对选中的代码块单击鼠标右键选择折叠方式，包括折叠、递归折叠、全部折叠等操作。如图10所示。

图10 代码折叠

2.1.5. 代码快速注释

支持对选择的代码块进行快速注释，使用快捷键Ctrl+/ （macOS为Command+/ ）进行快速注释。对于已注释的代码块，再次使用快捷键Ctrl+/ （macOS为Command+/ ）取消注释。如图11所示。

图11 代码注释

2.1.6. 代码结构树

使用快捷键Alt + 7 / Ctrl + F12（macOS为Command+7）打开代码结构树，快速查看文件代码的结构树，包括全局变量和函数，类成员变量和方法等，并可以跳转到对应代码行。如图12所示。

图12 代码结构树

2.1.7. 代码引用查找

提供Find Usages代码引用查找功能，帮助开发者快速查看某个对象(变量、函数或者类等)被引用的地方，用于后续的代码重构，可以极大的提升开发者的开发效率。

使用方法：在要查找的对象上，单击鼠标右键 > Find Usages或使用快捷键Alt +F7（macOS为Option + F7）。可点击图标查看变量赋值位置，点击图标查看变量引用情况。如图13所示。

图13 代码引用查找

2.1.8. 函数注释生成

DevEco Studio支持在函数定义处，快速生成对应的注释。在函数定义的代码块前，输入 “/”+回车键**，快速生成注释信息。如图14所示。

图14 函数注释生成

2.1.9. 代码查找

通过对符号、类或文件的即时导航来查找代码。检查调用或类型层次结构，轻松地搜索工程里的所有内容。通过连续点击两次Shift快捷键，打开代码查找界面，在搜索框中输入需要查找内容，下方窗口实时展示搜索结果。双击查找的结果可以快速打开所在文件的位置。如图15所示。

图15 代码查找

2.1.10. 快速查阅API接口及组件参考文档

在编辑器中调用ArkTS/JS API或组件时，支持在编辑器中快速、精准调取出对应的参考文档。

可在编辑器中，鼠标悬停在需要查阅的接口或组件，弹窗将显示当前接口/组件在不同API版本下的参数等信息，单击弹窗右下角Show in API Reference，或选中接口或组件，右键点击Show in API Reference，可以快速查阅更详细的API文档。如图16、图17所示。

图16 查阅API参考入口

图17 快速查阅API

2.1.11. Optimize Imports功能

使用编辑器提供的Optimize Imports，可以快速清除未使用的import，并根据设置的规则对import进行合并或排序。选择文件或目录，使用快捷键Ctrl+Alt+O（macOS为Control+Option+O），或单击菜单栏Code > Optimize Imports。

2.2. 代码生成/补全

2.2.1. 代码自动补全

提供代码的自动补全能力，编辑器工具会分析上下文，并根据输入的内容，提示可补全的类、方法、字段和关键字的名称等，支持模糊匹配。

自动补齐功能默认按最短路径进行排序，如仅需按照最近使用过的类、方法、字段和关键字等名称提供补全内容排序，可以在File > Settings（MacOS为DevEco Studio > Preferences） > Editor > General > Code Completion 中勾选“Sort suggestions by recently used”。

2.2.2. 快速覆写父类

DevEco Studio提供Override Methods，辅助开发者根据父类模板快速生成子类方法，提升开发效率。将光标放于子类定义位置，使用快捷键Ctrl+O，或右键单击Generate...，选择Override Methods，指定需要覆写的对象（方法、变量等），点击OK将自动生成该对象的覆写代码。

2.2.3. 快速生成构造器

编辑器支持为类快速生成一个对应的构造函数。

在类中使用快捷键Alt+Insert，或单击鼠标右键选择Generate...，在弹窗中选择Constructor，选择一个或多个需要生成构造函数的参数，点击OK。若选择Select None，则生成不带参数的构造器。

2.2.4. 快速生成get/set方法

编辑器支持为类成员变量或对象属性快速生成get和set方法。

将光标放置在当前类中，单击右键选择Generate...>Getter and Setter，或者使用快捷键Alt+Insert，在菜单中选择Getter and Setter，完成方法快速生成。

2.3. 代码实时检查及快速修复

2.3.1. 实时检查

编辑器会实时的进行代码分析，如果输入的语法不符合编码规范，或者出现语义语法错误，将在代码中突出显示错误或警告，将鼠标放置在错误代码处，会提示详细的错误信息。如图18所示。

从DevEco Studio 4.0 Release版本开始，当compatibleSdkVersion≥10时，编辑器代码实时检查支持ArkTS性能语法规范检查。

图18 实时检查

2.3.2. 代码快速修复

DevEco Studio支持代码快速修复能力，辅助开发者快速修复ArkTS代码问题。

查看告警信息： 使用双击Shift快捷键打开文件查询框，输入problems打开问题工具面板；双击对应告警信息，可以查看告警的具体位置及原因。

快速修复： 将光标放在错误告警的位置，可在弹出的悬浮窗中查看问题描述和对应修复方式；单击More actions可查看更多修复方法。或是在页面出现灯泡图标时，可点击图标并根据相应建议，实现代码快速修复。如图19所示。

图19 快速修复

2.4. 代码重构

2.4.1. Refactor-Extract代码提取

在编辑器中支持将函数内、类方法内等区域代码块或表达式，提取为新方法/函数（Method）、常量（Constant）、接口（Interface）、变量（Variable）或类型别名（Type Alias）。准确便捷的将所选区域代码从当前作用域内进行提取，提升编码效率。选中所需要提取的代码块，右键单击Refactor，选择需要提取的类型。

2.4.2. Refactor-Rename代码重命名

代码编辑支持Rename功能，可以快速更改变量、方法、对象属性等相关标识符及文件、模块的名称，并同步到整个工程中对其进行引用的位置。

使用方式：选中需要重新命名的标识符（变量、类、接口、自定义组件等），右键单击Refactor，选择Rename...（或使用快捷键Shift+F6），在弹框中输入新的标识符名称，并在Scope中选择替换的范围，点击Refactor完成重新命名。

代码编辑支持筛选并过滤不需要rename的引用位置。在Rename...弹窗中点击Preview，在弹出预览窗口中，用户选中无需Rename的选项，单击右键菜单Exclude/Remove进行过滤/删除，完成筛选后点击左下角Do Refactor，重新执行Rename操作。

2.4.3. Move File

在文件中单击右键，选择Refactor > Move File...，在弹窗中输入或点击...选择指定的目录，点击Refactor，可将当前文件移动至该目录下。勾选Search for references，可查找并更新工程中对该文件的引用；勾选Open in editor，可在编辑器中查看移动的文件。

2.4.4. Safe Delete

编辑器支持Safe Delete功能，帮助您安全地删除代码中的标识符对象（变量、函数或类等）或删除指定文件。在删除前，编辑器将先在代码中搜索对该对象的引用，如果存在引用，编辑器将提示您进行必要的检查和调整。

使用方式：在编辑器内选中需要删除的标识符对象或在工程目录选择待删除的文件，右键单击Refactor，选择Safe Delete，单击OK将自动检查当前对象在代码中被引用的情况，点击View Usages可查看具体使用的代码内容，点击Delete Anyway将直接删除该对象的定义。

2.5. 生成ArkTSDoc文档

在菜单栏选择Tools > Generate ArkTSDoc... 进入ArkTSDoc生成界面。如图20所示。
设置生成ArkTSDoc的范围，可选择整个工程、某个模块或目录、单个文件进行导出。在Output directory中指定导出ArkTSDoc的存储路径。

图20 生成ArkTSDoc文档入口

若勾选Open generated documentation in browser选项，在生成ArkTSDoc后，将自动打开相应页面查看生成的文档。配置完毕后点击Generate，开始扫描并生成ArkTSDoc文档。

生成的ArkTSDoc左侧文档目录和原工程目录结构一致，右侧可点击跳转到当前文件包含的某个变量、方法、接口或类的文档位置。如图21所示。

图21 生成文档

若没有勾选Open generated documentation in browser选项，在生成ArkTSDoc后，DevEco Studio右下角弹出对应提示框，可以点击Go to Folder跳转到生成的ArkTSDoc文件夹，用浏览器打开文件夹中index.html文件即可查看ArkTSDoc文档。

--未完待续--

本文配套视频教程观看地址：

01-工具介绍

02-工程管理

03-代码阅读

04-代码编辑-代码生成补全、代码检查、代码重构和生成ArkTSDoc文档

✋ 需要参加鸿蒙认证的请点击鸿蒙认证链接

HarmonyOS应用开发基础案例（一）：鸿蒙页面布局入门

掘金前端

Raink

2025年11月30日 09:44

本文以仿猫眼电影M站首页布局为案例，展示ArkUI在实际开发中的应用。内容包括案例效果及相关知识点，深入解析布局框架以及头部、脚部、内容区域的构建思路与代码实现，最后提供完整代码和教程资源，助力你强化实践能力。

1. 案例效果截图

如图1-1所示。

图1-1 案例效果截图

2. 案例运用到的知识点

核心知识点

UI范式基本语法。
文本显示Text、Span组件。
线性布局Column、Row组件。
层叠布局Stack组件。
按钮Button组件。
显示图片Image组件。

其他知识点

DevEco Studio的基本使用。
简单的资源分类访问。
移动端APP布局基本技巧。

3. 布局框架

可以按照图3-1来思考布局的框架：

图3-1 布局框架图

框架的代码如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Stack() {}
        .width('100%').height(50).backgroundColor('#e54847')
      
      Column() {
        Text('content')
      }.width('100%').layoutWeight(1)
      
      Row() {}
        .width('100%').height(50).backgroundColor('#fff')
        .border({width: { top: 1}, color: '#eee'})
    }
  }
}

4. 头部区域

可以按照图4-1思路来构建布局：

图4-1 布局示意图

代码如下：

// 头部区域
Stack({ alignContent: Alignment.End }) {
  Text('猫眼电影')
    .width('100%').height('100%').textAlign(TextAlign.Center)
    .fontColor('#fff').fontSize(18)
  Image($rawfile('menu.png'))
    .width(17).height(16).margin({ right: 10 })
}.width('100%').height(50).backgroundColor('#e54847')

5. 脚部区域

可以按照图5-1思路来构建布局：

图5-1 布局示意图

代码如下：

// 脚部区域
Row() {
  Column() {
    Image($rawfile('movie.svg'))
      .width(25).height(25).fillColor('#e54847')
    Text('电影/影院')
      .fontSize(10).fontColor('#e54847')
  }.layoutWeight(1).height('100%').justifyContent(FlexAlign.SpaceEvenly)

  Column() {
    Image($rawfile('video.png'))
      .width(25).height(25).fillColor('#696969')
    Text('视频')
      .fontSize(10).fontColor('#696969')
  }.layoutWeight(1).height('100%').justifyContent(FlexAlign.SpaceEvenly)

  Column() {
    Image($rawfile('perform.svg'))
      .width(25).height(25).fillColor('#696969')
    Text('演出')
      .fontSize(10).fontColor('#696969')
  }.layoutWeight(1).height('100%').justifyContent(FlexAlign.SpaceEvenly)

  Column() {
    Image($rawfile('mine.svg'))
      .width(25).height(25).fillColor('#696969')
    Text('我的')
      .fontSize(10).fontColor('#696969')
  }.layoutWeight(1).height('100%').justifyContent(FlexAlign.SpaceEvenly)
}
.width('100%').height(50).border({ width: { top: 1 }, color: '#eee' })
.backgroundColor('#fff')

6. 内容区域

可以参照图6-1思考内容区域的整体框架布局：

图6-1 布局示意图

代码如下：

// 内容区域
Column() {
  Row() {}
    .width('100%').height(44).border({width: {bottom: 1}, color: '#e6e6e6'})

  Scroll() {}
    .layoutWeight(1)
}.width('100%').layoutWeight(1)

6.1. 导航区

内容区域的导航区可以参照图6-2思考布局：

图6-2 布局示意图

代码如下：

// 导航区
Row() {
  Row() {
    Text('北京').fontColor('#666')
    Text('')
      .width(0).height(0)
      .border({
        width: 5,
        color: {
          top: '#b0b0b0',
          left: Color.Transparent,
          right: Color.Transparent,
          bottom: Color.Transparent
        }
      })
      .margin({top: 6, left: 4})
  }.offset({x: 15}).width(60)

  Row() {
    Stack() {
      Text('热映')
        .fontSize(17).fontWeight(FontWeight.Bold)
      Text('')
        .width(24).border({width: {bottom: 3}, color: '#e54847'}).offset({y: 18})
    }
    Text('影院')
    Text('待映')
    Text('经典电影')
  }.justifyContent(FlexAlign.SpaceEvenly).layoutWeight(1)

  Row() {
    Image($rawfile('search-red.png'))
      .width(20).height(20)
  }.justifyContent(FlexAlign.Center).width(50)
}.width('100%').height(44).border({width: {bottom: 1}, color: '#e6e6e6'})

6.2. 最受好评区

可以参照图6-3考虑整体布局：

图6-3 布局示意图

代码如下：

// 好评和列表区内容
Column() {
  // 好评区
  Column() {
    Text('最受好评电影')
      .width('100%').fontSize(14).fontColor('#333')
      .textAlign(TextAlign.Start).margin({ bottom: 12 })
    Scroll() {
      Row() {
        Column() {
          Stack({ alignContent: Alignment.BottomStart }) {
            Image('https://p0.pipi.cn/basicdata/' 
                  + '54ecdeddf2a92339dd2c95022e99e5fe27091.jpg?' 
                  + 'imageMogr2/thumbnail/2500x2500%3E'
            ).width(85).height(115)
            Text('')
              .width('100%').height(35).linearGradient({
                direction: GradientDirection.Bottom, 
                colors: [['rgba(0,0,0,0)', 0], [0x000000, 1]] 
              })
            Text('观众评分：9.6')
              .fontColor('#faaf00').fontSize(11)
              .fontWeight(700).offset({ x: 4, y: -4 })
          }.height(115).margin({ bottom: 6 })
          Text('出走的决心')
            .fontSize(13).fontWeight(FontWeight.Bold).width(85)
            .textAlign(TextAlign.Start).margin({ bottom: 3 })
        }.width(85).margin({ right: 10 })

        // ... 其余7个Column与上述结构相同，因篇幅限制已省略，详见本书配套源码。
      }
    }
    .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.Spring)
  }.width('100%').padding({ top: 12, bottom: 12, left: 15, right: 15 })
}.height('100%')

6.3. 列表区

列表区整体布局参照图6-4。

图6-4 布局示意图

代码如下：

// 列表区
Column() {
  Row() {
    Image('https://p0.pipi.cn/basicdata/' 
          + '54ecdedd5377e187a9e7aa5ee9ec15a184b18.jpg?' 
          + 'imageMogr2/thumbnail/2500x2500%3E?imageView2/1/w/128/h/180'
    ).width(64).height(90)
    
    Stack({ alignContent: Alignment.End }) {
      Column() {
        Row() {
          Text('志愿军：存亡之战').fontSize(17).fontWeight(FontWeight.Bold)
          Image($rawfile('v2dimax.png')).width(43).height(14).margin({ left: 4 })
        }
        Text() {
          Span('274337').fontColor('#faaf00')
          Span('人想看').fontColor('#666').fontSize(13)
        }
        Text('主演: 朱一龙,辛柏青,张子枫').fontColor('#666').fontSize(13)
        Text('2024-09-30 下周一上映').fontColor('#666').fontSize(13)
      }
        .alignItems(HorizontalAlign.Start).height('100%').width('100%')
        .justifyContent(FlexAlign.SpaceEvenly).padding({ right: 53 })
      
      Button() {
        Text('预售').fontColor('#fff').fontSize(13).fontWeight(500)
      }.width(54).height(28).backgroundColor('#3C9FE6')
      
    }
      .height('100%').layoutWeight(1).margin({ left: 12 })
      .padding({ top: 12, right: 14, bottom: 12, left: 0 })
      .border({ width: { bottom: 1 }, color: '#eee' })
  }.height(144)

  // ... 其余7个Row与上述结构相同，因篇幅限制已省略，详见本书配套源码。
}.backgroundColor('#fff').padding({ left: 15 })

--THE END--

本文配套视频教程观看地址：

11-猫眼电影M站布局实战-布局框架

12-猫眼电影M站布局实战-头部区域布局

13-猫眼电影M站布局实战-脚部区域布局

14-猫眼电影M站布局实战-内容导航区布局

15-猫眼电影M站布局实战-最受电影区布局

16-猫眼电影M站布局实战-列表布局

✋ 需要参加鸿蒙认证的请点击鸿蒙认证链接