1.鸿蒙基础-基础环境-ArkTS-组件-样式.md · Geekwaner/Hm-Markdown

:::color1
DevEcoStudio编辑器下载链接-6月21日beta版本已发布，直接去官网下载即可

[https://developer.huawei.com/consumer/cn/download/](https://developer.huawei.com/consumer/cn/download/)

:::

:::color1
基础阶段仓库代码地址： [https://gitee.com/shuiruohanyu/fast_harmony](https://gitee.com/shuiruohanyu/fast_harmony)

:::

<h1 id="PwDDx">起步</h1>
<h2 id="HLdF4">起步-鸿蒙简介</h2>
+ <font style="color:rgb(33, 53, 71);">HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。</font>

| **时间** | **事件** |
| --- | --- |
| <font style="color:rgb(33, 53, 71);">2019</font> | <font style="color:rgb(33, 53, 71);">HarmonyOS 1.0，华为在东莞举行华为开发者大会，正式发布操作系统鸿蒙 OS，主要用于物联网</font> |
| <font style="color:rgb(33, 53, 71);">2020</font> | <font style="color:rgb(33, 53, 71);">HarmonyOS 2.0，基于开源项目 OpenHarmony 开发的面向多种全场景智能设备的商用版本</font> |
| <font style="color:rgb(33, 53, 71);">2021</font> | <font style="color:rgb(33, 53, 71);">HarmonyOS 3.0，先后优化游戏流畅度、地图三维体验、系统安全，另外系统的稳定性也得到了增强</font> |
| <font style="color:rgb(33, 53, 71);">2023.2</font> | <font style="color:rgb(33, 53, 71);">HarmonyOS 3.1，系统纯净能力进一步提升，对后台弹窗、 隐藏应用、后台跳转等情况</font> |
| <font style="color:rgb(33, 53, 71);">2023.7</font> | <font style="color:rgb(33, 53, 71);">华为 Mate 50 系列手机获推 HarmonyOS 4.0</font> |
| **<font style="color:rgb(33, 53, 71);">2024</font>** | **<font style="color:rgb(33, 53, 71);">HarmonyOS Next 开发者预览版发布，将不在兼容安卓应用</font>** |

:::color1
生态稳定吗？

回答： 极其的内卷_ 完全靠手搓！！！我相信华为！！！， 华为的速度超过我的想象！！！

:::

<h2 id="RXVgN"> 起步-DevEco Studio</h2>

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1701331257448-5d1b2922-5cfd-4883-b7db-ff404c51613c.png)

:::color1
华为官方编辑器地址： [https://developer.huawei.com/consumer/cn/download/](https://developer.huawei.com/consumer/cn/download/)

:::

1. 安装：DevEco Studio → 一路 Next(只演示windows)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705911127686-70448f0e-e824-4cbc-90ab-b11d04433cc1.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705911185016-7fdd9855-a724-44c9-a471-1bc0a1c999db.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705911191531-102c109f-f4dc-4c2a-a7ce-460ccc492931.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705911192716-5e0db8e0-0d5e-4fda-9356-7b3396af33be.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705911612069-6a790a57-d650-4ac8-af34-7598b3f8da31.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705911684201-2b91a736-edc0-41fc-87a0-651e071a3105.png)

2. 运行： 选择not import System Img

:::color1
这里最好别选在C盘

:::

+ 安装node依赖

![](./images/02.png)

+ <font style="color:rgb(33, 53, 71);">下一步</font>

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705912060628-b4ff731c-d576-49c8-81c5-f0dcc536cc2d.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705912097296-894d529f-bf31-45c8-b45d-3688ccc5409d.png)

+ 下载sdk

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705912115570-24aef3c7-fa22-4a83-924a-a762902f88f4.png)

+ 安装完成

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705912900167-26222c86-12fe-49aa-8761-3333555dd0cf.png)

+ 安装完成

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705913125864-5e065441-86d3-4cbf-951a-ee0e6088af9a.png)

+ 创建一个新项目

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705913583798-d7d5e230-93ba-41b0-86d1-ef1fcc730b62.png)

+ 填写信息

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705913690939-902dd69b-fc4f-46e7-83b1-665d488d7514.png)

等待创建完成

+ 安装中文插件(windows)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705914152330-b7fcc41f-33c8-455c-a1f4-0f8bc8a9f8e3.png)

+ Mac的选择

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705914191863-d0c14679-7efc-4c58-bd91-7b0f40aed318.png)

+ 选择Plugins

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705914392966-4f2a0151-1674-4dec-a7a3-9afca49d4048.png)

+ 点OK重启

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705914417347-fd6c76dc-44d5-45cc-84d6-62ede1eca62c.png)

+ 看到效果

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705914502635-c4669710-b7fd-423a-8d65-c404f5e76b55.png)

<h2 id="YG81K">1.3 起步-认识工作区</h2>
![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705915011436-c6c23b52-15b3-4d99-86ed-54baaa76a909.png)

+ ![](./images/06.png)

:::color1
+ 通过左侧目录找到对应的应用文件，在编辑区进行代码编写，在右侧看预览效果
+ 连按两下shift，可以快速寻找文件

:::

<h2 id="ZpwlI">起步-如何排错</h2>
![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705915135713-1004882c-d444-4b3d-95c0-52814fad8eab.png)

:::color1
写代码时，我们会经常遇到这种情况，右侧出现不能够开启预览器的提示，让我们打开预览器日志看错误

+ 解决该问题的思路 1. 按照编辑器提示的，打开预览器日志

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705915234534-af3d7f2c-0aa5-4ddf-9681-788787e609ab.png)

:::

+ 如果是明确的语法错误或者api错误，编辑器会指出我们代码的行数，我们可以点击提示的代码行，直接跳到对应位置，直接检查代码的问题

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705915313763-59c62889-7f88-4668-b5c4-d0d2bf7ede2e.png)

+ 跳到对应的位置

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705915330921-fd0d3cd9-3696-4245-a690-2c6ee5c1d6b1.png)

:::color1
解决思路2: 如果当前文件不多，可以点开你创建的所有文件，查看文件中是否有报错的地方，文件报错，在右侧以及代码区会有明显的报错提示

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705917571770-dde0b34b-2d95-48db-a60e-ddcdcc914927.png)

:::

:::color1
解决思路3： 通过统一构建，暴露哪些文件及代码无法编译通过

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705917628618-721f5c45-0e40-49c1-9b61-35ed284cf9f6.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705917668196-d92390f0-7173-4202-85c0-a10cbe205deb.png)

:::

<h2 id="t8f4N">如何刷新看效果</h2>
:::color2
预览器是有热更新的

+ 原则上写完右侧自动更新
+ 如果不自动刷新- 语法错了，编辑器卡住了

:::

+ ![](./images/08.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705917788519-ff476f9f-9676-4163-a831-42e533824662.png)

+ 直接点击刷新按钮

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705917817505-bdebd72e-a74b-4ea6-a911-f4a9f1efe146.png)

:::color1
+ 刷新只能针对 带有@Entry和@Preview的文件，否则无法看到效果

:::

<h2 id="1d7d0547">1.4 起步-审查和多设备预览</h2>
效果预览方法：

:::info
+ Preview(预览器)
+ 本地模拟器(**<font style="color:#DF2A3F;">只有Mac(ARM)芯片</font>**)
+ ~~远程模拟器~~
+ ~~云手机(需要审核及申请，暂无消息)~~
+ 本地真机(Meta60-Meta60Pro X5或者是**<font style="color:#DF2A3F;">装载OpenHarmony的工程机</font>**(价格较低，但是依然存在一些问题))

:::

:::danger
只有装了Next预览版系统的手机才可以进行真机调试和预览，目前Next预览器系统装机量有限，需要申请和审核，**小道消息Q2季度会进一步扩大开放名额**

:::

+ 预览器的多设备预览

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705920204885-418078e8-d508-45e2-834d-9268de401d0c.png)

:::danger
2in1的意思是 平板电脑二合一的状态

:::

![](https://cdn.nlark.com/yuque/0/2024/gif/8435673/1705921015360-a8bb4e03-cf47-45e9-add9-23e149e4fa57.gif)

+ 审查元素

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705921162343-549d7ed2-1964-4cb6-a7ee-71f0dada951f.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705921216499-d562018e-e2ad-4be0-81a2-2a64f9b129f8.png)

+ 真机预览调试

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705921494813-ef9c9737-26e1-4360-a705-e0e6656a9283.png)

:::info
+ 刷了Next预览版本的手机插上数据线，连接到电脑之后（注意：这里需要开启手机的usb调试，设置中搜索usb调试，打开，并且处理开发者模式，打开手机设置-关于手机，连续点击手机系统的版本号，直到出现您已处于开发者模式的提示未知）

:::

+ 运行

:::info
点击绿色三角- 运行到真机

:::

+ debugger模式

:::info
点击小虫子-断点调试到真机（4.0版本中真机不支持真机调试-next真机支持断点调试）

:::

![](./images/09.png)

<h2 id="EoooJ">1.5 起步-工程目录结构</h2>

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705921771265-a560330a-32fc-4698-9ced-9a3890e18782.png)

:::info
我们详解下目录结构

+ **<font style="color:rgb(36, 39, 40);">AppScope > app.json5</font>**<font style="color:rgb(36, 39, 40);">：应用的全局配置信息。</font>
+ **<font style="color:rgb(36, 39, 40);">entry：</font>**<font style="color:rgb(36, 39, 40);">应用/服务模块，编译构建生成一个HAP。</font>
    - **<font style="color:rgb(36, 39, 40);">src > main > ets</font>**<font style="color:rgb(36, 39, 40);">：用于存放ArkTS源码。</font>
    - **<font style="color:rgb(36, 39, 40);">src > main > ets > entryability</font>**<font style="color:rgb(36, 39, 40);">：应用/服务的入口。</font>
    - **<font style="color:rgb(36, 39, 40);">src > main > ets > pages</font>**<font style="color:rgb(36, 39, 40);">：应用/服务包含的页面。</font>
    - **<font style="color:rgb(36, 39, 40);">src > main > resources：</font>**<font style="color:rgb(36, 39, 40);">用于存放应用/服务模块所用到的资源文件，如图形、多媒体、字符串、布局文件等。</font>
    - **<font style="color:rgb(36, 39, 40);">src > main > module.json5</font>**<font style="color:rgb(36, 39, 40);">：Stage模型模块配置文件，主要包含HAP的配置信息、应用在具体设备上的配置信息以及应用的全局配置信息。</font>
+ **<font style="color:rgb(36, 39, 40);">entry > build-profile.json5：</font>**<font style="color:rgb(36, 39, 40);">当前的模块信息、编译信息配置项，包括buildOption、targets配置等。</font>
+ **<font style="color:rgb(36, 39, 40);">entry > hvigorfile.ts</font>**<font style="color:rgb(36, 39, 40);">：模块级编译构建任务脚本。</font>
+ **<font style="color:rgb(36, 39, 40);">entry >oh-package.json5</font>**<font style="color:rgb(36, 39, 40);">：配置三方包声明文件的入口及包名。</font>
+ **<font style="color:rgb(36, 39, 40);">oh_modules</font>**<font style="color:rgb(36, 39, 40);">：用于存放三方库依赖信息，包含应用/服务所依赖的第三方库文件。关于原npm工程适配ohpm操作，请参考</font>[历史工程适配OHPM包管理](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/project_overview-0000001053822398-V2#section167081936119)<font style="color:rgb(36, 39, 40);">。</font>
+ **<font style="color:rgb(36, 39, 40);">build-profile.json5：</font>**<font style="color:rgb(36, 39, 40);">应用级配置信息，包括签名、产品配置等。</font>
+ **<font style="color:rgb(36, 39, 40);">hvigorfile.ts：</font>**<font style="color:rgb(36, 39, 40);">应用级编译构建任务脚本。</font>

:::

+ 资源目录结构

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705921919574-0de57c45-ff37-43a6-8579-52134fe600b6.png)

<h1 id="PBoDM">什么是Stage模型</h1>
:::info
通过上层的目录结构我们要分析出如下关系

State

-Module(模块-对应Hap包)

-ability(应用服务入口)

-pages(页面)

-component(自定义组件)

-resources(资源)

:::

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1701335595471-b49168f3-bd95-4fb4-8805-e5ae35eebdf6.png)

<h1 id="UIUBJ">应用模型Stage&FA</h1>
:::color2
鸿蒙的战略 兼容安卓-把java + 前端拉入到开发阵容中-FA模型

:::

> [官方介绍](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V2/application-model-composition-0000001630265141-V2?catalogVersion=V2)
>

+ <font style="color:rgba(0, 0, 0, 0.9);">应用模型是</font>**<font style="color:#DF2A3F;">HarmonyOS</font>**<font style="color:rgba(0, 0, 0, 0.9);">为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。有了应用模型，开发者可以基于一套统一的模型进行应用开发，使应用开发更简单、高效。</font>

> <font style="color:rgba(0, 0, 0, 0.9);">换言之- 应用模型是鸿蒙开发一切的基础，因为只有基于该应用模型我们才可以开发对应的应用和业务。</font>
>

<font style="color:rgba(0, 0, 0, 0.9);">    应用模型包含几个要素</font>**<font style="color:#DF2A3F;">应用组件</font>****<font style="color:rgba(0, 0, 0, 0.9);">-</font>**<font style="color:rgba(0, 0, 0, 0.9);">应用进程-应用线程-应用任务管理-应用配置文件</font>

**提问**：应用模型是只有一个吗？

**回答**：鸿蒙前后推出了两种应用模型- ~~FA(~~~~<font style="color:rgb(36, 39, 40);">Feature Ability</font>~~~~)~~，Stage，**<font style="color:#DF2A3F;">目前FA已经不再主推</font>**。

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705382413570-a00598f9-644d-4353-a594-dd6e1c1f4725.png)

+ HarmonyOS Next也将Stage模型作为主推模型，所以我们本次训练营将学习Stage模型相关的应用开发能力。

下面是官方的**Stage模型概念图**

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705382360711-7aa161a0-57d9-4cf2-9fc6-d74994d5ebba.png)

总结：应用模型是开发鸿蒙应用的基础底座，但是鸿蒙先后推出了~~FA~~和Stage，鸿蒙4.0和鸿蒙Next都将Stage作为主推方向，所以我们**主要基于Stage模型来学习和开发我们目前的应用**。

<h1 id="liCDa">什么是UIAbility-(界面能力组件)</h1>
> 从上一个小节中，我们发现Stage模型提到了**UIAbility组件包含UI界面绘制，主要和用户交互。**
>

+ <font style="color:rgba(0, 0, 0, 0.9);">UIAbility组件是一种包含UI界面的应用组件，主要用于和用户交互。</font>

官网介绍-<font style="color:rgba(0, 0, 0, 0.9);">UIAbility是系统调度的基本单元，可以给应用提供绘制界面的窗口。</font>

:::info
<font style="color:rgba(0, 0, 0, 0.9);">UIAbility的设计理念：</font>

1. <font style="color:rgb(36, 39, 40);">原生支持应用组件级的跨端迁移和多端协同。</font>
2. <font style="color:rgb(36, 39, 40);">支持多设备和多窗口形态。</font>

:::

:::color1
<font style="color:rgba(0, 0, 0, 0.9);">UIAbility组件是系统调度的基本单元，为应用提供绘制界面的窗口。一个应用可以包含一个或多个UIAbility组件。例如，在支付应用中，可以将入口功能和收付款功能分别配置为独立的UIAbility。</font>

