OpenHarmony开发者论坛

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

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

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

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

## 开发环境准备

- DevEco Studio 5.0.3
- HarmonyOS Next API 15

## 布局基础对比

在Web开发中，我们使用CSS来控制元素的布局和样式。而在HarmonyOS的ArkUI中，我们使用声明式UI和链式API来实现相同的效果。本文将对比两种框架在布局方面的异同。

### 盒子模型

在Web开发中，CSS盒子模型包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。
在ArkUI中，这些概念依然存在，只是写法有所不同，容易上手。

**HTML/CSS代码：**

```html
<div class="box">
  盒子模型
</div>

<style>
  .box {
box-sizing: border-box;
/* 内容 */
width: 150px;
height: 100px;
/* 内边距 */
padding: 10px;
/* 边框 */
border: 10px solid pink;
/* 底部外边距 */
margin-bottom: 10px;
  }
</style>
```

**ArkUI代码：**

```typescript
Text('盒子模型')
  .width(150)
  .height(100)
  .padding(10)
  .border({ width: 10, style: BorderStyle.Solid, color: Color.Pink })
  .margin({ bottom: 10 })
```

### 背景色和文字颜色

在Web开发中，我们使用 `background-color` 和 `color` 属性来设置背景色和文字颜色。
在ArkUI中，我们使用 `backgroundColor` 和 `fontColor` 方法。

**HTML/CSS代码：**

```html
<div class="box">
  背景色、文字色
</div>

<style>
  .box {
/* 背景色 */
background-color: #36d;
/* 文字色 */
color: #fff;
  }
</style>
```

**ArkUI代码：**

```typescript
Text('背景色、文字色')
  .backgroundColor('#36d')
  .fontColor('#fff')
```

### 内容居中

在Web开发中，我们使用 `display: flex` 配合 `justify-content` 和 `align-items` 实现内容居中。
在ArkUI中，我们可以使用 `Column` 或 `Row` 组件配合 `justifyContent` 和 `alignItems` 属性。

**HTML/CSS代码：**

```html
<div class="box">
  内容居中
</div>

<style>
  .box {
display: flex;
justify-content: center;
align-items: center;
  }
</style>
```

**ArkUI代码：**

```typescript
Column() {
  Text('内容居中')
}
.backgroundColor('#36D')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.width(150)
.height(100)
.padding(10)
```

### 圆角

在Web开发中，我们使用 `border-radius`属性来设置圆角。
在ArkUI中，我们使用 `borderRadius`方法。

**HTML/CSS代码：**

```html
<div class="box">
  圆角
</div>

<style>
  .box {
border-radius: 10px;
  }
</style>
```

**ArkUI代码：**

```typescript
Text('圆角')
  .width(150)
  .height(100)
  .backgroundColor('#36D')
  .borderRadius(10)
```

### 阴影效果

在Web开发中，我们使用 `box-shadow`属性来设置阴影效果。
在ArkUI中，我们使用 `shadow`方法。

**HTML/CSS代码：**

```html
<div class="box">
  阴影
</div>

<style>
  .box {
box-shadow: 0 6px 50px rgba(0, 0, 0, 0.5);
  }
</style>
```

**ArkUI代码：**

```typescript
Text('阴影')
  .width(150)
  .height(100)
  .backgroundColor('#F5F5F5')
  .shadow({
offsetX: 0,
offsetY: 6,
radius: 50,
color: 'rgba(0, 0, 0, 0.5)',
  })
```

## 布局容器和轴向

### 基本容器

在Web开发中，我们使用 `<div>`作为通用容器。
在ArkUI中，我们主要使用 `Column`和 `Row`组件，注意 `alignItems` 需区分轴向。

**HTML/CSS代码：**

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

<div class="row">
  
</div>

<style>
  .column {
display: flex;
flex-direction: column;
align-items: center;
  }

  .row {
display: flex;
flex-direction: row;
align-items: center;
  }
</style>
```

**ArkUI代码：**

```typescript
Column() {
  // 垂直方向布局，交叉轴水平居中
}
.alignItems(HorizontalAlign.Center)

Row() {
  // 水平方向布局，交叉轴垂直居中
}
.alignItems(VerticalAlign.Center)
```

## 关键区别总结

1. **样式应用方式**：

- HTML/CSS：使用选择器和属性声明样式
- ArkUI：使用链式API直接在组件上设置样式
2. **布局容器**：

- HTML：使用 `<div>` 等标签，配合CSS实现布局
- ArkUI：使用专门的布局组件如 `Column`、`Row` 等组件，配合样式属性布局
3. **单位使用**：

- HTML/CSS：使用 px、em、rem、百分比等单位
- ArkUI：使用 px、vp、lpx 、百分比等单位，使用数字单位 vp 可省略
4. **样式继承**：

- HTML/CSS：通过CSS选择器实现样式继承
- ArkUI：**没有样式继承**

## 学习建议

1. **理解链式API**：

- 熟悉ArkUI的链式API调用方式
- 掌握常用样式方法的命名规则
2. **布局思维转变**：

- 从CSS盒模型思维转向组件化思维
- 理解ArkUI的布局容器特性
3. **样式设置习惯**：

- 养成使用链式API设置样式的习惯
- 注意样式方法的参数格式
4. **组件嵌套**：

- 合理使用组件嵌套实现复杂布局
- 注意组件的父子关系

## 总结

作为Web开发者，迁移到 HarmonyOS 开发需要适应新的布局和样式设置方式。概念其实非常相似，通过理解这些差异，并掌握ArkUI的组件化开发方式，Web开发者可以快速上手HarmonyOS开发。

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

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