网站的规划与建设 按时间顺序,html5手机网站特效,网站建设运营,提升seo排名给Web开发者的HarmonyOS指南02-布局样式
本系列教程适合鸿蒙 HarmonyOS 初学者#xff0c;为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。 本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。 布局基础对比
在Web开发中#xff0c;我们使用CS…给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 classbox盒子模型
/divstyle.box {box-sizing: border-box;/* 内容 */width: 150px;height: 100px;/* 内边距 */padding: 10px;/* 边框 */border: 10px solid pink;/* 底部外边距 */margin-bottom: 10px;}
/styleArkUI代码
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 classbox背景色、文字色
/divstyle.box {/* 背景色 */background-color: #36d;/* 文字色 */color: #fff;}
/styleArkUI代码
Text(背景色、文字色).backgroundColor(#36d).fontColor(#fff)内容居中
在Web开发中我们使用 display: flex 配合 justify-content 和 align-items 实现内容居中。 在ArkUI中我们可以使用 Column 或 Row 组件配合 justifyContent 和 alignItems 属性。
HTML/CSS代码
div classbox内容居中
/divstyle.box {display: flex;justify-content: center;align-items: center;}
/styleArkUI代码
Column() {Text(内容居中)
}
.backgroundColor(#36D)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.width(150)
.height(100)
.padding(10)圆角
在Web开发中我们使用border-radius属性来设置圆角。 在ArkUI中我们使用borderRadius方法。
HTML/CSS代码
div classbox圆角
/divstyle.box {border-radius: 10px;}
/styleArkUI代码
Text(圆角).width(150).height(100).backgroundColor(#36D).borderRadius(10)阴影效果
在Web开发中我们使用box-shadow属性来设置阴影效果。 在ArkUI中我们使用shadow方法。
HTML/CSS代码
div classbox阴影
/divstyle.box {box-shadow: 0 6px 50px rgba(0, 0, 0, 0.5);}
/styleArkUI代码
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 classcolumn!-- 垂直方向布局 --
/divdiv classrow!-- 水平方向布局 --
/divstyle.column {display: flex;flex-direction: column;align-items: center;}.row {display: flex;flex-direction: row;align-items: center;}
/styleArkUI代码
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 教程对你有所帮助期待您的 点赞、评论、收藏 支持。