:::

:::color3
<font style="color:rgba(0, 0, 0, 0.9);">每一个UIAbility组件实例都会在最近任务列表中显示一个对应的任务。</font>

:::

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705924200059-f844130d-4ea7-4414-adf1-280b87264f94.png)

:::color5
<font style="color:rgba(0, 0, 0, 0.9);">对于开发者而言，可以根据具体场景选择单个还是多个UIAbility，划分建议如下：</font>

+ <font style="color:rgb(36, 39, 40);">如果开发者希望在任务视图中看到一个任务，则建议使用一个UIAbility，多个页面的方式。</font>
+ <font style="color:rgb(36, 39, 40);">如果开发者希望在任务视图中看到多个任务，或者需要同时开启多个窗口，则建议使用多个UIAbility开发不同的模块功能。</font>

+ 场景- 支付场景-携程/智行火车票 付款的时候- 调用了微信支付/支付宝支付

:::

<font style="color:rgba(0, 0, 0, 0.9);">为使应用能够正常使用UIAbility，需要在</font>[module.json5配置文件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/module-configuration-file-0000001820879553)<font style="color:rgba(0, 0, 0, 0.9);">的</font>[abilities标签](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/module-configuration-file-0000001820879553#ZH-CN_TOPIC_0000001820879553__abilities%E6%A0%87%E7%AD%BE)<font style="color:rgba(0, 0, 0, 0.9);">中声明UIAbility的名称、入口、标签等相关信息。</font>

```typescript
{
  "module": {
    ...
    "abilities": [
      {
        "name": "EntryAbility", // UIAbility组件的名称
        "srcEntry": "./ets/entryability/EntryAbility.ets", // UIAbility组件的代码路径
        "description": "$string:EntryAbility_desc", // UIAbility组件的描述信息
        "icon": "$media:icon", // UIAbility组件的图标
        "label": "$string:EntryAbility_label", // UIAbility组件的标签
        "startWindowIcon": "$media:icon", // UIAbility组件启动页面图标资源文件的索引
        "startWindowBackground": "$color:start_window_background", // UIAbility组件启动页面背景颜色资源文件的索引
        ...
      }
    ]
  }
}
```

:::warning
上述文件不用我们手动填写，我们新建ability的时候，会自动填入

:::

<h1 id="o5l0r">组件基础</h1>
<h2 id="d26d8f0c">  组件-什么是ArkTS</h2>
:::info
<font style="color:rgba(0, 0, 0, 0.9);">ArkTS提供了语言运行时相关能力</font>

<font style="color:rgba(0, 0, 0, 0.9);">ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在</font>[TypeScript](https://www.typescriptlang.org/)<font style="color:rgba(0, 0, 0, 0.9);">（简称TS）生态基础上做了进一步扩展，保持了TS的基本风格，同时通过规范定义强化开发期静态检查和分析，提升程序执行稳定性和性能。</font>

:::

特别注意：尤其是学过鸿蒙4.0的同学，Next版本极大增强了TS语言中动态类型的限制，几乎不再支持动态类型

:::color4
<font style="color:rgba(0, 0, 0, 0.9);">从API version 10开始，ArkTS进一步通过规范强化静态检查和分析，对比标准TS的差异可以参考</font>[从TypeScript到ArkTS的适配规则](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/typescript-to-arkts-migration-guide-0000001820879565)<font style="color:rgba(0, 0, 0, 0.9);">：</font>

+ <font style="color:rgb(36, 39, 40);">强制使用静态类型：静态类型是ArkTS最重要的特性之一。如果使用静态类型，那么程序中变量的类型就是确定的。同时，由于所有类型在程序实际运行前都是已知的，编译器可以验证代码的正确性，从而减少运行时的类型检查，有助于性能提升。</font>
+ <font style="color:rgb(36, 39, 40);">禁止在运行时改变对象布局：为实现最大性能，ArkTS要求在程序执行期间不能更改对象布局。</font>
+ <font style="color:rgb(36, 39, 40);">限制运算符语义：为获得更好的性能并鼓励开发者编写更清晰的代码，ArkTS限制了一些运算符的语义。比如，一元加法运算符只能作用于数字，不能用于其他类型的变量。</font>
+ <font style="color:rgb(36, 39, 40);">不支持Structural typing：对Structural typing的支持需要在语言、编译器和运行时进行大量的考虑和仔细的实现，当前ArkTS不支持该特性。根据实际场景的需求和反馈，我们后续会重新考虑。</font>

:::

+ 由于文档权限的限制，这里有一份openHarmony的 上的Next版本的ts类型的迁移说明 [地址](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/quick-start/typescript-to-arkts-migration-guide.md/) （内容基本一致）

:::color3
**openHarmony 和HarmonyOS的关系和区别**

OpenHarmony是指鸿蒙（HarmonyOS）的开源版本，由华为官方开源，遵循Apache 2.0许可证。OpenHarmony包含了HarmonyOS的核心代码库，但并不包括商业版HarmonyOS中的一些特有功能和技术。

HarmonyOS是华为自主研发的分布式操作系统，旨在打造一个全场景、全终端的智能生态系统。它支持多种设备类型，包括手机、平板、智能手表、智能音箱、电视、汽车、家居等，可以实现设备之间的协同工作和资源共享。

OpenHarmony和HarmonyOS的关系就像是Java和Android的关系一样。可以将OpenHarmony看作是HarmonyOS的底层技术和代码库的一部分，而HarmonyOS则是在此基础上进行了更多的开发和扩展，添加了更多的功能和应用。相比之下，OpenHarmony更加开放和自由，可以被开发者用于构建各种类型的设备和应用，而HarmonyOS则更加注重整合、统一和优化整个生态系统。

:::

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1701335913086-270d522d-00c8-442f-9bf8-025aa6f81b23.png)

:::danger
**<font style="color:#DF2A3F;">ArkTS不是前端，不是TypeScript, 不是Java，不是安卓，不是Flutter, 不是IOS，它是一个缝合怪，不要试图用任何一种语言去套它                                                                                    -老高</font>**

:::

+ ArkTS的特性-扩展能力

:::success
1. **基本语法 **
    - **定义声明式UI、自定义组件、动态扩展UI元素；**
    - **提供ArkUI系统组件，提供组件事件、方法、属性；**
    - **共同构成 UI 开发主体**
2. **状态管理 **
    - **组件状态、组件数据共享、应用数据共享、设备共享；**
3. **渲染控制 **
    - **条件渲染、循环渲染、数据懒加载；**

:::

:::color1
<font style="color:rgba(0, 0, 0, 0.9);">ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。</font>

+ 命令式UI- document.createElement("div")- <div>
+ 声明式UI

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705925536723-d0e550e7-4da5-490d-914f-bd7f2187d526.png)

:::

**下图是关于ArtTS的一个整体的应用架构（官网）**

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702006397704-6fedfa66-0b4e-4352-bffd-a41549614aa8.png)

:::info
总结：

+ AktTS提供原有前端范畴内的一切TypeScript和JavaScript的类型及方法支持
+ Next版本加了很多限制-要看迁移指南
+ ArkTS采用声明式UI的方法来绘制页面，设置属性，绑定事件

:::

<h2 id="KFOju">ArkTS重点迁移说明</h2>
+ 对象字面量不能用于类型声明

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705926929675-0480996b-d550-4bdd-804e-ba5d8e1f1fa0.png)

+ 不支持in操作符

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705928506272-d172bd83-3595-47a2-9c95-49ff676c6388.png)

+ 不支持解构赋值

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705928558648-99b84121-d9c7-4fbe-a15f-2890b4c1ce21.png)

+ 不支持通过索引访问字段

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705928737084-574589d2-9813-4b48-9e1e-fb3fc942fb3b.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705928767069-af735d09-7a02-4420-9420-419e3fe0bc12.png)

:::success
有一种情况下，可以通过索引访问字段，即传入的参数类型为object, 但是传入时必须用class的类型传入，如下

:::

```typescript
@Entry
@Component
struct Index {
  @State message: string = 'Hello World1';
  test (obj: object) {
   console.log(Object.keys(obj).map(item => `${item}=${obj[item]}`).toString())
  }
  aboutToAppear(): void {
    let o = new TestObj()
    this.test(o)
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
class TestObj {
  a: number = 0
  b: string = "123"
}
```

:::success
以上场景一般用作请求封装时，无法确定侦测传入参数的类型时使用

:::

+ 部分支持延展运算符

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705928917423-d0934756-61ed-4797-aa52-e8e9eab84eb3.png)

+ 不支持bind/call/apply改变this指向

:::color2
this始终指向调用者。谁调用这个方法，this指向谁

:::

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705928972382-543b8595-d1df-469c-ab53-2b914764e8b5.png)

<h2 id="f9a314bc"> 基础-组件结构</h2>
:::info
接下来，我们来解析我们的UI的结构

:::

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1701336038212-a55ac694-1295-4c10-be78-b771c4d1f729.png)

:::success
ArkTS通过装饰器 `@Component` 和 `@Entry` 装饰 `struct` 关键字声明的数据结构，构成一个自定义组件。  
自定义组件中提供了一个 `build` 函数，开发者需在该函数内以链式调用的方式进行基本的 UI 描述，UI 描述的方法请参考 UI 描述规范。

:::

+ **struct-****<font style="color:rgb(36, 39, 40);">自定义组件基于struct实现</font>**

> <font style="color:rgb(36, 39, 40);">要想实现一段UI的描述，必须使用struct关键字来声明- </font>**<font style="color:#DF2A3F;">注意不能有继承关系-组件名不能系统组件名重名</font>**
>

语法： struct 组件名 {}

```typescript
@Component
struct Index {
  
}
@CustomDialog 
struct Index2 {
  
}
```

:::info
struct关键字声明的UI描述-必须被@Component或者@CustomDialog修饰

:::

+ **Component修饰符**

> Component装饰器只能修饰struct关键字声明的结构，被修饰后的struct具备组件的描述(渲染)能力
>

+ **build函数**

> 用于定义组件的UI描述，一个struct结构必须实现build函数
>

```typescript
@Component
struct MyComponent {
  build() {
  }
}
```

:::info
build函数是组件(Component)必须提供以及实现的一个函数，build函数可以没有内容，如果有的话，必须有且只有一个[容器组件](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-container-badge-0000001478181417-V3)(可以放置子组件的组件)- 只有entry里面有限制- component里面没有限制

Component的组件build函数 可以放没有子组件的组件

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702005792704-75a690a0-1b98-4885-a1f7-3a362b067276.png)

+ 常见容器组件- Flex-Column-Row-List-Grid-Panel

:::

+ entry修饰符

> entry将自定义组件定义为UI页面的入口，也就是我们原来前端常说的一个页面，最多可以使用entry装饰一个自定义组件(在一个ets文件中)-如下面的代码就是不被允许的
>

```typescript
@Entry
@Component
struct Index {

build() {
  
  }
}
@Entry
@Component
struct Index2 {
  build() {

}
}
```

:::info
entry修饰的组件，最终会被注册，具体文件位置-main/resources/base/profile/main_pages.json

1. 自动注册-新建组件时，采用新建Page的方式
2. 手动注册-新建一个ets文件，自己在main_pages.json中手动添加路径

注意：

**<font style="color:#DF2A3F;">如果你手动删除了某一个带entry的组件，你需要手动去main_page中去删除该路径，否则编译会报错</font>**

:::

+ 组件复用

> 在很多情况下，由于业务的复杂度，我们经常会将一个大的业务拆成若干个组件，进行组装，这里我们非常灵活的复用组件，比如
>

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702010784651-dcb27591-0564-4ae9-b574-14ff29865983.png)

:::info
+ 我们可以把上图抽象成三个组件- Header- Main- Footer

:::

代码

