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

给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代码:

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-colorcolor 属性来设置背景色和文字颜色。 在ArkUI中,我们使用 backgroundColorfontColor 方法。

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-contentalign-items 实现内容居中。 在ArkUI中,我们可以使用 ColumnRow 组件配合 justifyContentalignItems 属性。

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中,我们主要使用ColumnRow组件,注意 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:使用专门的布局组件如 ColumnRow 等组件,配合样式属性布局
  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 教程对你有所帮助,期待您的 👍点赞、💬评论、🌟收藏 支持。

相关推荐
斯~内克1 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道1 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
dr李四维1 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久1 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain2 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏2 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
GISer_Jing2 小时前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ2 小时前
React(九)React Hooks
前端·react.js
拉不动的猪3 小时前
vue与react的简单问答
前端·javascript·面试