给Web开发者的HarmonyOS指南01-文本样式

天狼啸月

给Web开发者的HarmonyOS指南01-文本样式

本系列教程适合 HarmonyOS 初学者，为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。

本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。

开发环境准备

DevEco Studio 5.0.3HarmonyOS Next API 15

页面结构 HTML 与 ArkUI

在 Web 开发中，HTML 文档结构由 、和 等标签组成，其中 标签包含了页面中所有可见的内容。
而在 HarmonyOS 的 ArkUI 框架中，使用 @Entry和 @Component装饰器定义组件，并通过 build()方法定义页面内容。
基本结构对比

HTML文档结构：

4.   
5.   
6.   页面标题
9.   

复制代码

ArkUI组件结构：

1. @Entry
2. @Component
3. struct MyComponent {
4.   build() {
5.     // 页面内容放这里
6.   }
7. }

复制代码

文本处理对比

在Web开发中，我们习惯使用各种HTML标签来表示不同语义的文本内容，例如标题、段落、强调等。
而在HarmonyOS的ArkUI中，文本处理方式有所不同，主要依赖 Text 组件和 Span 组件。
基本概念对比

HTML概念	HarmonyOS/ArkUI概念
语义化标签 (h1-h6, p等)	无需语义化标签，统一使用Text组件
标签嵌套	组件链式调用和嵌套
样式通过CSS设置	样式通过链式API设置
内联样式	直接在组件后链式调用样式方法

文本显示对比

下面通过具体示例对比HTML和ArkUI的文本显示方式：
1. 标题和段落

HTML代码：

1. 我是一级标题
2. 我是二级标题
3. 我是三级标题
4. 我是四级标题
5. 我是五级标题
6. 我是六级标题
7. 我是一个段落我被换行了

复制代码

ArkUI代码：

1. // 鸿蒙系统中没有语义化标签的概念
2. // 所有文本都使用Text组件，通过样式区分不同级别
3. Text('我是一级标题')
4.   .fontSize(32) // 通过字体大小区分标题级别
5.   .fontWeight(FontWeight.Bold)
7. Text('我是二级标题')
8.   .fontSize(24)
9.   .fontWeight(FontWeight.Bold)
11. // 以此类推...
13. // 段落和换行
14. Text('我是一个段落\n我被换行了')
15. // 注意：在ArkUI中使用\n实现换行，而不是标签

复制代码

2. 文本样式

HTML代码：

1. 我是加粗的
2. 我是倾斜的
3. 我是删除线的
4. 我是下划线的

复制代码

ArkUI代码：

1. // 在ArkUI中，样式化的文本使用Text和Span组合实现
2. Text() {
3.   Span('我是')
4.   Span('加粗')
5.     .fontWeight(FontWeight.Bold) // 对应HTML的
6.   Span('的文本')
7. }
9. Text() {
10.   Span('我是')
11.   Span('倾斜')
12.     .fontStyle(FontStyle.Italic) // 对应HTML的
13.   Span('的文本')
14. }
16. Text() {
17.   Span('我是')
18.   Span('删除线')
19.     .decoration({ type: TextDecorationType.LineThrough }) // 对应HTML的
20.   Span('的文本')
21. }
23. Text() {
24.   Span('我是')
25.   Span('下划线')
26.     .decoration({ type: TextDecorationType.Underline }) // 对应HTML的
27.   Span('的文本')
28. }

复制代码

布局容器

在HTML中，我们使用  作为通用容器来组织内容。
在ArkUI中，主要使用 Column 和 Row 等容器。
HTML代码：

2.   
6.   * {
7.     margin: 0;
8.     padding: 0;
9.     /* 为了与 ArkUI 盒子模型保持一致，所有 HTML 元素的 CSS 盒模型被设置为 border-box */
10.     box-sizing: border-box;
11.   }
13.   .column{
14.     display: flex;
15.     flex-direction: column;
16.     gap: 10px;
17.     width: 100%;
18.     height: 100%;
19.     align-items: center;
20.   }

复制代码

ArkUI代码：

1. // 默认为纵向排列的容器，类似于CSS的flex-direction: column
2. Column({ space: 10 }) { // space参数设置子组件之间的间距，类似CSS的gap
3.   // 内容放这里
4. }
5. .width('100%') // 设置宽度，链式API调用
6. .height('100%') // 设置高度
7. .alignItems(HorizontalAlign.Center) // 水平对齐方式，类似CSS的align-items

复制代码

关键区别总结

组件化思维：

HTML使用标签表示不同语义ArkUI使用组件表示UI元素，不强调语义

样式应用方式：

HTML/CSS分离内容和样式ArkUI使用链式API直接在组件上设置样式

布局方式：

HTML依赖CSS盒模型和FlexboxArkUI内置容器组件如Column、Row实现布局

语法结构：

HTML使用开闭标签和属性ArkUI使用TypeScript语法和方法链

学习建议

理解组件化思维：将HTML标签概念转变为组件概念掌握ArkUI基础组件：

Text：文本组件Span：文本片段Column：纵向容器Row：横向容器

链式API调用习惯：样式设置通过链式方法调用而非CSS属性布局思维转变：使用容器组件的嵌套来实现复杂布局

总结

作为Web开发者，迁移到HarmonyOS开发需要转变思维模式，从标签和CSS的分离到组件和链式API的结合。虽然语法不同，但概念是相通的。只要掌握了基本对应关系，Web开发者能够快速适应HarmonyOS开发。
希望这篇 HarmonyOS Next 教程对你有所帮助，期待您的 👍点赞、💬评论、🌟收藏 支持。