```typescript
import { MeiTuanFooter } from '../views/MeiTuan/MeiTuanFooter';
import { MeiTuanHeader } from '../views/MeiTuan/MeiTuanHeader';
import { MeiTuanMain } from '../views/MeiTuan/MeiTuanMain';

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

build() {
    Column() {
      MeiTuanHeader()  // 60
      MeiTuanMain()
        .layoutWeight(1)
        .backgroundColor(Color.Green)
      MeiTuanFooter()  // 60
    }.height('100%')
  }
}

@Preview
@Component
struct MeiTuanHeader {
  build() {
    Row () {
      Text("美团头部")
        .width('100%')
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height(60)
    .backgroundColor(Color.Pink)
  }
}
export { MeiTuanHeader }
@Component
struct MeiTuanMain {
  build() {
    Row() {
      Text("美团中部")
        .fontColor(Color.Red)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
  }
}

export { MeiTuanMain }

@Component
struct MeiTuanFooter {
  build() {
    Row () {
      Text("美团底部")
        .fontColor(Color.White)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height(60)
    .backgroundColor(Color.Blue)
  }
}
export  { MeiTuanFooter  }
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706950887854-a94d835f-bd33-4259-8456-b6639c58df4b.png)

:::info
总结：

+ 一个UI描述必须使用struct来声明，不能继承
+ struct必须被Component或者CustomDialog修饰
+ struct必须实现build方法，build方法可以没有元素，但是有的话有且只有一个可容纳子组件的容器组件(entry修饰的组件)
+ entry修饰符表示该组件是页面级组件，一个文件中只允许修饰一个struct组件
+ 采用分拆组件的形式可以有效解解耦我们的业务

:::

<h2 id="d6286a22"> 基础-系统组件(ArkUI)</h2>
+ 原生组件- API12-Next- API9- 4.0

:::success
<font style="color:rgba(0, 0, 0, 0.9);">ArkUI: Ability Kit在UIAbility组件可以使用ArkUI提供的组件、事件、动效、状态管理等能力。</font>

:::

:::warning
这里所指的Kit其实是Next版本中，鸿蒙将各个能力集进行了统一的分类，其实和原先4.0中的能力是一模一样的，只不过Kit包装了各个能力集的出口 （**<font style="color:#DF2A3F;">多说一句，有点多此一举</font>**）

:::

:::success
ArkUI将组件大概分为这么几类

+ 基础组件
+ 容器组件
+ 媒体组件(只有一个Video 和 4.0一样)
+ 绘制组件
+ 画布组件
+ **<font style="color:#DF2A3F;">高级组件  额外新增</font>**
+ **<font style="color:#DF2A3F;">安全组件  额外新增</font>**

:::

:::color2
大家关心的地图功能在Next版本中以API形式呈现

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705981309831-f975a805-ab42-474f-8542-ceedec9a5a93.png)

:::

基本组件使用

:::success
+ Text 文本组件-（Span子组件 ImageSpan组件）
+ Column 列组件，纵向排列，Flex布局主轴是Y （任意子组件）
+ Row 行组件，横向排列，Flex布局主轴是X （任意子组件）
+ Flex 以弹性方式布局子组件的容器组件。(**<font style="color:#DF2A3F;">存在二次布局，官方推荐有性能要求，使用Column和Row代替</font>**) （任意子组件）
+ Button 按钮组件 （单子组件）
+ TextInput 输入框组件 （无子组件）
+ Image （无子组件）
+ Button (单个子组件)
+ List (仅支持ListItem子组件)
+ Scroll (仅支持单个子组件)
+ Stack(<font style="color:rgba(0, 0, 0, 0.9);">堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件</font>)
+ Grid(<font style="color:rgba(0, 0, 0, 0.9);">网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。仅支持GridItem组件</font>)
+ GridRow(<font style="color:rgba(0, 0, 0, 0.9);">栅格容器组件，仅可以和栅格子组件(</font>[GridCol](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridcol-0000001774280954)<font style="color:rgba(0, 0, 0, 0.9);">)在栅格布局场景中使用。</font>)
+ GirdCol(<font style="color:rgba(0, 0, 0, 0.9);">栅格子组件，必须作为栅格容器组件(</font>[GridRow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-gridrow-0000001774121282)<font style="color:rgba(0, 0, 0, 0.9);">)的子组件使用。</font>)
+ RelativeContainer(相对布局容器- 当有性能需求优化的时候，可以考虑)

:::

组件使用

:::info
+ 使用组件采用 **<font style="color:#DF2A3F;">组件名() </font>**的语法
+ 有构造参数采用 **<font style="color:#DF2A3F;">组件名(参数)</font>**的语法
+ 组件里放置子组件采用  **<font style="color:#DF2A3F;">组件名() { 子组件的语法  } </font>**的链式语法
+ 组件设置属性采用 **<font style="color:#DF2A3F;">组件名().width().height() </font>**的语法
+ 组件又有属性又有子组件采用 **<font style="color:#DF2A3F;">组件名(){ ... 子组件  }.width().height() </font>**的语法

:::

<h2 id="tw4mE">基础布局</h2>
:::success
横向布局-采用Row

**<font style="color:#DF2A3F;">百分比说明： 鸿蒙的里面的百分比指的是相对当前父容器，并不是当前的手机屏幕</font>**

**<font style="color:#DF2A3F;">在写宽度高度时，直接写数字默认单位为vp虚拟像素，屏幕会进行适配。</font>**

:::

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705982460928-7b25d838-443e-4669-83eb-96b45d810223.png)

:::success
Row组件默认情况下，子组件内容会垂直方向居中-**<font style="color:#DF2A3F;"> 内容超出不会换行</font>**

:::

```typescript
@Entry
@Component
struct RowLayout {
  build() {
    Row({ space: 20 }) {
      Row()
        .width(100)
        .height(200)
        .backgroundColor(Color.Blue)
      Row()
        .width(100)
        .height(200)
        .backgroundColor(Color.Brown)
      Row()
        .width(100)
        .height(200)
        .backgroundColor(Color.Grey)
    }
    .justifyContent(FlexAlign.Center) // 主轴
    // .justifyContent(FlexAlign.Start)
    // .justifyContent(FlexAlign.End)
    // .justifyContent(FlexAlign.SpaceBetween)
    // .justifyContent(FlexAlign.SpaceAround)
    // .justifyContent(FlexAlign.SpaceEvenly)
    .alignItems(VerticalAlign.Center) // 副轴
    .width(360)
    .height("100%")
    .backgroundColor(Color.Pink)
  }
}
```

:::success
纵向布局

:::

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705982840098-84948341-e872-4806-bc60-95e5240ec41f.png)

```typescript
@Entry
@Component
struct ColumnLayout {
  build() {
    Column({ space: 10 }) {
      Row()
        .width(200)
        .height(100)
        .backgroundColor(Color.Blue)
      Row()
        .width(200)
        .height(100)
        .backgroundColor(Color.Brown)
      Row()
        .width(200)
        .height(100)
        .backgroundColor(Color.Grey)
    }
    .justifyContent(FlexAlign.Center) // 主轴
    .alignItems(HorizontalAlign.Center)
    //
    // .justifyContent(FlexAlign.Start)
    // .justifyContent(FlexAlign.End)
    // .justifyContent(FlexAlign.SpaceBetween)
    // .justifyContent(FlexAlign.SpaceAround)
    // .justifyContent(FlexAlign.SpaceEvenly)

// .alignItems(VerticalAlign.Center) // 副轴
    .width(360)
    .height("100%")
    .backgroundColor(Color.Pink)
  }
}
```

:::success
自定义组件应用

:::

```typescript
@Entry
@Component
struct Layout {

build() {
    Column() {
      RowCase()
      ColumnCase()
    }.height('100%').backgroundColor(Color.Grey)
  }
}

@Component
struct RowCase {
  build() {
    Row() {
      Column().height(150).width(100).backgroundColor(Color.Pink)
      Column().height(150).width(100).backgroundColor(Color.Red)
      Column().height(150).width(100).backgroundColor(Color.Blue)
    }
    .width('100%')
    .alignItems(VerticalAlign.Top)
    .justifyContent(FlexAlign.SpaceAround)
  }
}

@Component
struct ColumnCase {
  build() {
    Column() {
      Column().height(100).width(150).backgroundColor(Color.Pink)
      Column().height(100).width(150).backgroundColor(Color.Red)
      Column().height(100).width(150).backgroundColor(Color.Blue)
    }.height(400).width('100%').justifyContent(FlexAlign.SpaceEvenly)
  }
}
```

Flex横纵向

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702013662431-f95b3f74-1d1b-4bdd-97f6-eb2c1160a2d9.png)

```typescript
@Entry
@Component
struct ComponentCase {
  @State message: string = 'Hello World'
  build() {
    Scroll() {
      Row() {
        Column() {
          Text("老高你讲的真烂")
          Text(){
            Span("¥")
              .fontSize(12)
            Span("50.45")
              .fontSize(20)
          }
          // css 支持调整布局
          Row({ space:15 }) {
            Column()
              .width(100)
              .height(200)
              .backgroundColor(Color.Pink)
            Column()
              .width(100)
              .height(200)
              .backgroundColor(Color.Red)
            Column()
              .width(100)
              .height(200)
              .backgroundColor(Color.Blue)
          }
          .width('100%')
          // .justifyContent(FlexAlign.Start)
          .justifyContent(FlexAlign.Center)
          // .justifyContent(FlexAlign.End)
          // .justifyContent(FlexAlign.SpaceBetween)
          // .justifyContent(FlexAlign.SpaceAround)
          // .justifyContent(FlexAlign.SpaceEvenly)

Column({ space: 20 }) {
            Column()
              .width(200)
              .height(100)
              .backgroundColor(Color.Pink)
            Column()
              .width(200)
              .height(100)
              .backgroundColor(Color.Red)
            Column()
              .width(200)
              .height(100)
              .backgroundColor(Color.Blue)
          }.margin({
            top: 20
          })

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
            Column()
              .width(100)
              .height(200)
              .backgroundColor(Color.Pink)
            Column()
              .width(100)
              .height(200)
              .backgroundColor(Color.Red)
            Column()
              .width(100)
              .height(200)
              .backgroundColor(Color.Blue)
          }
          .margin({
            top: 200
          })

}
        .width('100%')
      }
    }

}
}
```

+ 百度的小案例

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706954242011-f51f439f-0014-46bb-92e8-e0b90ec63b33.png)

:::color1
图片如果要用线上图片，需要开通网络权限

entry/src/main/module.json5

预览期不配置是可以的，模拟器不行，模拟器必须得开

:::

```json
"requestPermissions": [{
  "name": "ohos.permission.INTERNET"  // 开通网络权限
}],
```

�

```typescript
@Entry
@Component
struct BaiduPage {
  build() {
    Column({ space: 20 }) {
      Image("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png")
        .width(160)
        .height(80)

Row() {
        TextInput()
          .height(40)
          .borderRadius({
            topLeft: 10,
            bottomLeft: 10
          })
          .border({
            color: "#bcbcbc",
            width: {
              left: 2,
              top: 2,
              bottom: 2
            }
          })
          .backgroundColor(Color.White)
          .layoutWeight(1)

Button("百度一下")
          .type(ButtonType.Normal)
          .backgroundColor("#445fe6")
          .borderRadius({
            topRight: 10,
            bottomRight: 10
          })
      }
      .height(60)
      .width("100%")

// .backgroundColor(Color.Blue)
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center) // 主轴剧中
    .alignItems(HorizontalAlign.Center)
    .padding({
      left: 10,
      right: 10
    })
  }
}
```

:::warning
Row 和Column的布局方式成为线性布局- 不是横向排列就是纵向排列

+ 线性布局中永远不会产生换行
+ Flex布局-使用Flex组件-容器- 支持横向和纵向-弹性布局-支持换行
+ 均不支持出现滚动条

:::

+ github 公有云
+ gitee 速度最快 公有云
+ gitlab 企业优先-私有云部署

:::warning
Flex布局设置属性设置方向 是通过参数的，并非通过属性

+ 属性？

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1708602440501-7b001a6f-c7f3-4360-92b0-da8246bd4f45.png)

+ 参数？

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1708602457499-da109a4a-b6da-4c2f-96c7-2a92c5f4ffc5.png)

:::

:::info
在arkUI中，我们的内容如果超过了屏幕显示，则不会显示滚动条，需要使用Scroll来包裹

需要注意的是： **<font style="color:#DF2A3F;">该组件滚动的前提是主轴方向大小小于内容大小。子组件不要设置高度，否则不能滚动</font>**

:::

:::success
Grid布局

+ 想要控制屏幕的分栏 分几列， 怎么分 特别像前端的栅格布局
+ Row组件默认情况下，里面的元素的纵向是居中的
+ Column组件默认横向是居中的

:::

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705989420006-4f8512da-602a-4306-80ae-1fff3619d3d4.png)

:::info
Grid组件下只能放置GridItem组件

:::

:::success
Grid可以设置columnsTemplate和rowsTemplate

columnsTemplate是设置横向的分配，如果设置 1fr 1fr 表示，等分为两份， 如果设置1fr 2fr表示左边一份，右边两份， 在设置columnsTemplate不设置rowsTemplate的情况下，如果内容超出容器区域，会自动出现滚动条 columnsGap设置列和列之间的间距，rowsGap设置行和行之间的间距

:::

```typescript
@Entry
@Component
struct GridCase {
  build() {
    Grid() {
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
    }
    .width("100%")
    .height("100%")
    .columnsTemplate("1fr 1fr")
    .columnsGap(10)
    .rowsGap(10)
    .padding(10)

}
}

@Component
struct GridItemCase {
  build() {
    GridItem() {
      Row() {
        Column() {
          Text("内容")
        }
        .width('100%')
      }
      .height(200)
      .borderRadius(4)
      .backgroundColor(Color.Pink)
    }

}
}
```

<h2 id="sfxLb">图片的说明</h2>
:::color1
Image属性，赋值src就行

+ 本地图片
+ 资源图片
+ 原生路径图片
+ 线上图片
+ pixelMap
+ base64

:::

+ 本地图片

```arkts
@Entry
@Component
struct ImageCase {
  @State message: string = 'Hello World';

build() {
    Column() {
      // 很少用的一种方式
      Image("/pages/02/assets/test.jpeg")
        .width(200)
        .aspectRatio(1)
    }
    .height('100%')
    .width('100%')
  }
}
```

+ 资源图片- 	entry/src/main/resources/base/media

```arkts
  Image($r("app.media.test"))
        .width(200)
        .aspectRatio(1)
```

+ 资源图片-原生路径-entry/src/main/resources/rawfile

```arkts
 // 资源图片
      Image($rawfile("test.jpeg"))
        .width(200)
        .aspectRatio(1)
```

+ 线上路径-需要开通网络权限

```arkts

```

<h2 id="wWRU8">滚动条说明</h2>
:::success
在基本的布局组件 Column/Row/Flex/Stack中不论内容超出与否，皆不会出现滚动条

+ 出现滚动条的组件
+ List(列表)
+ Grid
+ Scroll(滚动条)
+ Swiper(轮播)
+ WaterFlow(瀑布流)

**<font style="color:#DF2A3F;">出现滚动条的前提条件是</font>**- 上述组件中的子组件的内容超出了父容器组件的宽度或者高度

:::

+ 使用最基本的Scroll组件出现一个滚动条

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1708604667999-ea45510e-636d-45a6-b615-1f94387255a6.png)

+ 先实现基本的布局

```typescript
@Entry
@Component
struct ScrollCase {
  @State message: string = 'Hello World';
  @State middleHeight: number = 0
  build() {
    Column() {
      Row()
        .width('100%')
        .height(50)
        .backgroundColor(Color.Red)

Column() {

}
      .width('100%')
      .height(this.middleHeight)
      .backgroundColor(Color.Orange)

Row()
        .width('100%')
        .height(50)
        .backgroundColor(Color.Blue)
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
    .height('100%')
    .onAreaChange((old: Area, newArea: Area) => {
     this.middleHeight = (newArea.height as number) - 100
    })
  }
}
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1708605449767-4b72469b-cbda-4ba3-9eea-dd088f1a1d0c.png)

+ 实现区域滚动

```typescript
@Entry
@Component
struct ScrollLayout {
  @State message: string = 'Hello World';

build() {
    Column() {
      // 自定义组件 上
      ScrollTop()
      // 自定义组件
      ScrollMain()
      // 自定义组件 下
      ScrollBottom()
    }
    .width("100%")
    .height("100%")
    .backgroundColor(Color.Brown)
  }
}

@Component
struct ScrollTop {
  build() {
    Row() {
      Text("顶部结构")
        .fontColor(Color.White)
        .width("100%")
        .textAlign(TextAlign.Center)
    }
    // .justifyContent(FlexAlign.Center)
    .width("100%")
    .height(60)
    .backgroundColor(Color.Blue)
  }
}

// function test () {}   const test = () => {}

@Component
struct ScrollMain {
  scroller: Scroller = new Scroller() // 控制器

build() {
    Scroll(this.scroller) {
      // Scroll 只能有一个子组件  子组件尽量让他自己撑开
      Column({ space: 20 }) {
        Button("去底部")
          .onClick(() => {
            this.scroller.scrollEdge(Edge.Bottom)

})
        Row().width("100%").backgroundColor(Color.Grey).height(40)

Row().width("100%").backgroundColor(Color.Grey).height(40)

Button("去顶部").onClick(() => {
          this.scroller.scrollEdge(Edge.Top)

})
      }
    }
    .width("100%")
    .layoutWeight(1)
    .backgroundColor(Color.Pink)
  }
}

@Component
struct ScrollBottom {
  build() {
    Row() {
      Text("底部结构")
        .fontColor(Color.White)
        .width("100%")
        .textAlign(TextAlign.Center)
    }
    // .justifyContent(FlexAlign.Center)
    .width("100%")
    .height(60)
    .backgroundColor(Color.Green)
  }
}
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1722589633490-1fe34f76-d2e4-4d5f-a6b8-8e146de02178.png)

+ 如何控制滚动

:::info
Scroll的滚动一般由用户的手指触发

+ 我们也可以使用一个对象来控制滚动条 scroller

:::

```typescript
@Entry
@Component
struct ScrollLayout {
  @State message: string = 'Hello World';

// function test () {}   const test = () => {}

@Component
struct ScrollMain {
  scroller: Scroller = new Scroller() // 控制器

})
        Row().width("100%").backgroundColor(Color.Grey).height(40)

Row().width("100%").backgroundColor(Color.Grey).height(40)

Button("去顶部").onClick(() => {
          this.scroller.scrollEdge(Edge.Top)

})
      }
    }
    .width("100%")
    .layoutWeight(1)
    .backgroundColor(Color.Pink)
  }
}

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1722589653800-ca5b21e3-82d1-474e-960e-d993be0fce89.png)

+ 横向滚动

:::info
+ 只需要将Scroll的滚动方向调节成横向即可

:::

