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

LumenL1u
413 阅读6分钟

前言

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

原文：jm-wxr.github.io/blog/harmon…（个人网站，不定期更新哦）

编程语言

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

    * {
  box-sizing: border-box;
}

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

基本布局操作

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

01.png

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

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

<p class="blue-text">蓝色文字</p>

<style>
.blue-text {
  font: 900 24px Tahoma;
  color: blue;
  text-align: center;
}
</style>

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

设置尺寸大小和背景颜色

02.png

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

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

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

<div class="red-box">这是个红色盒子</div>

<style>
.red-box {
  width: 300px;
  height: 180px;
  background-color: red;
}
</style>

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

设置线性渐变

04.png

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

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

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

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

设置对齐方式

04.png

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

<div class="red-box">这是个红色盒子</div>

<style>
.red-box {
  width: 300px;
  height: 180px;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

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

组件位置和大小

绝对位置

05.png

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

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

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

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)

旋转

06.png

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

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

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)

缩放

07.png

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

<div class="blue-box">
  <div class="red-box">这是个红色盒子</div>
</div>

<style>
.blue-box {
  /* ... */
}

.red-box {
  /* ... */
  transform: scale(1.5);
}
</style>

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

平移

08.png

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

<div class="blue-box">
  <div class="red-box">这是个红色盒子</div>
</div>

<style>
.blue-box {
  /* ... */
}

.red-box {
  /* ... */
  transform: translate(20px, 20px);
}
</style>

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

组件边框形状

圆角

09.png

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

<div class="blue-box">
  <div class="red-box">这是个红色盒子</div>
</div>

<style>
.blue-box {
  /* ... */
}

.red-box {
  /* ... */
  border-radius: 12px;
}
</style>

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

边框阴影

10.png

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

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

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

    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)
    // ...

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

11.png

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

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

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

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

Flex({
    // ...
}) {
  Row() {
    Text('这是一个红色盒子')
  }
  // ...
  .width(100)
  .height(100)
  .borderRadius(50)
}
.backgroundColor(Color.Grey)
// ...
avatar
文章
阅读
粉丝