OpenHarmony开发者论坛

标题: 给Web开发者的HarmonyOS指南01-文本样式 [打印本页]

作者: 苏杰豪 时间: 2025-3-27 03:27
标题: 给Web开发者的HarmonyOS指南01-文本样式
[md]# 给Web开发者的HarmonyOS指南01-文本样式

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

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

## 开发环境准备

- DevEco Studio 5.0.3
- HarmonyOS Next API 15

## 页面结构 HTML 与 ArkUI

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

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

### 基本结构对比

**HTML文档结构：**

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
</head>
<body>
  
</body>
</html>
```

**ArkUI组件结构：**

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

## 文本处理对比

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

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

### 基本概念对比

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

### 文本显示对比

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

#### 1. 标题和段落

**HTML代码：**

```html
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<p>我是一个段落<br>我被换行了</p>
```

**ArkUI代码：**

```typescript
// 鸿蒙系统中没有语义化标签的概念
// 所有文本都使用Text组件，通过样式区分不同级别
Text('我是一级标题')
  .fontSize(32) // 通过字体大小区分标题级别
  .fontWeight(FontWeight.Bold)

Text('我是二级标题')
  .fontSize(24)
  .fontWeight(FontWeight.Bold)

// 以此类推...

// 段落和换行
Text('我是一个段落\n我被换行了')
// 注意：在ArkUI中使用\n实现换行，而不是<br>标签
```

#### 2. 文本样式

**HTML代码：**

```html
<p>我是<strong>加粗</strong>的</p>
<p>我是<em>倾斜</em>的</p>
<p>我是<del>删除线</del>的</p>
<p>我是<ins>下划线</ins>的</p>
```

**ArkUI代码：**

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

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

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

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

### 布局容器

在HTML中，我们使用 `<div>` 作为通用容器来组织内容。

在ArkUI中，主要使用 `Column` 和 `Row` 等容器。

**HTML代码：**

```html
<div class="column">
  
</div>

<style>
  * {
margin: 0;
padding: 0;
/* 为了与 ArkUI 盒子模型保持一致，所有 HTML 元素的 CSS 盒模型被设置为 border-box */
box-sizing: border-box;
  }

  .column{
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
height: 100%;
align-items: center;
  }
</style>
```

**ArkUI代码：**

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

## 关键区别总结

1. **组件化思维**：
- HTML使用标签表示不同语义
- ArkUI使用组件表示UI元素，不强调语义
2. **样式应用方式**：
- HTML/CSS分离内容和样式
- ArkUI使用链式API直接在组件上设置样式
3. **布局方式**：
- HTML依赖CSS盒模型和Flexbox
- ArkUI内置容器组件如Column、Row实现布局
4. **语法结构**：
- HTML使用开闭标签和属性
- ArkUI使用TypeScript语法和方法链

## 学习建议

1. **理解组件化思维**：将HTML标签概念转变为组件概念
2. **掌握ArkUI基础组件**：
- Text：文本组件
- Span：文本片段
- Column：纵向容器
- Row：横向容器
3. **链式API调用习惯**：样式设置通过链式方法调用而非CSS属性
4. **布局思维转变**：使用容器组件的嵌套来实现复杂布局

## 总结

作为Web开发者，迁移到HarmonyOS开发需要转变思维模式，从标签和CSS的分离到组件和链式API的结合。虽然语法不同，但概念是相通的。只要掌握了基本对应关系，Web开发者能够快速适应HarmonyOS开发。

希望这篇 HarmonyOS Next 教程对你有所帮助，期待您的 👍点赞、💬评论、🌟收藏支持。
[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)