給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)

關鍵區別總結

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 教程對你有所幫助，期待您的 👍點贊、💬評論、🌟收藏 支持。