Web 开发者快速入门 HarmonyOS

前言

本文面向拥有 Web 开发经验、熟悉 HTML 和 CSS 的人员。通过 HTML/CSS 和 HarmonyOS/ArkUI 代码之间的对比，能让你更快速的上手 HarmonyOS 的应用开发。

编程语言

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 保持一致

  css

  复制代码

  * { box-sizing: border-box; }

• 在下面 ArkUI 的示例中默认将单位省略。ArkUI 采用 vp 为基准数据单位，在实际宽度为 1440 物理像素的屏幕上，1vp 约等于 3px。

基本布局操作

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

对于 css 使用font和color设置文字样式、大小等，Text 组件（ArkUI 中构建 UI 的最小单位称为组件）的文本通用属性可以达到同样的效果。

对于 css 使用text-align来对齐文本，Text 组件的textAlign属性可以达到同样的效果。

html

复制代码

<p class="blue-text">蓝色文字</p> <style> .blue-text { font: 900 24px Tahoma; color: blue; text-align: center; } </style>

tsx

复制代码

Text("蓝色文字") .fontSize(24) .fontColor(Color.Blue) // 当前仅支持’HarmonyOS Sans’字体 .fontFamily("Tahoma") .fontWeight(FontWeight.Bolder) .textAlign(TextAlign.Center);

设置尺寸大小和背景颜色

使用width和height属性来设置组件的固定宽高。如果要约束组件的宽高，请使用constraintSize属性来实现。

使用backgroundColor 属性来设置背景颜色。

在CSS和ArkUI的Flex布局（弹性布局）中，子元素或子组件默认锚定在左上角。

html

复制代码

<div class="red-box">这是个红色盒子</div> <style> .red-box { width: 300px; height: 180px; background-color: red; } </style>

tsx

复制代码

Flex() { Text('这是个红色盒子') } .width(300) .height(180) .backgroundColor(Color.Red)

设置线性渐变

对于渐变颜色，可以使用linearGradient 属性，其中angle为渐变角度（默认值为180，垂直向下），colors为数组，每个数组项表示某百分比位置处的渐变色颜色。详细设置见颜色渐变

对于CSS的row方向的Flex布局，在ArkUI可以用Row布局（线性布局）来代替，子组件默认侧轴居中。

html

复制代码

<div class="red-box">这是个渐变盒子</div> <style> .red-box { width: 300px; height: 180px; display: flex; flex-direction: row; align-items: center; background: linear-gradient(180deg, red, yellow 80%); } </style>

tsx

复制代码

Row() { Text('这是个渐变盒子') } .width(300) .height(180) .linearGradient({ angle: 180, colors: [[Color.Red, 0],[Color.Yellow, 0.8]] })

设置对齐方式

在 ArkUI 中，通过给 Flex 容器（弹性布局容器）传入参数justifyContent和alignItems来实现子组件的对齐格式。对于 Row 和 Column 容器（线性布局容器），设置其属性justifyContent和alignItems来实现。更多布局见布局概述

html

复制代码

<div class="red-box">这是个红色盒子</div> <style> .red-box { width: 300px; height: 180px; background-color: red; display: flex; align-items: center; justify-content: center; } </style>

tsx

复制代码

Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { Text('这是个红色盒子') } .width(300) .height(180) .backgroundColor(Color.Red)

组件位置和大小

绝对位置

默认情况下，组件相对于其父组件进行定位。

将组件作为布局组件(这里以Stack为例)的子组件，来设置其绝对位置，在position属性中指定x和y的坐标确定位置。

html

复制代码

