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

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

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

开发环境准备

• DevEco Studio 5.0.3
• HarmonyOS Next API 15

页面结构 HTML 与 ArkUI

在 Web 开发中，HTML 文档结构由、和等标签组成，其中标签包含了页面中所有可见的内容。

而在 HarmonyOS 的 ArkUI 框架中，使用@Entry和@Component装饰器定义组件，并通过build()方法定义页面内容。

基本结构对比

HTML文档结构：

ArkUI组件结构：

@Entry
@Component
struct MyComponent {
  build() {
  	// 页面内容放这里
  }
}

文本处理对比

在Web开发中，我们习惯使用各种HTML标签来表示不同语义的文本内容，例如标题、段落、强调等。

而在HarmonyOS的ArkUI中，文本处理方式有所不同，主要依赖 Text 组件和 Span 组件。

基本概念对比

文本显示对比

下面通过具体示例对比HTML和ArkUI的文本显示方式：

1. 标题和段落

HTML代码：

我是一级标题
我是二级标题
我是三级标题
我是四级标题
我是五级标题
我是六级标题
我是一个段落
我被换行了

ArkUI代码：

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

2. 文本样式

HTML代码：

我是加粗的
我是倾斜的
我是删除线的
我是下划线的

ArkUI代码：

// 在ArkUI中，样式化的文本使用Text和Span组合实现
Text() {
  Span('我是')
  Span('加粗')
    .fontWeight(FontWeight.Bold) // 对应HTML的
  Span('的文本')
}

Text() {
  Span('我是')
  Span('倾斜')
    .fontStyle(FontStyle.Italic) // 对应HTML的
  Span('的文本')
}

Text() {
  Span('我是')
  Span('删除线')
    .decoration({ type: TextDecorationType.LineThrough }) // 对应HTML的
  Span('的文本')
}

Text() {
  Span('我是')
  Span('下划线')
    .decoration({ type: TextDecorationType.Underline }) // 对应HTML的
  Span('的文本')
}

布局容器

在HTML中，我们使用

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