```typescript
@Entry
@Component
struct ScrollCase02 {
  @State message: string = 'Hello World';
  scroller: Scroller = new Scroller()
  build() {
    Row() {
      Column() {
        // 有且只有一个组件
        Scroll(this.scroller) {
          Row({ space: 20 }) {
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
          }
        }.
        height(200)
        .scrollable(ScrollDirection.Horizontal)
        .width('100%')
        .backgroundColor(Color.Orange)
        Row() {
          Button("滚到左侧")
            .onClick(() => {
              this.scroller.scrollEdge(Edge.Start)
            })
          Button("滚到右侧")
            .onClick(() => {
              this.scroller.scrollEdge(Edge.End)

})
        }
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
  }
}

@Component
struct Actor {
  build() {
    Row() {
      Text("热辣滚烫-贾玲")
        .fontColor(Color.White)
    }
    .backgroundColor(Color.Red)
    .justifyContent(FlexAlign.Center)
    .width(100)
    .height(180)
  }
}
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1708607945333-a8b0d97f-257d-40ba-ad5f-4c334523406f.png)

<h2 id="diwFz">组件-双向绑定</h2>
+ 双向绑定

:::info
数据-视图

+ 数据驱动视图 
+ 视图中的内容发生变化-数据也会同步修改
+ MVVM-M-V-VM
+ Model数据模型
+ V-View视图
+ VM- ViewModel 桥梁

:::

:::color1
华为在4.0只有一个组件支持双向绑定 Refresh

华为在Next有大量的双向绑定组件

:::

:::success
在鸿蒙Next版本中，推出了一系列双向绑定的组件

+ 双向绑定- 数据和视图双向同步-数据变化-视图更新，视图更新，-数据更新

:::

+ 鸿蒙Next版本所支持的所有双向绑定组件

:::color2
![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705990845801-a8c5b040-0c56-4d13-920f-664c73cc80ea.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705990867043-ff8fd5ec-9f4b-42bc-bf81-a2bddf6965a1.png)

:::

+ 双向绑定语法

:::color1
<font style="color:rgba(0, 0, 0, 0.9);">$$语法：内置组件双向同步</font>

+ <font style="color:rgb(36, 39, 40);">当前$$支持基础类型变量，以及@State、@Link和@Prop装饰的变量。</font>

如果绑定TextInput组件，如 TextInput({ text: $$this.xxx })

:::

:::color1
@State 响应式修饰器

组件-Component- build函数- State修饰的变量发生了变化，build函数会重新执行

:::

:::danger
值得注意的是：上述组件中有的双向组件是属性，有的双向绑定是参数

+ 参数是在**<font style="color:#DF2A3F;">组件({ text: $$this.xx })</font>**
+ 属性是在**<font style="color:#DF2A3F;">组件().text($$this.xxx)</font>**
+ **<font style="color:#DF2A3F;">不支持嵌套数据的双向绑定如 组件({ text: $$this.xx.xx })</font>**

:::

:::color1
**<font style="color:#DF2A3F;">预览版DatePicker/TimerPicker组件有bug，无法正常显示</font>**

:::

+ 测试几个正常的双向绑定

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1708757773654-0b77db50-537b-4bd7-b273-9a7c62bc4a25.png)

```typescript
@Entry
@Component
struct MvvmCase {
  @State
  isMarry: boolean = false
  @State
  searchText: string = ""
  build() {
    Grid() {
      GridItem() {
        Column() {
          Text("Checkbox的双向绑定")
          Checkbox()
            .select($$this.isMarry)
          Text(this.isMarry + "")
          Button("改值")
            .onClick(() => {
                this.isMarry = !this.isMarry
            })
        }
      }
      .height(200)
      .backgroundColor(Color.Pink)
      GridItem() {
        Column() {
          Text("Search的双向绑定")
          Search({ value: $$this.searchText  })
          Text(this.searchText + "")
          Button("改值")
            .onClick(() => {
              this.searchText = "老高 你长得很奇怪"
            })
        }
      }
      .height(200)
      .backgroundColor(Color.Pink)

GridItem() {
        Column() {
          Text("TextInput的双向绑定")
          TextInput({ text: $$this.searchText })
          Text(this.searchText + "")
          Button("改值")
            .onClick(() => {
              this.searchText = "老高 你长得很奇怪"
            })
        }
      }
      .height(200)
      .backgroundColor(Color.Pink)

GridItem() {
        Column() {
          Text("TextArea的双向绑定")

TextArea({ text: $$this.searchText })
            .maxLength(5)
          Text(this.searchText + "")
          Button("改值")
            .onClick(() => {
              this.searchText = "老高 你长得很奇怪"
            })
        }
      }
      .height(200)
      .backgroundColor(Color.Pink)

GridItem() {
        PatternLock()
      }
    }
    .width("100%")
    .height("100%")
    .columnsTemplate("1fr 1fr")
    .columnsGap(20)
    .rowsGap(20)
  }
}

```

<h2 id="RuNqr">组件-事件监听</h2>
:::color2
监听原生组件的事件和设置属性的方式是一样的都是链式调用，值得注意的是，我们注册事件**<font style="color:#DF2A3F;">必须</font>**使用箭头函数的写法，Next版本禁止使用匿名函数的形式来给组件注册事件

+ 匿名函数 function () {}
+ () => {}

:::

+ 尝试给一个TextInput和一个按钮注册一个值改变事件和点击事件

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702014291635-a56db536-5789-4154-adb7-368d5915a98e.png)

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702014341440-69ec5a99-ab82-42fa-827f-7a61cb681bb3.png)

:::danger
+ promAction弹出需要引入一个包才可以使用的
+ AlertDialog 不需要引入包使用的

:::

```typescript
@Entry
@Component
struct Event {

build() {
    Row() {
      Column({ space: 15 }) {
        Row() {
          TextInput({ placeholder: '请输入用户名' })
            .backgroundColor('#f4f5f6')
            .width('100%').onChange((value) => {
            AlertDialog.show({
              message: value
            })
          })
        }.padding({
          left: 20,
          right: 20
        })

Row() {
          Button("登录")
            .width('100%')
            .onClick(() => {
              AlertDialog.show({
                message: '点击了按钮'
              })
            })

}.padding({
          left: 20,
          right: 20
        })

}
      .width('100%')
    }
    .height('100%')
  }
}
```

:::info
请注意：在注册事件中的逻辑**<font style="color:#DF2A3F;">必须使用箭头函数 () => {}</font>**

1. 因为function中this指向为undefind
2. 箭头函数中的this指向当前struct实例，可以方便的调用方法和获取属性

:::

:::info
当我们事件处理逻辑比较复杂，写在UI描述中无法抽提的时候，我们可以在struct结构体中定义

:::

如

```typescript
struct Event {
  login () {
    AlertDialog.show({
      message: '登录成功'
    })
  }

...
   Button("登录")
            .width('100%')
            .onClick(() => {
              this.login()
            })
}
```

+ 属性定义

:::info
当我们需要在组件中记录一些状态时，变量应该显示的在struct中声明，并注明类型

比如-登录账户和密码

:::

```typescript
 @State
  username: string = ""
  @State
  password: string = ""
```

+ 实现一个简单的登录过程

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1708760309892-be3e0030-1367-4927-8897-033078db6de7.png)

```typescript
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct EventCase {
  @State message: string = 'Hello World';
  @State
  username: string = ""
  @State
  password: string = ""
  // 登录方法
  login() {
    if(this.username.trim()  === 'admin' && this.password === '123456') {
      // promptAction.showToast({ message: '登录成功' })
      AlertDialog.show({ message: '登录成功' })
      return
    }
    promptAction.showToast({ message: '用户名或者密码错误' })
  }

build() {
    Row() {
      Column({ space: 20 }) {
        TextInput({ placeholder: '请输入用户名', text: $$this.username })
          .height(40)
          .onChange((value) => {
            // 监听系统组件的事件的话  回调函数的参数都是有具体类型  一般的话不用给类型
            console.log(value)
          })
        TextInput({ placeholder: '请输入密码', text: $$this.password })
          .height(40)
          .onChange((value) => {
            // 监听系统组件的事件的话  回调函数的参数都是有具体类型  一般的话不用给类型
            console.log(value)
          })
          .type(InputType.Password)
          .onSubmit(() => {
            this.login()
          })
        Button("登录")
          .width('100%')
          .onClick(() => {
            this.login()
          })

}
      .padding({
        left: 20,
        right: 20
      })
      .width('100%')
    }
    .height('100%')
  }
}
```

:::info
说明

promptAction和AlertDailog都可以弹出提示  promptAction需要引入包，AlertDialog不需要引入就可以直接使用

:::

:::danger
使能-可用与否-enable

:::

再加一个小需求，当用户名和密码为空时，不让用户点按钮

```typescript
getBtnEnable () {
    return  !!this.username && !!this.password
  }

Row() {
           Button("登录")
          .width('100%')
          .onClick(() => {
            this.login()
          })
          // 隐士转化 ""
          .enabled(this.getBtnEnable())
```

响应式数据- 数据驱动视图更新

<h2 id="651e4edd">基础-组件状态</h2>
:::color2
<font style="color:rgba(0, 0, 0, 0.9);">@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。</font>

:::

:::danger
State就是前端框架中的响应式数据-Vue/React/Flutter/小程序

数据变化-视图会更新-鸿蒙中的视图就是build函数中的UI结构

:::

> 如何使用 `@State` 定义一个状态变量？
>

1）组件变量，不具备驱动UI更新能力。

```typescript
@Entry
@Component
struct Event {
  @State 
  loginName: string = ""
  @State 
  password: string = ""
}
```

:::info
加上该修饰符后，你惊奇的发现按钮随着数据的变化在变化，因为我们在值改变的时候赋值，造成了build的重新执行，getBtnEnable函数会重新执行，来保证我们状态的变化。

:::

需要注意的是，State修饰的类型

:::info
<font style="color:rgba(0, 0, 0, 0.9);">Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型的场景请参考</font>[观察变化](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-state-0000001474017162-V3#section135631413173517)<font style="color:rgba(0, 0, 0, 0.9);">。</font>

<font style="color:rgba(0, 0, 0, 0.9);">类型必须被指定。</font>

**<font style="color:rgba(0, 0, 0, 0.9);">注意</font>**

<font style="color:rgba(0, 0, 0, 0.9);">当使用undefined和null的时候，建议显式指定类型，遵循TypeScript类型校验，比如：@State a : string | undefined = undefined是推荐的，不推荐@State a: string = undefined。</font>

:::

:::color2
接下来，我们来完成一个嵌套数据修改的案例，来观察State修饰符的特性

:::

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706000969723-b82b2624-afeb-4e3e-8f83-1d80bdd6ecea.png)

+ 声明一个关于人的接口

```typescript
interface IAddress {
  province: string
  city: string
  area: string
}
interface IPerson {
  name: string
  age: number
  sex: "男" | "女"
  address: IAddress
}
```

:::color2
同学们可能比较疑惑，为什么这里还需要声明两个接口，因为Next版本不支持字面量数据类型定义，所以这里需要，用interface代替

:::

+ 类型怎么赋值呢？

:::color2
我们可以给出一个class的实现，这里大家可以使用npm来安装一下我们黑马研究院自研的接口自动转class的插件

:::

+ 使用npm全局安装插件

```bash
$ npm i -g interface2class   # 特别注意 $符号不用输入，$符号表示它是一个命令行命令
```

:::danger
npm config get registry.  #查看镜像

npm config set registry  https://registry.npmmirror.com/. # 设置镜像为淘宝景象

:::

+ 测试是否安装成功

```bash
$ i2c -V
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705999113562-5d8123d7-fe4e-47bb-b272-e86a40b8210a.png)

+ 执行带有interface的文件

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1705999138409-dd99cb5d-a61c-4329-88a9-508c060f774b.png)

+ 自动生成实现类

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706000070419-90bfe11f-b001-43ff-9444-7c35958c2a79.png)

:::color1
State修饰的变量数据发生变化的时候，不论嵌套多少层，都只能检测到第一层数据的变化

:::

+ 声明一个State类型

```typescript
 @State
  p: IPersonModel = new IPersonModel({
    name: '小张',
    age: 20,
    sex: "女",
    address: {
      province: '广东',
      city: '广州',
      area: '天河'
    }
  })
```

+ 使用UI组件实现双向绑定

```typescript
@Entry
@Component
struct StateCase {
  @State
  p: IPersonModel = new IPersonModel({
    name: '小张',
    age: 20,
    sex: "女",
    address: {
      province: '广东',
      city: '广州',
      area: '天河'
    }
  })
  build() {
    Column({ space: 10 }) {
      Text(JSON.stringify(this.p))
      Row({ space: 15 }) {
        Text("姓名：")
        TextInput({ text: this.p.name }).layoutWeight(1)
          .onChange(value => {
            this.p.name = value
          })
      }.padding(10)
      Row({ space: 15 }) {
        Text("年龄：")
        TextInput({ text: this.p.age.toString() }).layoutWeight(1)
          .onChange(value => {
             this.p.age = parseInt(value)
          })
      }.padding(10)
      Row({ space: 15 }) {
        Text("性别：")
        Select([{ value: '男' }, { value: '女' }])
          .layoutWeight(1)
          .value(this.p.sex)
          .onSelect((index: number, value: string) => {
            this.p.sex = value as "男" | "女"
          })
      }.padding(10)
      Row({ space: 15 }) {
        Text("地址：")
        TextInput({ text: this.p.address.province }).layoutWeight(1)
          .onChange((value) => {
            this.p.address.province = value
          })
        TextInput({ text: this.p.address.city }).layoutWeight(1)
          .onChange((value) => {
            this.p.address.city = value
          })
        TextInput({ text: this.p.address.area }).layoutWeight(1)
          .onChange((value) => {
            this.p.address.area = value
          })
      }.padding(10)

}
  }
}
interface IAddress {
  province: string
  city: string
  area: string
}
interface IPerson {
  name: string
  age: number
  sex: "男" | "女"
  address: IAddress
}
export class IAddressModel implements IAddress {
  province: string = ''
  city: string = ''
  area: string = ''

constructor(model: IAddress) {
    this.province = model.province
    this.city = model.city
    this.area = model.area
  }
}
export class IPersonModel implements IPerson {
  name: string = ""
  age: number = 0
  sex: "男" | "女" = "男"
  address: IAddress = new IAddressModel({} as IAddress)

constructor(model: IPerson) {
    this.name = model.name
    this.age = model.age
    this.sex = model.sex
    this.address = model.address
  }
}

```

+ 更新数据-第一层数据

```typescript
  // 放置按钮
      Row({ space: 10 }) {
        Button("修改姓名")
          .onClick(() => {
             this.p.username = "老张"
          })
        Button("修改年龄")
          .onClick(() => {
            this.p.age++
          })
        Button("修改性别")
          .onClick(() => {
            this.p.sex = this.p.sex === "男" ? "女" : "男"
          })
      }
      .padding({
        left: 10,
        right: 10
      })
      .width("100%")
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1708765073417-b6395eda-6187-4630-8e05-4dddb353f3f1.png)

+ 更新第二层数据

:::danger
所有的鸿蒙的更新机制-关于对象层的， 所有的监听机制都只能监听到Object.keys(对象)中的可见属性，但凡超过一层，是监测不到变化的。

:::

```typescript
  Row({ space: 10 }) {
        Button("修改地址")
          .onClick(() => {
            // this.p.address.province = "北京"
            // this.p.address.city = "北京"
            // this.p.address.area = "顺义"
            // this.p.age++
            // this.p.address = new IAddressModel({
            //   province: this.p.address.province,
            //   city: this.p.address.city,
            //   area:"海珠区"
            // })
            this.p.address.area = "海珠区" // 虽然不会造成更新 但是数据会变化
            this.p.address = new IAddressModel(this.p.address)
          })

}
      .padding({
        left: 10,
        right: 10
      })
      .width("100%")
