[鸿蒙征文] 小支的 HarmonyOS 学习笔记：从零搞个小应用

开篇：今天学了啥？

今天跟着教程一步步搭了个 HarmonyOS 应用，从新建项目到用各种组件拼页面，感觉还挺有意思的。主要学了 DevEco Studio 咋用，还有 Text、Image 这些基础组件，以及 Swiper 轮播、Grid 网格、List 列表这些能滑动的组件，最后凑出了一个完整的页面～​​

​

第一步：先把环境搞定

1. 装工具：下了 DevEco Studio，按提示装完，还顺便开了中文插件（File→Settings→Plugins 搜 Chinese，启用了重启就有中文了，方便！）

2. 新建项目：选 Empty Ability 模板，项目名改成 QuickStart，Compatible SDK 选 5.0.0(12)，一路下一步就成了。

3. 改点小东西：

4. 应用名在string.json里改，把EntryAbility_label改成“HMOS 世界入门版”。

5. 图标用教程给的background.png和foreground.png，直接替换media文件夹里的原图就行。

认识组件：先搞个文本和图片

• Text 组件：就是显示文字的，能改字号、颜色、粗细。试了把默认的“Hello World”改成“快速入门”，调了 fontSize=24，还加了左内边距 16，让它靠左显示。

• Image 组件：加载图片用的，从01_Resources里拿了张banner_pic1.png，放到media文件夹，然后用$r('app.media.banner_pic1')引用。还设了圆角 16，看起来舒服点。

• 预览器：右边那个预览窗口挺方便，改完代码能实时看效果，不过改文本内容得 ctrl+s 保存才会更更新。​

  

​

​​

搞个轮播图：Swiper 组件真好用

想做个能自动轮播的 Banner 位，教程说用 Swiper 组件：

1. 先建了个 BannerClass，存图片地址和跳转链接，方便后面循环渲染。

2. 把图片都放进media文件夹，然后在 Swiper 里用 ForEach 循环遍历图片列表，这样不用一张张写 Image 组件了，省事儿！

3. 加了点属性：autoPlay(true)让它自动播，loop(true)循环播，还改了指示器的颜色，看起来像那么回事儿～

做两个 Item：网格和列表的小单元

页面里要放两类内容，一个是横向滑的“赋能套件”，一个是纵向滑的“入门教程”，得先做单个 Item 的样式。

网格 Item（EnablementItem）

• 上下结构：上面图片，下面标题+简介。

• 用 Column 当容器，设了宽 160、高 169，白色背景+圆角 16，看起来像个小卡片。

• 图片用 cover 模式填充，标题最多 1 行，简介最多 2 行，超长就用省略号（textOverflow: Ellipsis）。​​

  

  
  

• 

列表 Item（TutorialItem）

• 左右结构：左边标题+简介，右边图片。

• 用 Row 当容器，左边占大部分空间（layoutWeight:1），右边图片固定大小。

• 同样控制了文本行数和样式，和网格 Item 风格统一。​

  

拼页面：把组件组合起来

1. 外层用 Scroll：内容太多怕超出屏幕，包个 Scroll 组件就能上下滑了。

2. 放轮播图：先把做好的 Banner 组件放最上面。

3. 网格区域（EnablementView）：

4. 上面用 Text 写“赋能套件”标题。

5. 下面用 Grid 组件，设成 1 行（rowsTemplate: '1fr'），里面用 ForEach 循环渲染所有 EnablementItem，这样就能左右滑了。

6. 列表区域（TutorialView）：

7. 上面用 Text 写“入门教程”标题。

8. 下面用 List 组件，循环渲染 TutorialItem，每个 Item 包在 ListItem 里，上下间距 12，看起来很整齐。​

   

总结：今天学会的重点

• 组件这东西真方便，Text、Image、Swiper、Grid、List 一套组合拳，页面就出来了。

• ForEach 循环渲染太重要了，数据多的时候不用重复写代码，改数据就行。

• 预览器实时看效果，调样式的时候不用瞎猜了。

下次想试试给组件加点击事件，让轮播图和列表能跳转～ 感觉 HarmonyOS 开发还挺直观的，继续加油！