Web 开发者快速入门 HarmonyOS （一）

络腮胡菲菲  论坛元老 | 2024-12-10 21:04:01 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1030|帖子 1030|积分 3090

前言

本文面向拥有 Web 开发履历、熟悉 HTML 和 CSS 的职员。通过 HTML/CSS 和 HarmonyOS/ArkUI 代码之间的对比，能让你更快速的上手 HarmonyOS 的应用开发。
原文：https://jm-wxr.github.io/blog/harmonyos/getstarted/web-developer.html（个人网站，不定期更新哦）
编程语言

ArkTS 是 HarmonyOS 优选的主力应用开发语言。ArkTS 围绕应用开发在TypeScript（简称 TS）生态底子上做了进一步扩展，保持了 TS 的根本风格，同时通过规范定义强化开发期静态检查和分析，提升程序实验稳定性和性能。
如果你有 JavaScript 的底子，要了解 TypeScript 和 JavaScript 语言的区别，请参阅为 JavaScript 程序员准备的 TypeScript。
如果你有 TypeScript 的底子，要了解 ArkTS 语言和 TypeScript 语言的区别，请参阅从 TypeScript 到 ArkTS 的适配规则。
UI 框架

HarmonyOS 采用的 UI 框架是方舟开发框架（ArkUI 框架），方舟开发框架为开发者提供了两种开发范式，分别是基于 ArkTS 的声明式开发范式（简称“声明式开发范式”）和兼容 JS 的类 Web 开发范式（简称“类 Web 开发范式”）。本文只考虑声明式开发范式这一种开发范式。
留意：


  • 以下示例均假设将全部的 HTML 元素的 CSS 盒子模子都设置为border-box，以便与 ArkUI 保持一致
    1. * {
    2.   box-sizing: border-box;
    3. }
    复制代码
  • 在下面 ArkUI 的示例中默认将单位省略。ArkUI 采用 vp 为基准数据单位，在实际宽度为 1440 物理像素的屏幕上，1vp 约等于 3px。
根本结构操作

设置文本样式、文本对齐方式


对于 css 使用font和color设置笔墨样式、大小等，Text 组件（ArkUI 中构建 UI 的最小单位称为组件）的文本通用属性可以到达同样的效果。
对于 css 使用text-align来对齐文本，Text 组件的textAlign属性可以到达同样的效果。
  1. <p class="blue-text">蓝色文字</p>
  3. <style>
  4. .blue-text {
  5.   font: 900 24px Tahoma;
  6.   color: blue;
  7.   text-align: center;
  8. }
  9. </style>
复制代码
  1. Text("蓝色文字")
  2.   .fontSize(24)
  3.   .fontColor(Color.Blue)
  4.   // 当前仅支持’HarmonyOS Sans’字体
  5.   .fontFamily("Tahoma")
  6.   .fontWeight(FontWeight.Bolder)
  7.   .textAlign(TextAlign.Center);
复制代码
设置尺寸大小和背景颜色


使用width和height属性来设置组件的固定宽高。如果要束缚组件的宽高，请使用constraintSize属性来实现。
使用backgroundColor 属性来设置背景颜色。
在CSS和ArkUI的Flex结构（弹性结构）中，子元素或子组件默认锚定在左上角。
  1. <div class="red-box">这是个红色盒子</div>
  3. <style>
  4. .red-box {
  5.   width: 300px;
  6.   height: 180px;
  7.   background-color: red;
  8. }
  9. </style>
复制代码
  1. Flex() {
  2.   Text('这是个红色盒子')
  3. }
  4. .width(300)
  5. .height(180)
  6. .backgroundColor(Color.Red)
复制代码
设置线性渐变


对于渐变颜色，可以使用linearGradient 属性，其中angle为渐变角度（默认值为180，垂直向下），colors为数组，每个数组项表示某百分比位置处的渐变色颜色。详细设置见颜色渐变
对于CSS的row方向的Flex结构，在ArkUI可以用Row结构（线性结构）来代替，子组件默认侧轴居中。
  1. <div class="red-box">这是个渐变盒子</div>
  3. <style>
  4. .red-box {
  5.   width: 300px;
  6.   height: 180px;
  7.   display: flex;
  8.   flex-direction: row;
  9.   align-items: center;
  10.   background: linear-gradient(180deg, red, yellow 80%);
  11. }
  12. </style>