```

:::color2
同学们发现什么问题没有？

我们发现第一层数据 比如 name/age/sex都是可以双向同步的，但是第二层的数据无法进行响应式更新

+ **<font style="color:#DF2A3F;">上述代码中，我们也没有使用$$，因为在目前的编辑器中使用$$绑定嵌套的数据编辑器会报错，虽然效果对，但是报错总归不太好，所以我们手动进行了数据同步</font>**

:::

:::success
在鸿蒙开发中，我们应该明确，所有的响应式更新都只能是系统可观测的响应式更新，那什么是可观测的呢？

就是只有对象或者数组第一层的数据发生了变化，才可以被观测到，所以基于这种特性，我们需要来处理下

:::

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706001313797-dccf1a69-b923-4408-885b-60d7073cc184.png)

:::color4
下方列出系统可观测的数据和行为变化

:::

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706001641905-be8f0dd9-54c6-4c78-97f8-89481d2f1b8d.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706001655422-d5b641e8-f5a6-4644-a29f-c12236f34229.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706001671264-956f22c9-fef3-458a-86c4-a136c4a348fb.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706001696443-ddcc106e-6dfd-43f4-a003-ffb96f491322.png)

<h1 id="ZnUld">样式</h1>
<h2 id="dab22cdb">样式-语法(链式&枚举)</h2>
> ArkTS以声明方式组合和扩展组件来描述应用程序的UI；  
同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。
>

1）样式属性

+ 属性方法以 `.` 链式调用的方式配置系统组件的样式和其他属性

```typescript
@Entry
@Component
struct Index {
  build() {
    Text('演示')
      .backgroundColor('red')
      .fontSize(50)
      .width('100%')
      .height(100)
  }
}
```

2）枚举值

+ 对于系统组件，ArkUI还为其属性预定义了一些枚举类型。[文档链接](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-appendix-enums-0000001478061741-V3)

```typescript
@Entry
@Component
struct Index {
  build() {
    Text('演示')
      .fontSize(50)
      .width('100%')
      .height(100)
      .backgroundColor(Color.Blue)
      .textAlign(TextAlign.Center)
      .fontColor(Color.White)
  }
}
```

:::info
+ 样式相关属性通过链式函数的方式进行设置
+ 如果类型是枚举的，通过枚举传入对应的值

注意： 有的属性**<font style="color:#DF2A3F;">强烈建议</font>**使用枚举（大部分枚举值都是数字，但是数字无法体现代码含义）

有的组件如fontColor可以使用系统自带颜色枚举，也可以使用色值

:::

<h2 id="5cb85c2d">样式-单位vp和fp</h2>
[官方定义](https://developer.huawei.com/consumer/cn/doc/design-guides-V1/basic-0000001055539104-V1)

:::color4
<font style="color:rgba(0, 0, 0, 0.9);">使用虚拟像素，使元素在不同密度的设备上具有一致的视觉体量。</font>

:::

1） `vp` 是什么？virtual pixel

+  屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位 `vp`；在实际宽度为1440物理像素的屏幕上，`1vp` 约等于 `3px`（物理像素）

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1701336468039-36c33716-ee4b-4b7f-9f2a-7214d64ee25d.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706007337745-1aed8769-b3e0-4eb9-9a50-1e4e3d9752d3.png)

+ 系统还提供了对应的像素转化方法

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706007441818-aa64d85b-f044-40af-b183-0aef9a266400.png)

:::info
在样式中，我们如果写px，那么px直接表示的是物理像素，也就是分辨率，那么我们的手机分辨率密度各有不同，无法针对这种密度写一个固定值，所以vp会自动根据手机密度去进行适配，所以vp它提供了一种灵活的方式来适应不同屏幕密度的显示效果。

设计图按照1080设计- 换算成360写vp就可以了

:::

![](./images/22.png)

+  上图的意思是，使用这个单位在不同屏幕物理分辨率的实际尺寸一致(A设备1英寸，B设备1英寸)。

2）之前 `vw` 、`rem` 和 `rpx` 相对于屏幕宽度的单位，可以实现等比例适配，`vp` 可以吗？

```typescript
@Entry
@Component
struct StyleCase {
  @State message: string = 'Hello World'

build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%').alignItems(2)
    }.width('100%')
    .height('100%')
    .onAreaChange((_, newArea) => {
      AlertDialog.show({ message: JSON.stringify(newArea) })
    })
  }
}
```

我们发现：不同的设备屏幕的宽度 `vp` 是不一致的，那怎么适配呢？

:::danger
伸缩布局的方案

+ 监听元素的变化-可以拿到宽高-重新计算
+ layoutWeight(number)- 剩余资源再分配

:::

3）根据官方的文档，结合自己的理解，采用：伸缩布局，网格系统，栅格系统进行布局适配。

伸缩 `layoutWeight(flex: number)` 占剩余空间多少份，可以理解成CSS的 `flex: 1`

如图-手机端

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702020968327-79037c16-c01c-4e0f-ab9b-e32c11b5b6db.png)

-pad

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702021023832-c6fb90f9-ee4e-4598-af76-6669727ec7c4.png)

我们可以使用layoutWeight属性，让右侧内容去占满剩余宽度

```typescript
build() {
    Row() {
      Text("左侧内容")
      Text("右侧内容")
        .textAlign(TextAlign.End)
        .width('80%')
        .height(60)
        .backgroundColor('red')
        .layoutWeight(1)
    }.width('100%')
    .height('100%')

}
```

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702021104810-9a1eea7b-6dce-426b-b82e-ef07ed314c4f.png)

```typescript
@Entry
@Component
struct LayoutCase {
  @State message: string = 'Hello World';

build() {
    Column() {
      Row() {

}
      .width('100%')
      .height(50)
      .backgroundColor(Color.Blue)

Column() {

}
      .width('100%')
      .backgroundColor(Color.Green)
      .layoutWeight(1)  // Grid中的columnsTemplate 1fr 1fr
      Column() {

}
      .width('100%')
      .backgroundColor(Color.Orange)
      .layoutWeight(1)

Row() {

}
      .width('100%')
      .height(50)
      .backgroundColor(Color.Red)
    }
    .height("100%")
    .width("100%")
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1708767865912-cda9ac02-f1b5-484b-86cf-fab1d87d873c.png)

+ 内容等比例缩放-可以使用aspectRatio属性设置宽高比

设置元素宽高比 `aspectRatio(ratio: number)`

> 如我们如果希望一个元素始终占整个屏幕宽度的50%，且为一个正方形
>

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702021334132-97647478-e255-447b-ab52-e846506359c0.png)

```typescript
 Column()
        .width('50%')
        .height('50%')
        .backgroundColor('blue')
        .aspectRatio(1)
```

```typescript
@Entry
@Component
struct Index {
  build() {
    Text('left')
      .width('50%')
        // 宽高比例
      .aspectRatio(1)
      .backgroundColor('red')
  }
}
```

:::info
+ vp 是鸿蒙默认单位，和屏幕像素有关，最终表现视觉大小在任何设备一致
+ 鸿蒙一般以伸缩 `layoutWeight`、网格、栅格进行布局适配，如要等比例缩放可以设置高宽比 `aspectRatio`

:::

<h2 id="WxQZk">Image和资源Resource</h2>
:::info
项目开发离不开图片-图片在页面中必须使用Image/ImageSpan/动画图片组件

Image为图片组件，常用于在应用中显示图片。Image支持加载string、[PixelMap](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-image-0000001477981401-V3#ZH-CN_TOPIC_0000001523648994__pixelmap7)和[Resource](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-types-0000001477981241-V3#ZH-CN_TOPIC_0000001573928889__resource)类型的数据源，支持png、jpg、bmp、svg和gif类型的图片格式。

:::

+ 使用本地图片-拖一张图片放置到ets目录下-比如assets文件下

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702021783188-3ec61d18-8e4f-4cea-9a4d-004b85dba2cb.png)

```typescript
 Image('/assets/a.png').width(80).height(80)
```

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702021716827-f0266653-5bd3-4226-a34b-8c1815ceb301.png)

+ 使用Resource下的图片-media

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702021766016-1e3eae58-dd4c-41e7-a001-61d3d0bccf22.png)

```typescript
Image($r('app.media.github')).width(80).height(80)
```

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702021844531-0efbacdc-b13e-44d2-a6b5-cbbfcda4386e.png)

+ 使用Resource下的图片-rawfile

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702022113788-6b96618c-9790-4ecb-a69b-4e3933d5e166.png)

```typescript
 Image($rawfile("b.png")).width(80).height(80)
```

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702022218559-374a593c-8dac-4877-9d88-4213b060ed7b.png)

+ 使用网络图片

```typescript
Image("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2bf1b169-d217-44c3-a5b3-dd00813bc20d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704614176&t=e15a2fd5193aeeb24fc95b5dbe395907").width(80).height(80)

```

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702022262193-99fb9948-72e0-4101-8b78-05fca1ee2409.png)

:::info
尤其注意： 使用网络图片时，在preview中时，可以预览，但是在模拟器和真实项目中，必须申请网络权限

:::

```plain
"requestPermissions": [{
  "name":"ohos.permission.INTERNET"
}],
```

�

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1708770131735-dfbd3a67-ad0b-44fa-958f-6454d1b0fc7d.png)

```typescript
@Entry
@Component
struct ImageCase {

build() {
    Grid() {
      GridItem() {
        // 采用本地路径的形式
        Image('/assets/xiamen.jpeg')
          .width(100)
          .height(100)
          .aspectRatio(1)
      }
      GridItem() {
        // 网络图片
        Image("https://t7.baidu.com/it/u=2531125946,3055766435&fm=193&f=GIF")
          .width(100)
          .height(100)
      }
      GridItem() {
        // 网络图片
        Image("/assets/douyin.svg")
          .width(100)
          .height(100)
      }
      GridItem() {
        // 网络图片
        Image("/assets/iconfont-phone.svg")
          .width(100)
          .height(100)
          .fillColor(Color.Red)
      }
      GridItem() {
        // svg都可以进行着色
        Image($r("app.media.icon"))
          .width(100)
          .height(100)
      }
      GridItem() {
        Image($r("app.media.qq"))
          .width(100)
          .height(100)
      }
      GridItem() {
        Image($rawfile("iconfont-jixieqimo.svg"))
          .width(100)
          .height(100)
      }
    }.columnsTemplate("1fr 1fr 1fr")
    .rowsGap(20)
    .width('100%')
  }
}
```

:::info
接下来，我们手写一个知乎的评论

:::

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709036142467-64caaa1c-50f7-4650-88ce-17ead106dfc1.png)

```typescript
@Entry
@Component
struct ZHCase {
  build() {
    Column() {
     Row() {
       // 返回键
       Row() {
         Image($r('app.media.ic_public_left_arrow'))
           .width(16)
           .height(16)
       }
       .width(30)
       .height(30)
       .borderRadius(15)
       .backgroundColor("#f4f4f4")
       .justifyContent(FlexAlign.Center)
       .margin({
         left: 20
       })
       Text("评论回复")
         .layoutWeight(1)
         .textAlign(TextAlign.Center)
         .margin({
           right: 50
         })
     }
      .width('100%')
      .height(50)
      .border({
        color: "#f4f5f6",
        width: {
          bottom: 1
        }
      })
    //  下方内容
     Row({ space: 10 }) {
       Image("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1bad8264-7428-44cf-a92d-3016a2de537b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1711626934&t=5478cb3adef5d3e29e6952934797ca39")
         .width(40)
         .height(40)
         .borderRadius(20)

Column({ space: 10 }) {
         Text("周杰伦")
           .fontColor("#303a43")
           .fontSize(18)
           .fontWeight(FontWeight.Bold)

Text("黄河江最近一代都带蓝牙，意大利拌面必须使用42👌钢筋混凝土量子力学")
           .fontColor("#2f3642")
           .lineHeight(22)
         Row() {
           Text("10-21 .IP属地北京")
             .fontColor("#cacaca")
             .fontSize(12)

Row({ space: 4 }) {
             Image($r("app.media.ic_public_like"))
               .width(12)
               .height(12)
               .fillColor("#cacaca")

Text("100")
               .fontColor("#cacaca")
               .fontSize(12)

}
         }
         .justifyContent(FlexAlign.SpaceBetween)
         .width('100%')
       }
       .alignItems(HorizontalAlign.Start)
       .layoutWeight(1)

}
     .alignItems(VerticalAlign.Top)
     .padding(20)
     .width('100%')
    }
    .width('100%')
  }
}
```

:::info
华为官方图标下载 [链接](https://developer.harmonyos.com/cn/design/harmonyos-icon/)

:::

<h2 id="fExrF">layoutWeight的作用</h2>
:::info
瓜分当前组件的剩余空间

Row() {

Text().width(10)

Text().layoutWeight(5) //表示这个元素占据剩余所有的空间 （100 - 10 - 10）* （5/（5 + 1））

Text().layoutWeight(1) //表示这个元素占据剩余所有的空间 100 - 10 - 10

}.width(100)

:::

<h2 id="Yn8Hz">堆叠布局Stack的应用</h2>
+ 线性布局
+ Flex布局
+ Grid布局
+ Stack布局堆叠布局

:::info
只要在Stack内部-后者永远会覆盖前者

:::

```typescript
@Entry
@Component
struct StackCase {

build() {
    Stack({ alignContent: Alignment.Center }) {
      // 第一个
      Row() {

}
      .width(200)
      .height(100)
      .backgroundColor(Color.Green)
     // 第二个
      Row() {

}
      .width(100)
      .height(200)
      .backgroundColor(Color.Blue)

// 第三个
      Row() {

}
      .width(200)
      .height(100)
      .backgroundColor(Color.Orange)
    }
    .width('100%')
    .height('50%')
    .backgroundColor(Color.Pink)
  }
}
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709037913372-98c5cd8a-298b-4642-b1a9-ea12166d0555.png)

:::info
Stack的参数 可以设置子组件的排列方式-alignContent

+ Top(顶部)
+ TopStart（左上角）
+ TopEnd（右上角）
+ Start（左侧）
+ End（右侧）
+ Center（中间）
+ Bottom（底部）
+ BottomStart（左下角）
+ BottomEnd(右下角)

:::

+ 实现知乎的效果

```typescript
import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct StackTopCase {

build() {
    Stack({ alignContent: Alignment.Start }) {
      Image($r("app.media.ic_public_left_arrow"))
        .width(20)
        .height(20)
        .onClick(() => {
          promptAction.showToast({ message: '触发啦' })
        })
        .zIndex(2) // 提高层级
      Text("评论回复")
        .width('100%')
        .textAlign(TextAlign.Center)

}
    .padding({
      left: 10,
      right: 10
    })
    .width("100%")
    .height(50)
    .backgroundColor(Color.Orange)
  }
}
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709038062012-cce7067f-0809-4944-a8ad-771d46ccd216.png)

<h2 id="0057bf55"> 样式-[@Styles ](/Styles ) 复用 </h2>
:::color1
注意： Styles和Extend均只支持在当前文件下的全局或者组件内部定义，如果你想要在其他文件导出一个公共样式，导出公共使用，ArtTS是不支持的，这种方式还是需要考虑组件复用。

:::