<div class="blue-box"> <div class="red-box">这是个红色盒子</div> </div> <style> .blue-box { position: relative; background-color: #0000ff; width: 320px; height: 240px; font: 900 24px Roboto; } .red-box { position: absolute; top: 24px; left: 24px; background-color: red; padding: 16px; color: #ffffff; } </style>

tsx

复制代码

Stack() { Row() { Text('这是一个红色盒子') .fontColor('#ffffff') .fontSize(24) .fontWeight(900) .fontFamily('Roboto') } .position({x: 24, y : 24}) .backgroundColor(Color.Red) .padding(16) } .backgroundColor('#0000ff') .width(320) .height(240)

旋转

在组件的rotate属性中指定angle的值来设置其旋转角度（顺时针）。详细设置见RotateOptions

html

复制代码

<div class="blue-box"> <div class="red-box">这是个红色盒子</div> </div> <style> .blue-box { background-color: #0000ff; width: 320px; height: 240px; display: flex; align-items: center; justify-content: center; } .red-box { background-color: red; padding: 16px; color: #ffffff; transform: rotate(15deg); } </style>

tsx

复制代码

Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Row() { Text('这是一个红色盒子') .fontColor('#ffffff') } .backgroundColor(Color.Red) .padding(16) .rotate({angle: 15}) } .backgroundColor('#0000ff') .width(320) .height(240)

缩放

在组件的scale属性中指定x和y的值来设置相应轴的缩放比例。详细设置见ScaleOptions

html

复制代码

<div class="blue-box"> <div class="red-box">这是个红色盒子</div> </div> <style> .blue-box { /* ... */ } .red-box { /* ... */ transform: scale(1.5); } </style>

tsx

复制代码

Flex({ // ... }) { Row() { Text('这是一个红色盒子') } // ... .scale({x: 1.5, y: 1.5}) } // ...

平移

在组件的translate属性中指定x和y的值来设置相应轴的平移距离。详细设置见TranslateOptions

html

复制代码

<div class="blue-box"> <div class="red-box">这是个红色盒子</div> </div> <style> .blue-box { /* ... */ } .red-box { /* ... */ transform: translate(20px, 20px); } </style>

tsx

复制代码

Flex({ // ... }) { Row() { Text('这是一个红色盒子') } // ... .translate({x: 20, y: 20}) } // ...

组件边框形状

圆角

要设置组件的圆角，可以使用borderRadius属性，传入一个值，来指定每个角的圆角半径。如果你想单独设置每个角，请查阅BorderRadiuses

html

复制代码

<div class="blue-box"> <div class="red-box">这是个红色盒子</div> </div> <style> .blue-box { /* ... */ } .red-box { /* ... */ border-radius: 12px; } </style>

tsx

复制代码

Flex({ // ... }) { Row() { Text('这是一个红色盒子') } // ... .borderRadius(12) } // ...

边框阴影

组件的shadow属性可以设置边框的阴影，阴影的每个属性都是单独设置，其offsetX、offsetY、radius、color分别表示X轴偏移量、Y轴偏移量、阴影半径、阴影颜色，由于前三个属性的单位为px，你可能需要用vp2px进行单位转换。详细设置见ShadowOptions

除了设置每一个阴影属性，还可以只设置阴影样式。具体设置见ShadowStyle

html

复制代码

<div class="gray-box"> <div class="red-box">这是个红色盒子</div> </div> <style> .gray-box { background-color: gray; /* ... */ } .red-box { /* ... */ box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.8); } </style>

tsx

复制代码

Flex({ // ... }) { Row() { Text('这是一个红色盒子') } // ... .shadow({ offsetX: vp2px(4), offsetY: vp2px(6), radius: vp2px(20), color: 'rgba(0, 0, 0, 0.8)', }) // .shadow(ShadowStyle.OUTER_DEFAULT_LG) } .backgroundColor(Color.Grey) // ...

圆形和椭圆形（胶囊形） ​

对于CSS，将矩形的border-radius设置为50%就可以得到一个圆形或椭圆形。

但在ArkUI中，你无法直接将borderRadius 设置为50%，只能输入具体的数值。对于正方形，将其设置为高度（宽度）的一半，你会得到一个圆。对于长方形，将其设置为高度（宽度）的一半，你会得到一个胶囊形。

注意：最大值不会超过宽或高的一半

html

复制代码

<div class="gray-box"> <div class="red-box">这是个红色盒子</div> </div> <style> .gray-box { background-color: gray; /* ... */ } .red-box { /* ... */ width: 100px; height: 100px; border-radius: 50%; } </style>

tsx

复制代码

Flex({ // ... }) { Row() { Text('这是一个红色盒子') } // ... .width(100) .height(100) .borderRadius(50) } .backgroundColor(Color.Grey) // ...

原文链接：https://juejin.cn/post/7376648882712461347