给Web开发者的HarmonyOS指南02-布局样式
<h1 id="给web开发者的harmonyos指南02-布局样式">给Web开发者的HarmonyOS指南02-布局样式</h1><p>本系列教程适合鸿蒙 HarmonyOS 初学者，为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。</p>
<blockquote>
<p>本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。</p>
</blockquote>
<h2 id="开发环境准备">开发环境准备</h2>
<ul>
<li>DevEco Studio 5.0.3</li>
<li>HarmonyOS Next API 15</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/684615/202503/684615-20250328091522683-1822573282.png" alt="image" loading="lazy"></p>
<h2 id="布局基础对比">布局基础对比</h2>
<p>在Web开发中，我们使用CSS来控制元素的布局和样式。而在HarmonyOS的ArkUI中，我们使用声明式UI和链式API来实现相同的效果。本文将对比两种框架在布局方面的异同。</p>
<h3 id="盒子模型">盒子模型</h3>
<p>在Web开发中，CSS盒子模型包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。<br>
在ArkUI中，这些概念依然存在，只是写法有所不同，容易上手。</p>
<p><strong>HTML/CSS代码：</strong></p>
<pre><code class="language-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>
</code></pre>
<p><strong>ArkUI代码：</strong></p>
<pre><code class="language-typescript">Text('盒子模型')
.width(150)
.height(100)
.padding(10)
.border({ width: 10, style: BorderStyle.Solid, color: Color.Pink })
.margin({ bottom: 10 })
</code></pre>
<h3 id="背景色和文字颜色">背景色和文字颜色</h3>
<p>在Web开发中，我们使用 <code>background-color</code> 和 <code>color</code> 属性来设置背景色和文字颜色。<br>
在ArkUI中，我们使用 <code>backgroundColor</code> 和 <code>fontColor</code> 方法。</p>
<p><strong>HTML/CSS代码：</strong></p>
<pre><code class="language-html"><div class="box">
背景色、文字色
</div>
<style>
.box {
/* 背景色 */
background-color: #36d;
/* 文字色 */
color: #fff;
}
</style>
</code></pre>
<p><strong>ArkUI代码：</strong></p>
<pre><code class="language-typescript">Text('背景色、文字色')
.backgroundColor('#36d')
.fontColor('#fff')
</code></pre>
<h3 id="内容居中">内容居中</h3>
<p>在Web开发中，我们使用 <code>display: flex</code> 配合 <code>justify-content</code> 和 <code>align-items</code> 实现内容居中。<br>
在ArkUI中，我们可以使用 <code>Column</code> 或 <code>Row</code> 组件配合 <code>justifyContent</code> 和 <code>alignItems</code> 属性。</p>
<p><strong>HTML/CSS代码：</strong></p>
<pre><code class="language-html"><div class="box">
内容居中
</div>
<style>
.box {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</code></pre>
<p><strong>ArkUI代码：</strong></p>
<pre><code class="language-typescript">Column() {
Text('内容居中')
}
.backgroundColor('#36D')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.width(150)
.height(100)
.padding(10)
</code></pre>
<h3 id="圆角">圆角</h3>
<p>在Web开发中，我们使用<code>border-radius</code>属性来设置圆角。<br>
在ArkUI中，我们使用<code>borderRadius</code>方法。</p>
<p><strong>HTML/CSS代码：</strong></p>
<pre><code class="language-html"><div class="box">
圆角
</div>
<style>
.box {
border-radius: 10px;
}
</style>
</code></pre>
<p><strong>ArkUI代码：</strong></p>
<pre><code class="language-typescript">Text('圆角')
.width(150)
.height(100)
.backgroundColor('#36D')
.borderRadius(10)
</code></pre>
<h3 id="阴影效果">阴影效果</h3>
<p>在Web开发中，我们使用<code>box-shadow</code>属性来设置阴影效果。<br>
在ArkUI中，我们使用<code>shadow</code>方法。</p>
<p><strong>HTML/CSS代码：</strong></p>
<pre><code class="language-html"><div class="box">
阴影
</div>
<style>
.box {
box-shadow: 0 6px 50px rgba(0, 0, 0, 0.5);
}
</style>
</code></pre>
<p><strong>ArkUI代码：</strong></p>
<pre><code class="language-typescript">Text('阴影')
.width(150)
.height(100)
.backgroundColor('#F5F5F5')
.shadow({
offsetX: 0,
offsetY: 6,
radius: 50,
color: 'rgba(0, 0, 0, 0.5)',
})
</code></pre>
<h2 id="布局容器和轴向">布局容器和轴向</h2>
<h3 id="基本容器">基本容器</h3>
<p>在Web开发中，我们使用<code><div></code>作为通用容器。<br>
在ArkUI中，我们主要使用<code>Column</code>和<code>Row</code>组件，注意 <code>alignItems</code> 需区分轴向。</p>
<p><strong>HTML/CSS代码：</strong></p>
<pre><code class="language-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>
</code></pre>
<p><strong>ArkUI代码：</strong></p>
<pre><code class="language-typescript">Column() {
// 垂直方向布局，交叉轴水平居中
}
.alignItems(HorizontalAlign.Center)
Row() {
// 水平方向布局，交叉轴垂直居中
}
.alignItems(VerticalAlign.Center)
</code></pre>
<h2 id="关键区别总结">关键区别总结</h2>
<ol>
<li>
<p><strong>样式应用方式</strong>：</p>
<ul>
<li>HTML/CSS：使用选择器和属性声明样式</li>
<li>ArkUI：使用链式API直接在组件上设置样式</li>
</ul>
</li>
<li>
<p><strong>布局容器</strong>：</p>
<ul>
<li>HTML：使用 <code><div></code> 等标签，配合CSS实现布局</li>
<li>ArkUI：使用专门的布局组件如 <code>Column</code>、<code>Row</code> 等组件，配合样式属性布局</li>
</ul>
</li>
<li>
<p><strong>单位使用</strong>：</p>
<ul>
<li>HTML/CSS：使用 px、em、rem、百分比等单位</li>
<li>ArkUI：使用 px、vp、lpx 、百分比等单位，使用数字单位 vp 可省略</li>
</ul>
</li>
<li>
<p><strong>样式继承</strong>：</p>
<ul>
<li>HTML/CSS：通过CSS选择器实现样式继承</li>
<li>ArkUI：<strong>没有样式继承</strong></li>
</ul>
</li>
</ol>
<h2 id="学习建议">学习建议</h2>
<ol>
<li>
<p><strong>理解链式API</strong>：</p>
<ul>
<li>熟悉ArkUI的链式API调用方式</li>
<li>掌握常用样式方法的命名规则</li>
</ul>
</li>
<li>
<p><strong>布局思维转变</strong>：</p>
<ul>
<li>从CSS盒模型思维转向组件化思维</li>
<li>理解ArkUI的布局容器特性</li>
</ul>
</li>
<li>
<p><strong>样式设置习惯</strong>：</p>
<ul>
<li>养成使用链式API设置样式的习惯</li>
<li>注意样式方法的参数格式</li>
</ul>
</li>
<li>
<p><strong>组件嵌套</strong>：</p>
<ul>
<li>合理使用组件嵌套实现复杂布局</li>
<li>注意组件的父子关系</li>
</ul>
</li>
</ol>
<h2 id="总结">总结</h2>
<p>作为Web开发者，迁移到 HarmonyOS 开发需要适应新的布局和样式设置方式。概念其实非常相似，通过理解这些差异，并掌握ArkUI的组件化开发方式，Web开发者可以快速上手HarmonyOS开发。</p>
<p>希望这篇 HarmonyOS 教程对你有所帮助，期待您的 👍点赞、💬评论、🌟收藏 支持。</p><br><br>
来源：https://www.cnblogs.com/Megasu/p/18794488
頁:
[1]