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

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

1.   盒子模型

复制代码

ArkUI代码：

1. Text('盒子模型')
2.   .width(150)
3.   .height(100)
4.   .padding(10)
5.   .border({ width: 10, style: BorderStyle.Solid, color: Color.Pink })
6.   .margin({ bottom: 10 })

复制代码

背景色和文字颜色

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

1.   背景色、文字色

复制代码

ArkUI代码：

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

复制代码

内容居中

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

1.   内容居中

复制代码

ArkUI代码：

1. Column() {
2.   Text('内容居中')
3. }
4. .backgroundColor('#36D')
5. .justifyContent(FlexAlign.Center)
6. .alignItems(HorizontalAlign.Center)
7. .width(150)
8. .height(100)
9. .padding(10)

复制代码

圆角

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

1.   圆角

复制代码

ArkUI代码：

1. Text('圆角')
2.   .width(150)
3.   .height(100)
4.   .backgroundColor('#36D')
5.   .borderRadius(10)

复制代码

阴影效果

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

1.   阴影

复制代码

ArkUI代码：

1. Text('阴影')
2.   .width(150)
3.   .height(100)
4.   .backgroundColor('#F5F5F5')
5.   .shadow({
6.   
10.   offsetX: 0,
11.   
15.   offsetY: 6,
16.   
20.   radius: 50,
21.   
25.   color: 'rgba(0, 0, 0, 0.5)',
26.   })

复制代码

布局容器和轴向

基本容器

在Web开发中，我们使用作为通用容器。
在ArkUI中，我们主要使用Column和Row组件，注意 alignItems 需区分轴向。
HTML/CSS代码：

1.   
5.   

复制代码

ArkUI代码：

1. Column() {
2.   // 垂直方向布局，交叉轴水平居中
3. }
4. .alignItems(HorizontalAlign.Center)
6. Row() {
7.   // 水平方向布局，交叉轴垂直居中
8. }
9. .alignItems(VerticalAlign.Center)

复制代码

关键区别总结

• 样式应用方式：
  
  
  
  • HTML/CSS：使用选择器和属性声明样式
    
  • ArkUI：使用链式API直接在组件上设置样式
    
  
  
• 布局容器：
  
  
  
  • HTML：使用  等标签，配合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 教程对你有所帮助，期待您的
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！