> 在开发过程中会出现大量代码在进行重复样式设置，`@Styles` 可以帮我们进行样式复用
>

:::info
通用属性 通用事件

在Styles修饰的函数中能够点出来就是通用属性和事件-Text的字体颜色-字体大小不属于通用属性

Styles修饰的函数不允许传参数

:::

+ 当前 `@Styles` 仅支持 [通用属性](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-universal-attributes-size-0000001428061700-V3) 和 [通用事件](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-universal-events-click-0000001477981153-V3)。

:::info
全局Styles不支持箭头函数语法

:::

:::warning
**<font style="color:#DF2A3F;">注意： 全局Styles扩展符只能和使用它的组件位于同一个文件，不允许导入导出，导入导出也使用不了</font>**

:::

+ 支持 **全局** 定义和 **组件内** 定义，同时存在组件内覆盖全局生效。

```typescript
import { promptAction } from '@kit.ArkUI'

@Styles
function payStyle () {
  .width('100%')
  .height(50)
  .borderRadius(4)
  .backgroundColor("#00c168")
  .onClick(() => {
    promptAction.showToast({ message: '微信支付成功' })
  })
}

@Entry
@Component
struct StyleCase {
  @Styles
  payStyle() {
    .width('100%')
    .height(50)
    .borderRadius(4)
    .backgroundColor("#ff1256e0")
    .onClick(() => {
      promptAction.showToast({ message: '支付宝支付成功' })
    })
 }

build() {
    Column({ space: 20 }) {
      Row() {
        Button("微信支付", { type: ButtonType.Normal })
          .payStyle()
          .fontColor(Color.White)
      }
      .padding(10)
      Row() {
        Button("微信支付", { type: ButtonType.Normal })
          .payStyle()
          .fontColor(Color.White)
      }
      .padding(10)
      Row() {
        Button("微信支付", { type: ButtonType.Normal })
          .payStyle()
          .fontColor(Color.White)
      }
      .padding(10)

}
  }
}
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709038917365-af65b791-4d99-4611-b57a-bf1d1267d9f0.png)

<h2 id="26c0ac3c"> 样式-[@Extend](/Extends ) 复用 </h2>
:::info
假设我们就想针对 Text进行字体和样式的复用，此时可以使用Extend来修饰一个全局的方法

+ 使用 `@Extend` 装饰器修饰的函数只能是 **全局**
+ 函数可以进行 **传参**，如果参数是状态变量，状态更新后会刷新UI
+ 且参数可以是一个函数，实现复用事件且可处理不同逻辑

:::

:::warning
**<font style="color:#DF2A3F;">注意： Extend扩展符只能和使用它的组件位于同一个文件，不允许导入导出，导入导出也使用不了</font>**

:::

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709040123174-ec8f12e6-80ee-409d-b2d3-ba59ec1a1926.png)

```typescript
import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct ExtendCase {

build() {
     Column({ space: 20 }) {
       Button("微信支付")
         .payButton("alipay")
       Button("微信支付")
         .payButton("wechat")
       Button("微信支付")
         .payButton("alipay")
       Button("微信支付")
         .payButton("wechat")
           Button("微信支付")
         .payButton("alipay")
           Button("微信支付")
         .payButton("wechat")
           Button("微信支付")
         .payButton("alipay")

}
     .padding(20)
    .width('100%')
  }
}

// 不允许导出
@Extend(Button)
function  payButton (type: "alipay" | "wechat") {
  .type(ButtonType.Normal)
  .fontColor(Color.White)
  .width('100%')
  .height(50)
  .borderRadius(4)
  .backgroundColor(type === "wechat" ? "#00c168" : "#ff1256e0")
  .onClick(() => {
    if(type === "alipay") {
      promptAction.showToast({ message: '支付宝支付成功' })
    }else {
      promptAction.showToast({ message: '微信支付成功' })
    }

})
}
```

<h2 id="9a88aa06">多态样式stateStyles</h2>
:::color1
@Styles和@Extend仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。这就是我们本章要介绍的内容stateStyles（又称为：多态样式）。

ArkUI 提供以下五种状态：

+ focused：获焦态。
+ normal：正常态。
+ pressed：按压态。
+ disabled：不可用态。
+ <font style="color:rgb(36, 39, 40);">selected: 选中态</font>

:::

:::warning
假设我们想做一个微信中点击的选中状态， 如图

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706066353555-76d18fed-fbd5-4960-8112-7dec8fd178e5.png)

该图在点击时会有变色，抬起时消失，此时就可以利用多态样式进行设置

:::

+ 实现一个基本的Row样式

```typescript
@Entry
@Component
struct StateStylesCase {
  build() {
    Column({ space: 20 }) {
       Row() {
         Text("你今天想我了吗")
       }
       .padding(20)
       .height(80)
       .border({
         color: '#f3f4f5',
         width: 3
       })
       .borderRadius(4)
       // 多态样式
       .stateStyles({
         // 正常态
         normal: {
           .backgroundColor(Color.White)
         },
         pressed: {
           .backgroundColor("#eee")
         }
       })
      .width('100%')
    }
    .padding(20)
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709040992088-12a5aa72-fcbe-4099-917a-3d9909e2cd62.png)

:::info
按钮时，出现变色，需要同时设置pressed和normal两个属性, 如果只设置pressed，松手之后样式无法恢复

:::

:::info
**注意**-  **<font style="color:#DF2A3F;">多态样式只能设置通用属性</font>**

:::

+ 禁用状态样式

:::warning
鸿蒙所有组件都会有一个enable属性，enable为true时表示该组件可用，为false时，表示该组件禁用，禁用态就表示组件禁用时的样式

:::

+ 设置Row禁用时的状态背景为灰背景

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709041227574-bd5ef673-6680-47d8-9e13-593c0a65e7eb.png)

```typescript
@Entry
@Component
struct StateStylesCase {
  @State
  btnEnable: boolean = true
  build() {
    Column({ space: 20 }) {
       Row() {
         Text("你今天想我了吗")
       }
       .padding(20)
       .height(80)
       .border({
         color: '#f3f4f5',
         width: 3
       })
       .borderRadius(4)
       // 多态样式
       .stateStyles({
         // 正常态
         normal: {
           .backgroundColor(Color.White)
         },
         pressed: {
           .backgroundColor("#eee")
         },
         disabled: {
           .backgroundColor("#999")
         }
       })
       .enabled(this.btnEnable)
      .width('100%')
      Button("禁用/解禁")
        .onClick(() => {
          this.btnEnable = !this.btnEnable
        })
    }
    .padding(20)
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}
```

+ 获焦状态

:::info
假设我们有个账号和密码输入框，需要在聚焦态时设置选中样式，同样可以使用多态样式来设置

**<font style="color:#DF2A3F;">但是在预览器和真机中，有个非常诡异的设计，只能通过tab键切换才可以使得输入框进入聚焦态</font>**

如图

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706069515315-90683056-11e2-410f-a6d4-b1aeeaa39c26.png)

:::

```typescript
 TextInput({
          placeholder: '请输入账号'
        })
          .stateStyles({
            focused: {
              .border({
                color: Color.Red,
                width: 1
              })
            },
            normal: {
              .border({
                width: 0
              })
            }
          })
        TextInput({
          placeholder: '请输入密码',
        })
          .stateStyles({
            focused: {
              .border({
                color: Color.Red,
                width: 1
              })
            },
            normal: {
              .border({
                width: 0
              })
            }
          })
          .type(InputType.Password)
          .showPasswordIcon(true)
```

+ 全部代码

```typescript
@Entry
@Component
struct StateStylesCase {
 @State
 rowEnable: boolean = true
  build() {
    Row() {
      Column({ space: 20 }) {
        TextInput({
          placeholder: '请输入账号'
        })
          .stateStyles({
            focused: {
              .border({
                color: Color.Red,
                width: 1
              })
            },
            normal: {
              .border({
                width: 0
              })
            }
          })
        TextInput({
          placeholder: '请输入密码',
        })
          .stateStyles({
            focused: {
              .border({
                color: Color.Red,
                width: 1
              })
            },
            normal: {
              .border({
                width: 0
              })
            }
          })
          .type(InputType.Password)
          .showPasswordIcon(true)

Row() {
          Text("你干什么吃的")
        }
        .height(60)
        .width('100%')
        .border({
          color: '#ccc',
          width: 1
        }).stateStyles({
          pressed: {
            .backgroundColor(Color.Gray)
          },
          normal: {
            .backgroundColor(Color.White)
          },
          disabled: {
            .backgroundColor("#f3f4f5")
          }
        })
        .enabled(this.rowEnable)
        Button("禁用")
          .onClick(() => {
            this.rowEnable = !this.rowEnable
          })
      }

}
    .height('100%')
  }
}

```

:::info
+ 使用比较多的应该是 `normal` `pressed` 结合下的按压效果
+ `enabled(true|false)` 开启|禁用

:::

<h1 id="RNVpk">界面渲染</h1>
<h2 id="7936eac8"> 渲染-条件渲染</h2>
:::info
在ArkTS中 我们要根据某个状态来控制元素或者组件的显示隐藏 可以采用条件渲染

+ if/else（创建销毁元素）
+ 元素高宽-透明度-位置控制 （属性控制）
+ visibility属性控制

:::

+ 使用if/else

> 通过一个switch开关来控制图片的显示隐藏
>

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706070357048-06f2fcf2-e4d2-42ed-b85b-0b6ecbfb4506.png)

```typescript
@Entry
@Component
struct ConditionCase {
  @State showImg: boolean = false

build() {
    Row() {
      Column() {
        Toggle({
          type: ToggleType.Switch,
          isOn: this.showImg
        })
          .onChange((isON) => {
            this.showImg = isON
          })
        if(this.showImg) {
          Image('/assets/test.jpg')
            .width(150)
            .height(150)
        }

}
      .width('100%')
    }
    .height('100%')
  }
}
```

+ 多种条件控制

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702034092213-d4b94c51-0bdc-43a8-a5dd-e3899f45b02c.png)![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702034102660-5a8deb9d-d28c-4472-992e-6f1e1dc4b191.png)

```typescript
 @State selectList: SelectOption[] = [{ value: '勇士' }, { value: '湖人' }, { value: '太阳' }]
  @State selectIndex: number = 0

// 根据不同的条件显示不同的城市
       Select(this.selectList)
          .selected($$this.selectIndex)

if(this.selectIndex === 0) {
          Text("史蒂芬库里")
        }
        else if(this.selectIndex === 1) {
          Text("勒布朗詹姆斯")
        }
        else if(this.selectIndex === 2) {
          Text("凯文杜兰特")
        }
```

+ 控制元素高宽

```typescript
Image($r('app.media.startIcon'))
        .width(this.isOn ? 100 : 0)
        .height(this.isOn ? 100 : 0)
        .borderRadius(8)
```

+ 控制visibility属性- Hidden和None两种

```typescript
 Image($r('app.media.startIcon'))
        .width(100)
        .height(100)
        .borderRadius(8)
        .visibility(this.isOn ? Visibility.Visible: Visibility.Hidden)

Image($r('app.media.startIcon'))
        .width(100)
        .height(100)
        .borderRadius(8)
        .visibility(this.isOn ? Visibility.Visible: Visibility.None)
```

```typescript
@Entry
@Component
struct ConditionCase {
  @State showImg: boolean = false
  @State selectList: SelectOption[] = [{ value: '勇士' }, { value: '湖人' }, { value: '太阳' }]
  @State selectIndex: number = 0
  @State isOn: boolean = false

Select(this.selectList)
          .selected($$this.selectIndex)

if(this.selectIndex === 0) {
          Text("史蒂芬库里")
        }
        else if(this.selectIndex === 1) {
          Text("勒布朗詹姆斯")
        }
        else if(this.selectIndex === 2) {
          Text("凯文杜兰特")
        }
        Image($r('app.media.startIcon'))
          .width(this.isOn ? 100 : 0)
          .height(this.isOn ? 100 : 0)
          .borderRadius(8)
        Image($r('app.media.startIcon'))
          .width(100)
          .height(100)
          .borderRadius(8)
          .visibility(this.isOn ? Visibility.Visible: Visibility.Hidden)

Image($r('app.media.startIcon'))
          .width(100)
          .height(100)
          .borderRadius(8)
          .visibility(this.isOn ? Visibility.Visible: Visibility.None)
        Button("显示隐藏")
          .onClick(() => {
            this.isOn = !this.isOn
          })
      }
      .width('100%')

}
    .height('100%')
  }
}

```

:::info
visibility的Hidden会占位，元素隐藏，Node隐藏且不占位

:::

+ 案例-实现加载数据的loading效果

:::color1
es6&arkts 中的导入和导出

+ 默认导出 。 export default xxx
+ 默认引入 。import xxx from 地址
+ 按需导出  export { xx1, xx2, xx3  } 。export  struct 
+ 按需引入 import { xx1 as 别名， xx2 } from 地址
+ 全部导入  export * as 别名（包含默认导出+按需导出）
+ export * from '地址' 。// 导出这个文件地址下的所有的导出的内容

例子 export * from './a.ets'

export * from './b.ets'

:::

:::warning
![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706079464628-9bc63f5f-e855-4930-8276-b1f36521e1c5.png)

:::

+ 封装loading组件

```typescript
@Preview // 表示该组件可预览 Preview只能看效果 没有交互
@Component
export struct HmLoading {
  @State // 响应式驱动视图
  value: number = 0
  timer: number = -1  // 显示声明
  aboutToAppear(): void {
   this.timer = setInterval(() => {
      if(this.value === 100) {
        this.value = 0
      }
      this.value++
    }, 10)
  }
  aboutToDisappear(): void {
    clearInterval(this.timer)
  }

build() {
     Progress({
       total: 100,
       value: this.value,
       type: ProgressType.Ring
     })
  }
}

// 默认导出
export default HmLoading  // 一个文件只能有一个默认导出
// 按需导出
// export { HmLoading, HmLoading1, HmLoading3 }

```

+ 在LoadingCase中使用

```typescript
import HmLoading from './Components/HmLoading';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct LoadingCase {
  @State showLoading: boolean = false;

// 页面刚进入 应该去获取数据  等待的过程中 显示进度 数据获取完 进度消失
  // 钩子函数
  aboutToAppear(): void {
     // 请求数据
    // setTimeout/setInterval
    this.showLoading = true
    setTimeout(() => {
      this.showLoading = false
    },10000)
  }
  build() {
    Row() {
      Column() {
        if(this.showLoading) {
          HmLoading()
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

// 封装一个Loading组件
```

<h2 id="450da234"> 渲染-循环渲染</h2>
+ ForEach-最常用的
+ LazyForEach-懒加载渲染（复杂-后面讲）

:::info
循环渲染使用 ForEach方法来进行

:::

> `ForEach` 接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用。
>

```typescript
ForEach(
  // 数据源
  arr: Array,
  // 组件生成函数
  itemGenerator: (item: 单项, index?: number) => void,
  // 键值生成函数
  keyGenerator?: (item: 单项, index?: number): string => string
)
```

+ 定义数据类型

```typescript
// es6 引入时，'./model' 会自动寻找目录下的index文件
export interface WorkRecord {
  companyName: string
  workDate: string
  workSalary: number
  workContent: string
  workTitle: string
}

```

+ 在页面中生成数据，用ForEach循环