复制代码
  1. Row() {
  2.   Text('这是个渐变盒子')
  3. }
  4. .width(300)
  5. .height(180)
  6. .linearGradient({ angle: 180, colors: [[Color.Red, 0],[Color.Yellow, 0.8]] })
复制代码
设置对齐方式


在 ArkUI 中，通过给 Flex 容器（弹性结构容器）传入参数justifyContent和alignItems来实现子组件的对齐格式。对于 Row 和 Column 容器（线性结构容器），设置其属性justifyContent和alignItems来实现。更多结构见结构概述
  1. <div class="red-box">这是个红色盒子</div>
  3. <style>
  4. .red-box {
  5.   width: 300px;
  6.   height: 180px;
  7.   background-color: red;
  8.   display: flex;
  9.   align-items: center;
  10.   justify-content: center;
  11. }
  12. </style>
复制代码
  1. Flex({
  2.   justifyContent: FlexAlign.Center,
  3.   alignItems: ItemAlign.Center
  4. }) {
  5.   Text('这是个红色盒子')
  6. }
  7. .width(300)
  8. .height(180)
  9. .backgroundColor(Color.Red)
复制代码
组件位置和大小

绝对位置


默认情况下，组件相对于其父组件进行定位。
将组件作为结构组件(这里以Stack为例)的子组件，来设置其绝对位置，在position属性中指定x和y的坐标确定位置。
  1. <div class="blue-box">
  2.   <div class="red-box">这是个红色盒子</div>
  3. </div>
  5. <style>
  6. .blue-box {
  7.   position: relative;
  8.   background-color: #0000ff;
  9.   width: 320px;
  10.   height: 240px;
  11.   font: 900 24px Roboto;
  12. }
  14. .red-box {
  15.   position: absolute;
  16.   top: 24px;
  17.   left: 24px;
  18.   background-color: red;
  19.   padding: 16px;
  20.   color: #ffffff;
  21. }
  22. </style>
复制代码
  1. Stack() {
  2.   Row() {
  3.     Text('这是一个红色盒子')
  4.       .fontColor('#ffffff')
  5.       .fontSize(24)
  6.       .fontWeight(900)
  7.       .fontFamily('Roboto')
  8.   }
  9.   .position({x: 24, y : 24})
  10.   .backgroundColor(Color.Red)
  11.   .padding(16)
  12. }
  13. .backgroundColor('#0000ff')
  14. .width(320)
  15. .height(240)
复制代码
旋转


在组件的rotate属性中指定angle的值来设置其旋转角度（顺时针）。详细设置见RotateOptions
  1. <div class="blue-box">
  2.   <div class="red-box">这是个红色盒子</div>
  3. </div>
  5. <style>
  6. .blue-box {
  7.   background-color: #0000ff;
  8.   width: 320px;
  9.   height: 240px;
  10.   display: flex;
  11.   align-items: center;
  12.   justify-content: center;
  13. }
  15. .red-box {
  16.   background-color: red;
  17.   padding: 16px;
  18.   color: #ffffff;
  19.   transform: rotate(15deg);
  20. }
  21. </style>
复制代码
  1. Flex({
  2.   alignItems: ItemAlign.Center,
  3.   justifyContent: FlexAlign.Center
  4. }) {
  5.   Row() {
  6.     Text('这是一个红色盒子')
  7.       .fontColor('#ffffff')
  8.   }
  9.   .backgroundColor(Color.Red)
  10.   .padding(16)
  11.   .rotate({angle: 15})
  12. }
  13. .backgroundColor('#0000ff')
  14. .width(320)
  15. .height(240)
复制代码
缩放


在组件的scale属性中指定x和y的值来设置相应轴的缩放比例。详细设置见ScaleOptions
  1. <div class="blue-box">
  2.   <div class="red-box">这是个红色盒子</div>
  3. </div>
  5. <style>
  6. .blue-box {
  7.   /* ... */
  8. }
  10. .red-box {
  11.   /* ... */
  12.   transform: scale(1.5);
  13. }
  14. </style>
