给 Web 开发者的 HarmonyOS 指南 02- 布局样式

作者：苏杰豪

2025-03-26
北京
本文字数：2032 字
阅读完需：约 7 分钟

给 Web 开发者的 HarmonyOS 指南 02-布局样式

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

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

布局基础对比

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

盒子模型

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

HTML/CSS 代码：

<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 代码：

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 代码：

<div class="box">  背景色、文字色</div>
<style>  .box {    /* 背景色 */    background-color: #36d;    /* 文字色 */    color: #fff;  }</style>

复制代码

ArkUI 代码：

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

复制代码

内容居中

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

HTML/CSS 代码：

<div class="box">  内容居中</div>
<style>  .box {    display: flex;    justify-content: center;    align-items: center;  }</style>

复制代码

ArkUI 代码：

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

复制代码

圆角

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

HTML/CSS 代码：

<div class="box">  圆角</div>
<style>  .box {    border-radius: 10px;  }</style>

复制代码

ArkUI 代码：

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

复制代码

阴影效果

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

HTML/CSS 代码：

<div class="box">  阴影</div>
<style>  .box {    box-shadow: 0 6px 50px rgba(0, 0, 0, 0.5);  }</style>

复制代码

ArkUI 代码：

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 代码：

<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 代码：

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

复制代码

关键区别总结

样式应用方式：
HTML/CSS：使用选择器和属性声明样式
ArkUI：使用链式 API 直接在组件上设置样式
布局容器：
HTML：使用 <div> 等标签，配合 CSS 实现布局
ArkUI：使用专门的布局组件如 Column、Row 等组件，配合样式属性布局
单位使用：
HTML/CSS：使用 px、em、rem、百分比等单位
ArkUI：使用 px、vp、lpx 、百分比等单位，使用数字单位 vp 可省略
样式继承：
HTML/CSS：通过 CSS 选择器实现样式继承
ArkUI：没有样式继承

学习建议

理解链式 API：
熟悉 ArkUI 的链式 API 调用方式
掌握常用样式方法的命名规则
布局思维转变：
从 CSS 盒模型思维转向组件化思维
理解 ArkUI 的布局容器特性
样式设置习惯：
养成使用链式 API 设置样式的习惯
注意样式方法的参数格式
组件嵌套：
合理使用组件嵌套实现复杂布局
注意组件的父子关系

总结

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

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

发布于: 3 小时前阅读数: 9

原文链接:【http://xie.infoq.cn/article/6de4952232bb8f918bb691b8c】。文章转载请联系作者。

苏杰豪

关注

鸿蒙很开门～ 2019-03-30 加入

传智教育、黑马程序员课程研究员

发布

暂无评论

创作场景

给 Web 开发者的 HarmonyOS 指南 02- 布局样式

给 Web 开发者的 HarmonyOS 指南 02-布局样式

布局基础对比

盒子模型

背景色和文字颜色

内容居中

圆角

阴影效果

布局容器和轴向

基本容器

关键区别总结

学习建议

总结

苏杰豪

评论