```typescript
import { WorkRecord } from './models'

@Entry
@Component
struct ForEachCase {
  @State
  list: WorkRecord[] = [{
    workDate: '2012-6-2012-11',
    workSalary: 1,
    workTitle: '.Net开发工程师',
    companyName: '文化公司',
    workContent: '搭建网站'
  }, {
    workDate: '2012-11-2017-1',
    workSalary: 1,
    workTitle: '.Net/Java/前端开发工程师',
    companyName: '零代码编程',
    workContent: '架构设计-开发-主流程'
  },{
    workDate: '2017-3-2018-2',
    workSalary: 1,
    workTitle: '前端开发工程师',
    companyName: '点餐',
    workContent: '前端'
  },{
    workDate: '2018-2-2019-3',
    workSalary: 1,
    workTitle: '高级架构师',
    companyName: '某平台',
    workContent: '架构设计'
  },{
    workDate: '2019-3-至今',
    workSalary: 10,
    workTitle: '讲课的',
    companyName: '黑马',
    workContent: '做课讲课'
  }]

build() {
     // List > ListItem
     List({ space: 20 }) {
       ForEach(this.list, (item: WorkRecord) => {
          ListItem() {
            Column() {
              Row() {
                Text("工作名称")
                Text(item.workTitle)
              }
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
              Row() {
                Text("工作年度")
                Text(item.workDate)
              }
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
              Row() {
                Text("工作内容")
                Text(item.workContent)
              }
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
              Row() {
                Text("公司名称")
                Text(item.companyName)
              }
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
              Row() {
                Text("薪资")
                Text(item.workSalary.toString())
              }
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)

}
          }
       })
     }.divider({
        color: '#999',
        strokeWidth: 6
     })
    .padding(20)
  }
}

// ForEach(数据源：类型[])
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709210402251-01fef763-4673-4872-8f23-a834209c0a0c.png)

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709211381208-e0c45afb-3e08-4e9a-887e-6b818a006495.png)

+ 新建一个list数据，进行循环

:::warning
使用下面的接口

:::

```typescript
interface GoodItem {
  goods_name: string
  goods_price: number
  goods_img: string
  goods_count: number
  id: number
}
```

+ 拷贝图片到assets

[图片.zip](https://weiqi123.yuque.com/attachments/yuque/0/2024/zip/32778948/1727515378867-be3fb26c-2545-4195-b0b6-8b74c4152e89.zip)

![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1702037727233-a6890ee4-bbec-48f8-a71c-0b4041b83a78.png)

+ 声明数据

```typescript
@State list: GoodItem[] = [
    {
      "id": 1,
      "goods_name": "班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣",
      "goods_img": "assets/1.webp",
      "goods_price": 108,
      "goods_count": 1,
    },
    {
      "id": 2,
      "goods_name": "嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮",
      "goods_img": "assets/2.webp",
      "goods_price": 129,
      "goods_count": 1,
    },
    {
      "id": 3,
      "goods_name": "思蜜怡2020休闲运动套装女春秋季新款时尚大码宽松长袖卫衣两件套",
      "goods_img": "assets/3.webp",
      "goods_price": 198,
      "goods_count": 1,
    },
    {
      "id": 4,
      "goods_name": "思蜜怡卫衣女加绒加厚2020秋冬装新款韩版宽松上衣连帽中长款外套",
      "goods_img": "assets/4.webp",
      "goods_price": 99,
      "goods_count": 1,
    },
    {
      "id": 5,
      "goods_name": "幂凝早秋季卫衣女春秋装韩版宽松中长款假两件上衣薄款ins盐系外套潮",
      "goods_img": "assets/5.webp",
      "goods_price": 156,
      "goods_count": 1,
    },
    {
      "id": 6,
      "goods_name": "ME&CITY女装冬季新款针织抽绳休闲连帽卫衣女",
      "goods_img": "assets/6.webp",
      "goods_price": 142.8,
      "goods_count": 1,
    },
    {
      "id": 7,
      "goods_name": "幂凝假两件女士卫衣秋冬女装2020年新款韩版宽松春秋季薄款ins潮外套",
      "goods_img": "assets/7.webp",
      "goods_price": 219,
      "goods_count": 2,
    },
    {
      "id": 8,
      "goods_name": "依魅人2020休闲运动衣套装女秋季新款秋季韩版宽松卫衣 时尚两件套",
      "goods_img": "assets/8.webp",
      "goods_price": 178,
      "goods_count": 1,
    },
    {
      "id": 9,
      "goods_name": "芷臻(zhizhen)加厚卫衣2020春秋季女长袖韩版宽松短款加绒春秋装连帽开衫外套冬",
      "goods_img": "assets/9.webp",
      "goods_price": 128,
      "goods_count": 1,
    },
    {
      "id": 10,
      "goods_name": "Semir森马卫衣女冬装2019新款可爱甜美大撞色小清新连帽薄绒女士套头衫",
      "goods_img": "assets/10.webp",
      "goods_price": 153,
      "goods_count": 1,
    }
  ]
```

使用ForEach遍历

```typescript
import { GoodItem } from './models'

@Entry
@Component
struct ForEachGoodCase {
  @State list: GoodItem[] = [
    {
      "id": 1,
      "goods_name": "班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣",
      "goods_img": "assets/1.webp",
      "goods_price": 108,
      "goods_count": 1,
    },
    {
      "id": 2,
      "goods_name": "嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮",
      "goods_img": "assets/2.webp",
      "goods_price": 129,
      "goods_count": 1,
    },
    {
      "id": 3,
      "goods_name": "思蜜怡2020休闲运动套装女春秋季新款时尚大码宽松长袖卫衣两件套",
      "goods_img": "assets/3.webp",
      "goods_price": 198,
      "goods_count": 1,
    },
    {
      "id": 4,
      "goods_name": "思蜜怡卫衣女加绒加厚2020秋冬装新款韩版宽松上衣连帽中长款外套",
      "goods_img": "assets/4.webp",
      "goods_price": 99,
      "goods_count": 1,
    },
    {
      "id": 5,
      "goods_name": "幂凝早秋季卫衣女春秋装韩版宽松中长款假两件上衣薄款ins盐系外套潮",
      "goods_img": "assets/5.webp",
      "goods_price": 156,
      "goods_count": 1,
    },
    {
      "id": 6,
      "goods_name": "ME&CITY女装冬季新款针织抽绳休闲连帽卫衣女",
      "goods_img": "assets/6.webp",
      "goods_price": 142.8,
      "goods_count": 1,
    },
    {
      "id": 7,
      "goods_name": "幂凝假两件女士卫衣秋冬女装2020年新款韩版宽松春秋季薄款ins潮外套",
      "goods_img": "assets/7.webp",
      "goods_price": 219,
      "goods_count": 2,
    },
    {
      "id": 8,
      "goods_name": "依魅人2020休闲运动衣套装女秋季新款秋季韩版宽松卫衣 时尚两件套",
      "goods_img": "assets/8.webp",
      "goods_price": 178,
      "goods_count": 1,
    },
    {
      "id": 9,
      "goods_name": "芷臻(zhizhen)加厚卫衣2020春秋季女长袖韩版宽松短款加绒春秋装连帽开衫外套冬",
      "goods_img": "assets/9.webp",
      "goods_price": 128,
      "goods_count": 1,
    },
    {
      "id": 10,
      "goods_name": "Semir森马卫衣女冬装2019新款可爱甜美大撞色小清新连帽薄绒女士套头衫",
      "goods_img": "assets/10.webp",
      "goods_price": 153,
      "goods_count": 1,
    }
  ]

build() {
    List({ space: 20 }) {
      ForEach(this.list, (item: GoodItem) => {
        ListItem() {
          Row({ space: 10 }) {
            Image(item.goods_img)
              .borderRadius(8)
              .width(120)
              .height(200)
            Column() {
              Text(item.goods_name)
                .fontWeight(FontWeight.Bold)
              Text("¥ "+item.goods_price.toString())
                .fontColor(Color.Red)
                .fontWeight(FontWeight.Bold)
            }
            .padding({
              top: 5,
              bottom: 5
            })
            .alignItems(HorizontalAlign.Start)
            .justifyContent(FlexAlign.SpaceBetween)
            .height(200)
            .layoutWeight(1)
          }
          .width('100%')
        }
      })
    }
    .padding(20)
  }
}
```

+ 练习两列布局

:::warning
![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706080516793-0fe681d1-18d3-4fe1-aa58-51ce9345b9c4.png)

:::

```typescript
import { GoodItem } from './models'
import { SegmentButton, SegmentButtonOptions } from '@ohos.arkui.advanced.SegmentButton'

@Entry
@Component
struct ForEachGoodCase {
  @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({
    buttons: [{ text: '单列' }, { text: '双列' }]
  })
  @State
  tabSelectedIndexes: number[] = [0]
  @State list: GoodItem[] = [
    {
      "id": 1,
      "goods_name": "班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣",
      "goods_img": "assets/1.webp",
      "goods_price": 108,
      "goods_count": 1,
    },
    {
      "id": 2,
      "goods_name": "嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮",
      "goods_img": "assets/2.webp",
      "goods_price": 129,
      "goods_count": 1,
    },
    {
      "id": 3,
      "goods_name": "思蜜怡2020休闲运动套装女春秋季新款时尚大码宽松长袖卫衣两件套",
      "goods_img": "assets/3.webp",
      "goods_price": 198,
      "goods_count": 1,
    },
    {
      "id": 4,
      "goods_name": "思蜜怡卫衣女加绒加厚2020秋冬装新款韩版宽松上衣连帽中长款外套",
      "goods_img": "assets/4.webp",
      "goods_price": 99,
      "goods_count": 1,
    },
    {
      "id": 5,
      "goods_name": "幂凝早秋季卫衣女春秋装韩版宽松中长款假两件上衣薄款ins盐系外套潮",
      "goods_img": "assets/5.webp",
      "goods_price": 156,
      "goods_count": 1,
    },
    {
      "id": 6,
      "goods_name": "ME&CITY女装冬季新款针织抽绳休闲连帽卫衣女",
      "goods_img": "assets/6.webp",
      "goods_price": 142.8,
      "goods_count": 1,
    },
    {
      "id": 7,
      "goods_name": "幂凝假两件女士卫衣秋冬女装2020年新款韩版宽松春秋季薄款ins潮外套",
      "goods_img": "assets/7.webp",
      "goods_price": 219,
      "goods_count": 2,
    },
    {
      "id": 8,
      "goods_name": "依魅人2020休闲运动衣套装女秋季新款秋季韩版宽松卫衣 时尚两件套",
      "goods_img": "assets/8.webp",
      "goods_price": 178,
      "goods_count": 1,
    },
    {
      "id": 9,
      "goods_name": "芷臻(zhizhen)加厚卫衣2020春秋季女长袖韩版宽松短款加绒春秋装连帽开衫外套冬",
      "goods_img": "assets/9.webp",
      "goods_price": 128,
      "goods_count": 1,
    },
    {
      "id": 10,
      "goods_name": "Semir森马卫衣女冬装2019新款可爱甜美大撞色小清新连帽薄绒女士套头衫",
      "goods_img": "assets/10.webp",
      "goods_price": 153,
      "goods_count": 1,
    }
  ]

build() {
    Column() {
      SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes  })
      if(this.tabSelectedIndexes.includes(0)) {
        List({ space: 20 }) {
          ForEach(this.list, (item: GoodItem) => {
            ListItem() {
              Row({ space: 10 }) {
                Image(item.goods_img)
                  .borderRadius(8)
                  .width(120)
                  .height(200)
                Column() {
                  Text(item.goods_name)
                    .fontWeight(FontWeight.Bold)
                  Text("¥ "+item.goods_price.toString())
                    .fontColor(Color.Red)
                    .fontWeight(FontWeight.Bold)
                }
                .padding({
                  top: 5,
                  bottom: 5
                })
                .alignItems(HorizontalAlign.Start)
                .justifyContent(FlexAlign.SpaceBetween)
                .height(200)
                .layoutWeight(1)
              }
              .width('100%')
            }
          })
        }
        .padding(20)
      }
      else if(this.tabSelectedIndexes.includes(1)) {
        Grid() {
          ForEach(this.list, (item: GoodItem) => {

GridItem() {
              Column() {
                Image(item.goods_img)
                  .height(200)
                Row({ space: 2 }) {
                  Text("¥ " +item.goods_price)
                    .fontWeight(FontWeight.Bold)
                    .fontColor(Color.Red)
                  Text(item.goods_name)
                    .maxLines(1)
                    .layoutWeight(1)
                    .fontWeight(FontWeight.Bold)
                }
              }
            }
          })
        }
        .columnsGap(20)
        .rowsGap(20)
        .columnsTemplate("1fr 1fr")
        .padding(20)
      }
    }
  }
}

// 750 -UIios  30px * （720/750）
// 720 1080
```

+ 实现切换布局效果

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706081448069-43eb9af1-a62c-445d-96f4-f1d0fa7c0868.png)

```typescript
import { GoodItem } from './models'
import { SegmentButton, SegmentButtonOptions } from '@ohos.arkui.advanced.SegmentButton'