复制代码
  1. Flex({
  2.         // ...
  3. }) {
  4.    Row() {
  5.      Text('这是一个红色盒子')
  6.    }
  7.    // ...
  8.    .scale({x: 1.5, y: 1.5})
  9. }
  10. // ...
复制代码
平移


在组件的translate属性中指定x和y的值来设置相应轴的平移间隔。详细设置见TranslateOptions
  1. <div class="blue-box">
  2.   <div class="red-box">这是个红色盒子</div>
  3. </div>
  5. <style>
  6. .blue-box {
  7.   /* ... */
  8. }
  10. .red-box {
  11.   /* ... */
  12.   transform: translate(20px, 20px);
  13. }
  14. </style>
复制代码
  1. Flex({
  2.     // ...
  3. }) {
  4.   Row() {
  5.     Text('这是一个红色盒子')
  6.   }
  7.   // ...
  8.   .translate({x: 20, y: 20})
  9. }
  10. // ...
复制代码
组件边框形状

圆角


要设置组件的圆角，可以使用borderRadius属性，传入一个值，来指定每个角的圆角半径。如果你想单独设置每个角，请查阅BorderRadiuses
  1. <div class="blue-box">
  2.   <div class="red-box">这是个红色盒子</div>
  3. </div>
  5. <style>
  6. .blue-box {
  7.   /* ... */
  8. }
  10. .red-box {
  11.   /* ... */
  12.   border-radius: 12px;
  13. }
  14. </style>
复制代码
  1. Flex({
  2.     // ...
  3. }) {
  4.   Row() {
  5.     Text('这是一个红色盒子')
  6.   }
  7.   // ...
  8.   .borderRadius(12)
  9. }
  10. // ...
复制代码
边框阴影


组件的shadow属性可以设置边框的阴影，阴影的每个属性都是单独设置，其offsetX、offsetY、radius、color分别表示X轴偏移量、Y轴偏移量、阴影半径、阴影颜色，由于前三个属性的单位为px，你大概须要用vp2px进行单位转换。详细设置见ShadowOptions
除了设置每一个阴影属性，还可以只设置阴影样式。具体设置见ShadowStyle
  1. <div class="gray-box">
  2.   <div class="red-box">这是个红色盒子</div>
  3. </div>
  5. <style>
  6. .gray-box {
  7.     background-color: gray;
  8.   /* ... */
  9. }
  11. .red-box {
  12.   /* ... */
  13.   box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.8);
  14. }
  15. </style>
复制代码
  1. Flex({
  2.   // ...
  3. }) {
  4.   Row() {
  5.     Text('这是一个红色盒子')
  6.   }
  7.   // ...
  8.         .shadow({
  9.     offsetX: vp2px(4),
  10.     offsetY: vp2px(6),
  11.     radius: vp2px(20),
  12.     color: 'rgba(0, 0, 0, 0.8)',
  13.   })
  14.   // .shadow(ShadowStyle.OUTER_DEFAULT_LG)
  15. }
  16. .backgroundColor(Color.Grey)
  17. // ...
复制代码
圆形和椭圆形（胶囊形） ​


对于CSS，将矩形的border-radius设置为50%就可以得到一个圆形或椭圆形。
但在ArkUI中，你无法直接将borderRadius 设置为50%，只能输入具体的数值。对于正方形，将其设置为高度（宽度）的一半，你会得到一个圆。对于长方形，将其设置为高度（宽度）的一半，你会得到一个胶囊形。
留意：最大值不会凌驾宽或高的一半
  1. <div class="gray-box">
  2.   <div class="red-box">这是个红色盒子</div>
  3. </div>
  5. <style>
  6. .gray-box {
  7.     background-color: gray;
  8.   /* ... */
  9. }
  11. .red-box {
  12.   /* ... */
  13.   width: 100px;
  14.   height: 100px;
  15.   border-radius: 50%;
  16. }
  17. </style>
复制代码
  1. Flex({
  2.     // ...
  3. }) {
  4.   Row() {
  5.     Text('这是一个红色盒子')
  6.   }
  7.   // ...
  8.   .width(100)
  9.   .height(100)
  10.   .borderRadius(50)
  11. }
  12. .backgroundColor(Color.Grey)
  13. // ...
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

络腮胡菲菲

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表