【鸿蒙底子系列】鸿蒙底子组件

作者简介：一名大三在校生，喜好编程
个人主页：Aic山鱼
WeChat：z7010cyy
系列专栏：️
  

   

• 前端-JS底子专栏✨   
  
• 前端-Vue框架专栏✨✨   
  
• Aic山鱼   
  
• 前端-风趣殊效专栏❤️‍❤️‍❤️‍   
  
• 鸿蒙OS专栏（更新中）
            铭句：将全部微不敷道的瞬间编织起来，你将得到绝伦壮丽的宇宙
  
  博主保举： "近期我偶尔邂逅了一个极为出色的人工智能学习平台，它不但内容深入浅出，解说方式还风趣幽默，让人学习起来既轻松又高效。云云宝藏资源，我如饥似渴想要与各位共享。马上点击让我们一起进入这个出色纷呈的学习网站吧！"​​​​​​​  
  

  目次
弁言
鸿蒙底子组件概述
ArkTS与TypeScript/JavaScript的区别
组件底子
1. 组件布局
3. Component修饰符
4. build函数
5. 组件属性与方法
6. @Prop和@Link装饰器
常用底子组件
1. Text组件
二、Image组件样式设置
2.1 图片缩放
2.3 边框与圆角

---

弁言

   鸿蒙（HarmonyOS）作为华为推出的新一代操纵体系，旨在构建万物互联的智能天下。在鸿蒙体系的开辟过程中，底子组件是构建丰富、动态用户界面的基石。本文将先容鸿蒙底子组件的根本概念、分类以及常用组件的利用方法，资助开辟者快速上手鸿蒙应用开辟。
  鸿蒙底子组件概述

组件（Component）是鸿蒙体系ArkUI声明式开辟范式中界面搭建与体现的最小单元。鸿蒙体系为开辟者提供了丰富多样的UI组件，这些组件可以根据功能分为五大类：底子组件、容器组件、媒体组件、绘制组件和画布组件。底子组件是视图层的根本构成单元，包罗Text、Image、TextInput、Button等，它们是构建用户界面的底子。
ArkTS与TypeScript/JavaScript的区别

ArkTS（Ark TypeScript）是HarmonyOS优选的主力应用开辟语言，它在TypeScript（TS）的底子上举行了进一步扩展，继续了TS的全部特性，是TS的超集。然而，为了增长语言的规范性并克制不须要的运行开销，ArkTS在TS/JS的底子上增长了一些束缚：

  

• 不支持Symbol() API：限定了某些高级特性的利用。  
  
• 不支持索引访问字段：增强了范例安全性。  
  
• 不支持delete运算符：限定了对象的动态修改。  
  
• 仅允许在表达式中利用typeof运算符：限定了范例查抄的场景。  
  
• 不支持in运算符：限定了属性的动态查抄。  
  
• 限定利用标准库：确保语言的划一性和安全性。
  

别的，ArkTS还具备强大的拓展本领，支持界说声明式UI、自界说组件、动态扩展UI元素，并提供ArkUI体系组件及其事故、方法和属性，共同构成了UI开辟的主体。
组件底子

1. 组件布局

鸿蒙体系的组件通常通过@Component修饰符来界说。一个组件必须包罗一个build函数，该函数用于形貌组件的UI布局。比方：
  

1. @Component  
2. struct MyComponent {  
3.     build() {  
4.         // UI描述  
5.         Row() {  
6.             Text('Hello, HarmonyOS!')  
7.         }  
8.     }  
9. }

复制代码

2. struct自界说组件
struct关键字用于形貌UI，包罗UI的全部信息，但不能有继续关系或重名。自界说组件的struct必须被@Component或@CustomDialog等修饰符修饰。
3. Component修饰符

@Component装饰器只能修饰struct关键字声明的数据布局，使其具有组件形貌渲染本领。被修饰的struct须要实现build函数，以链式调用的方式形貌UI。
4. build函数

build函数是组件的焦点，用于界说组件的UI形貌。在build函数中，开辟者可以调用各种体系组件来构建UI界面。build函数的根节点必须为容器组件，且必须唯一。
5. 组件属性与方法

自界说组件还可以包罗其他成员函数和属性，但这些成员函数和属性有肯定的束缚：

  

• 不支持静态函数和静态成员变量。  
  
• 全部成员变量都是私有的，访问规则与成员函数的访问规则雷同。  
  
• 成员变量的初始化可以是可选的，具体取决于是否须要从父组件通过参数通报。