// 750 -UIios  30px * （720/750）
// 720 1080
```

+ key的推荐建议

:::color1
ForEach的第三个属性是一个回调，它是生成唯一key的， 不传的话会帮助我们生成独一无二的key

index_ + JSON.stringify(item)

鸿蒙更新的原理：循环的比较-比较你的key存在不，0_"zhangsan" 如果存在相同的key，则不更新

只改动了某一条数据，可能所有列表都会更新

ForEach的第三个参数 宁可不给 也不要瞎给

:::

:::warning
![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1706082377308-d6810258-dde4-4563-b6a2-bb6870800f06.png)

:::

:::info
如果数组会发生插入，删除的操作，不要使用index作为key的值，不给key渲染也是正常的，但是可能会造成渲染性能降低

:::

+ 下面是使用Index作为key的案例

```typescript
@Entry
@Component
struct Parent {
  @State simpleList: Array<string> = ['one', 'two', 'three'];

build() {
    Column() {
      Button() {
        Text('在第1项后插入新项').fontSize(30)
      }
      .onClick(() => {
        this.simpleList.splice(1, 0, 'new item');
      })

ForEach(this.simpleList, (item: string) => {
        ChildItem({ item: item })
      }, (item: string, index: number) => index.toString())
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}

@Component
struct ChildItem {
  @Prop item: string;

build() {
    Text(this.item)
      .fontSize(30)
  }
}
```

:::info
我们发现虽然数据是正确的,但是由于鸿蒙针对组件的创建原则，因为key值是索引，发现key值存在的组件存在，并不会重新创建，所以会导致数据渲染非预期限制，要想改正这个问题，要保证key的唯一性，去掉key生成器可以保证唯一性

:::

<h1 id="08989310">今日案例-知乎评论</h1>
![](https://cdn.nlark.com/yuque/0/2023/png/8435673/1701338675957-762313a8-7fa1-455f-9891-3897ae1795d9.png)

<h2 id="DcCT1">拆解组件</h2>
+ 新建ZhiHu的文件夹，新建page
+ 新建components, 里面新建 HmNavBar和HmCommentItem

```typescript
@Preview
@Component
struct HmNavBar {
  title: string = "标题"
  build() {
    Row() {
      // 返回键
      Row() {
        Image($r('app.media.ic_public_left_arrow'))
          .width(16)
          .height(16)
      }
      .width(30)
      .height(30)
      .borderRadius(15)
      .backgroundColor("#f4f4f4")
      .justifyContent(FlexAlign.Center)
      .margin({
        left: 20
      })
      Text(this.title)
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
        .margin({
          right: 50
        })
    }
    .width('100%')
    .height(50)
    .border({
      color: "#f4f5f6",
      width: {
        bottom: 1
      }
    })
  }
}
export { HmNavBar }
```

+ HmCommentItem

```typescript
@Component
struct HmCommentItem {
  build() {
    Row({ space: 10 }) {
      Image("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1bad8264-7428-44cf-a92d-3016a2de537b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1711626934&t=5478cb3adef5d3e29e6952934797ca39")
        .width(40)
        .height(40)
        .borderRadius(20)

Column({ space: 10 }) {
        Text("周杰伦")
          .fontColor("#303a43")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

Text("黄河江最近一代都带蓝牙，意大利拌面必须使用42👌钢筋混凝土量子力学")
          .fontColor("#2f3642")
          .lineHeight(22)
        Row() {
          Text("10-21 .IP属地北京")
            .fontColor("#cacaca")
            .fontSize(12)

Row({ space: 4 }) {
            Image($r("app.media.ic_public_like"))
              .width(12)
              .height(12)
              .fillColor("#cacaca")

Text("100")
              .fontColor("#cacaca")
              .fontSize(12)

}
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)

}
    .alignItems(VerticalAlign.Top)
    .padding(20)
    .width('100%')
  }
}
export { HmCommentItem }
```

+ 在components/index.ets统一导出

```typescript
export * from './HmCommentItem'
export * from './HmNavBar'
```

+ 在ZhiHU/ZHihu.ets中使用

```typescript
import { HmCommentItem, HmNavBar } from './components'

@Entry
@Component
struct ZhiHu {
  build() {
   Column() {
     HmNavBar({ title: '评论回复'  })
     HmCommentItem()
     Divider().strokeWidth(6)
     Row() {
       Text("评论数50")
     }
     .width('100%')
     .height(50)
     .padding({
       left: 20
     })
     .border({
       color: '#f3f4f5',
       width: {
         bottom: 1
       }
     })
     ForEach([1,2,3,4,5,6], () => {
       HmCommentItem()
     })
   }
  }
}
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709215387268-1215329b-2ece-4014-9582-0d65ac932892.png)

:::color1
注意：剩下讲义会按照上方的内容进行再次调整

:::

:::color1
需要出现滚动区域。

使用了List组件，子组件必须有ListItem/ListItemGroup

:::

```typescript
 List() {
       ForEach([1,2,3,4,5,6], () => {
         ListItem() {
           HmCommentItem()
         }
       })
     }.layoutWeight(1)
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709361733764-fa0c8989-feff-42da-bbee-654ce199cf4e.png)

:::color1
在ZhiHu/models/index.ets下建立如下类型

:::

+ 定义一个评论的interface

```typescript
export interface ReplyItem {
  avatar: ResourceStr // 头像
  author: string   // 作者
  id: number  // 评论的id
  content: string // 评论内容
  time: string // 发表时间
  area: string // 地区
  likeNum: number // 点赞数量
  likeFlag: boolean | null // 当前用户是否点过赞
}
```

:::info
用i2c生成对应的class

+ 同学们我们前面的循环为什么没有用i2c，直接用的接口呢，因为这里涉及到后续的点赞和其他业务，所以这里直接用class更新起来会更方便

:::

```typescript
export class ReplyItemModel implements ReplyItem {
  id: number = 0
  avatar: string | Resource = ''
  author: string = ''
  content: string = ''
  time: string = ''
  area: string = ''
  likeNum: number = 0
  likeFlag: boolean | null = null

constructor(model: ReplyItem) {
    this.id = model.id
    this.avatar = model.avatar
    this.author = model.author
    this.content = model.content
    this.time = model.time
    this.area = model.area
    this.likeNum = model.likeNum
    this.likeFlag = model.likeFlag
  }
}
```

+ 定义一个评论列表数据- 在Entry组件中

:::info
因为我们需要的是class对象，所以每个对象都需要new一下

:::

```typescript
 @State commentList: ReplyItemModel[] = [
   new ReplyItemModel({
     id: 1,
     avatar: 'https://picx.zhimg.com/027729d02bdf060e24973c3726fea9da_l.jpg?source=06d4cd63',
     author: '偏执狂-妄想家',
     content: '更何况还分到一个摩洛哥[惊喜]',
     time: '11-30',
     area: '海南',
     likeNum: 34,
     likeFlag: false
   }) ,
    new ReplyItemModel({
      id: 2,
      avatar: 'https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source=32738c0c',
      author: 'William',
      content: '当年希腊可是把1：0发挥到极致了',
      time: '11-29',
      area: '北京',
      likeNum: 58,
      likeFlag: false
    }),
    new ReplyItemModel({
      id: 3,
      avatar: 'https://picx.zhimg.com/v2-e6f4605c16e4378572a96dad7eaaf2b0_l.jpg?source=06d4cd63',
      author: 'Andy Garcia',
      content: '欧洲杯其实16队球队打正赛已经差不多，24队打正赛意味着正赛阶段在小组赛一样有弱队。',
      time: '11-28',
      area: '上海',
      likeNum: 10,
      likeFlag: false
    }),
    new ReplyItemModel({
      id: 4,
      avatar: 'https://picx.zhimg.com/v2-53e7cf84228e26f419d924c2bf8d5d70_l.jpg?source=06d4cd63',
      author: '正宗好鱼头',
      content: '确实眼红啊，亚洲就没这种球队，让中国队刷',
      time: '11-27',
      area: '香港',
      likeNum: 139,
      likeFlag: false
    }),
    new ReplyItemModel({
      id: 5,
      avatar: 'https://pic1.zhimg.com/v2-eeddfaae049df2a407ff37540894c8ce_l.jpg?source=06d4cd63',
      author: '柱子哥',
      content: '我是支持扩大的，亚洲杯欧洲杯扩到32队，世界杯扩到64队才是好的，世界上有超过200支队伍，欧洲区55支队伍，亚洲区47支队伍，即使如此也就六成出现率',
      time: '11-27',
      area: '旧金山',
      likeNum: 29,
      likeFlag: false
    }),
    new ReplyItemModel({
      id: 6,
      avatar: 'https://picx.zhimg.com/v2-fab3da929232ae911e92bf8137d11f3a_l.jpg?source=06d4cd63',
      author: '飞轩逸',
      content: '禁止欧洲杯扩军之前，应该先禁止世界杯扩军，或者至少把亚洲名额一半给欧洲。',
      time: '11-26',
      area: '里约',
      likeNum: 100,
      likeFlag: false
    })
  ]

```

+ 在主页中渲染

```typescript
 List() {
       ForEach(this.commentList, (item: ReplyItemModel) => {
         ListItem() {
           HmCommentItem({ item })
         }
       })
     }.layoutWeight(1)
```

+ CommentItem组件接收传入数据

```typescript
import { ReplyItem, ReplyItemModel } from '../models'

@Component
struct HmCommentItem {
  // 接收渲染的选项
  item: ReplyItemModel = new ReplyItemModel({} as ReplyItem) // 初始值 只是为了语法不报错

build() {
    Row({ space: 10 }) {
      Image(this.item.avatar)
        .width(40)
        .height(40)
        .borderRadius(20)

Column({ space: 10 }) {
        Text(this.item.author)
          .fontColor("#303a43")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

Text(this.item.content)
          .fontColor("#2f3642")
          .lineHeight(22)
        Row() {
          Text(`${this.item.time} .IP属地${this.item.area}`)
            .fontColor("#cacaca")
            .fontSize(12)

Row({ space: 4 }) {
            Image($r("app.media.ic_public_like"))
              .width(12)
              .height(12)
              .fillColor("#cacaca")

Text(this.item.likeNum.toString())
              .fontColor("#cacaca")
              .fontSize(12)

}
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)

}
    .alignItems(VerticalAlign.Top)
    .padding(20)
    .width('100%')
  }
}
export { HmCommentItem }
```

+ 顶部组件同样需要new 对象传入过去

```typescript
 HmCommentItem({
        item: new ReplyItemModel({
          id: 999,
          author: '周杰伦',
          avatar: $r("app.media.10"),
          likeNum: 10,
          likeFlag: false,
          time: '03-02',
          area: '北京',
          content: '人到了一定的年龄新陈代谢就慢了，吃了胖不吃瘦了皱纹就多，要靠锻炼 '
        })
     })
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709363881259-5c5ef31e-c8ce-4c08-a42c-8490fd03f13a.png)

<h2 id="69331573"> 底部回复按钮</h2>
:::color1
封装底部的回复组件

Zhihu/components/HmReplyInput.ets

:::

```typescript
@Component
struct HmReplyInput {
  @State
  content: string = ""
  build() {
   Row({ space: 10 }) {
     TextInput({ text: $$this.content, placeholder: '～请留下您的神评论' })
       .layoutWeight(1)
       .height(40)
     Button("发布")
   }
   .padding({ left: 10, right: 10 })
    .width('100%')
    .height(60)
  }
}
export { HmReplyInput }
```

+ 组件在主页中使用

```typescript
 List() {
       ForEach(this.commentList, (item: ReplyItemModel) => {
         ListItem() {
           HmCommentItem({ item })
         }
       })
     }.layoutWeight(1)
     HmReplyInput()  // 在此刻显示
```

<h2 id="27646377">实现点赞</h2>
:::color1
子组件如何调用父组件的函数

:::

+ 子组件要声明一个函数

```typescript
test: () => void = () => {}  // test:变量类型 = 初始值
```

+ 父组件需要给子组件传入这个参数

```typescript
Child({
  test: () => {
    this.abc()
  }
})
```

+ 实现点赞

```typescript
  changeLike: () => void = () => {}

```

+ 注册点击事件

```typescript
 Row({ space: 4 }) {
            Image($r("app.media.ic_public_like"))
              .width(12)
              .height(12)
              .fillColor(this.item.likeFlag ? Color.Red : "#cacaca")

Text(this.item.likeNum.toString())
              .fontColor(this.item.likeFlag ? Color.Red :"#cacaca")
              .fontSize(12)
          }
          .onClick(() => {
            this.changeLike()
          })
```

+ 父组件定义函数，传入函数

```typescript
changeLike (item: ReplyItemModel) {
    // 需要拿到点击的数据 拿到数据更新数据即可
   // item.likeNum
   // item.likeFlag
    if(item.likeFlag) {
      // 点过赞
      item.likeNum--
    }
    else {
      // 没有点过赞
      item.likeNum++
    }
    item.likeFlag = !item.likeFlag // 取反
    // State的修饰符的更新机制
    // 只能监测到第一层
   const index = this.commentList.findIndex(obj => obj.id === item.id)
   //this.commentList[index] = item // 这么写为什么不行 // 引用类型 基础类型
    this.commentList[index] = new ReplyItemModel(item)
  }

```

+ 传入子组件

```typescript
List() {
       ForEach(this.commentList, (item: ReplyItemModel) => {
         ListItem() {
           HmCommentItem({
             item,
             changeLike: () => {
               this.changeLike(item)
             }
           })
         }
       })
     }.layoutWeight(1)
```

:::color1
更新的秘密

+ 鸿蒙里面的所有的更新都只能监测到一层的更新
+ 如果要更新数组里面的某一项的话
+ this.list[index] = 新值
+ this.list.splice(index, 1, 新值)

:::

+ 关于key的秘密

:::color1
尝试给了一个id作为key，为什么没有更新

因为鸿蒙会根据key的不同来更新的内容，如果key前后一样，它认为你没有变，那就不更新

:::

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709367491842-74d10e73-55cb-4cb0-a985-72eadbeafc12.png)

:::color1
提交代码

:::

<h2 id="SaxaV">顶部的点赞</h2>
+ 将顶部的数据抽提出来

```typescript
  @State
  showTop: boolean = true
@State
  currentComment: ReplyItemModel = new ReplyItemModel({
    id: 999,
    author: '周杰伦',
    avatar: $r("app.media.10"),
    likeNum: 10,
    likeFlag: false,
    time: '03-02',
    area: '北京',
    content: '人到了一定的年龄新陈代谢就慢了，吃了胖不吃瘦了皱纹就多，要靠锻炼 '
  })
```

+ 赋值

```typescript
 if(this.showTop) {
       HmCommentItem({
         item: this.currentComment,
         changeLike: () => {
           this.changeLike(this.currentComment, "top")
           this.showTop = false
           setTimeout(() => {
             this.showTop = true
           }, 100)
         }
       })
     }
```

+ 改造点赞的方法

```typescript
changeLike (item: ReplyItemModel, type?: "top" | "bottom") {
    // 需要拿到点击的数据 拿到数据更新数据即可
   // item.likeNum
   // item.likeFlag
    if(item.likeFlag) {
      // 点过赞
      item.likeNum--
    }
    else {
      // 没有点过赞
      item.likeNum++
    }
    item.likeFlag = !item.likeFlag // 取反
    // promptAction.showToast({ message: JSON.stringify(item), duration: 300000 })
    if(type !== "top") {
      // State的修饰符的更新机制
      // 只能监测到第一层
      const index = this.commentList.findIndex(obj => obj.id === item.id)
      //this.commentList[index] = item // 这么写为什么不行 // 引用类型 基础类型
      //  this.commentList[index] = new ReplyItemModel(item)
      this.commentList.splice(index, 1, new ReplyItemModel(item))
    }
  }
```

:::color1
提交代码

:::

<h2 id="zmEFG"> 回复评论</h2>
+ 底部输入组件双向绑定

```typescript
import { promptAction } from '@kit.ArkUI'

@Component
struct HmReplyInput {
  @State
  content: string = ""
  publishComment: (content: string) => void = () => {}
  build() {
   Row({ space: 10 }) {
     TextInput({ text: $$this.content, placeholder: '～请留下您的神评论' })
       .layoutWeight(1)
       .height(40)
       .onSubmit(() => {
         // 键盘的确定事件
         if(this.content) {
           this.publishComment(this.content)
           this.content = ""
         }
       })
     Button("发布")
       .onClick(() => {
           if(this.content) {
             this.publishComment(this.content)
             this.content = ""
           }
       })
   }
   .padding({ left: 10, right: 10 })
    .width('100%')
    .height(60)
  }
}

export { HmReplyInput }
```

+ 调用父组件传入的publishComment的方法
+ 父组件实现的方法

```typescript
addComment(content: string) {
     this.commentList.unshift(new ReplyItemModel({
       id: Math.random() ,
       avatar: 'https://himg.bdimg.com/sys/portrait/item/wise.1.3fc8ac5e.MTar_0xb4T0GUwCGjsY2Cg.jpg?time=2219&tieba_portrait_time=2219&',
       author: '老高',
       content,
       time: `${(new Date().getMonth() + 1).toString().padStart(2, "0")}-${new Date().getDate().toString().padStart(2,  "0")}`,
       area: '北京',
       likeNum: 0,
       likeFlag: false
     }))

// 控制滚动条
    this.scroller.scrollEdge(Edge.Top)
  }
```

+ 实现传入方法

```typescript
  HmReplyInput({
       publishComment: (content: string) => {
          this.addComment(content)
       }
     })
```

+ 实现滚动顶部

```typescript
 List({ scroller: this.scroller })
```

![](https://cdn.nlark.com/yuque/0/2024/png/8435673/1709370145731-60d47c50-60e7-4690-b0a4-5dd4b045ac1c.png)

Geekwaner/Hm-Markdown

简介

发行版

贡献者

近期动态

Geekwaner/Hm-Markdown .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Geekwaner/Hm-Markdown