鸿蒙5：ArkTS语句和组件基础

原创于 2025-06-30 15:08:32 发布 · 891 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

鸿蒙学习专栏收录该内容

66 篇文章

订阅专栏

1. ArkTS语句

1.1 if语句

if语句用于需要根据逻辑条件执行不同语句的场景。当逻辑条件为真时，执行对应的一组语句，否则执行另一组语句（如果有的话）。

else部分也可能包含if语句。

if分支有三种形式

条件表达式可以是任何类型。但是对于boolean以外的类型，会进行隐式类型转换：

let s1 = 'Hello';
if (s1) {
  console.log(s1); // 打印“Hello”
}

let s2 = 'World';
if (s2.length != 0) {
  console.log(s2); // 打印“World”
}

1.2 Switch语句

使用switch语句来执行与switch表达式值匹配的代码块。

一般用于精确匹配

switch语句如下所示：

switch (expression) {
  case label1: // 如果label1匹配，则执行
    // ...
    // 语句1
    // ...
    break; // 可省略
  case label2:
  case label3: // 如果label2或label3匹配，则执行
    // ...
    // 语句23
    // ...
    break; // 可省略
  default:
    // 默认语句
}

const grade: string = 'B'
switch (grade) {
  case 'A': {
    console.log("优");
    break;
  }
  case "B": {
    console.log("良");
    break;
  }
  case "C": {
    console.log("及格");
    break;
  }
  case "D": {
    console.log("不及格");
    break;
  }
  default: {
    console.log("非法输入");
    break;
  }

}

1.3 三元条件表达式

语法：条件？条件成立执行的表达式：条件不成立执行的表达式

      condition ? expression1 : expression2

条件表达式由第一个表达式的布尔值来决定返回其它两个表达式中的哪一个。

如果condition的为真值（转换后为true的值），则使用expression1作为该表达式的结果；否则，使用expression2。

示例

const flag:boolean=20>10?true:false

1.4 For语句

for语句会被重复执行，直到循环退出语句值为false。

作用：重复执行指定的一段代码

for ([init]; [condition]; [update]) {
  statements
}

循环三要素：

1、初始值（变量）

2、循环条件

3、变化量（变量技术，自增或者自减）

for (let i=1;i<20;i++){
  console.log('i的值：'+i);
}

1.5 While语句

只要condition为真值（转换后为true的值），while语句就会执行statements语句。示例如下：

while (condition) {
  statements
}

let n = 0;
while (n < 3) {
  console.log('n的值：'+n);
  n++;
}

1.6 Do-while语句

如果condition的值为真值（转换后为true的值），那么statements语句会重复执行。示例如下：

do {
  statements
} while (condition)

let n = 0;
do{
  console.log('n的值：'+n);
  n++;
}while (n<3)

1.7 Break语句

使用break语句可以终止循环语句或switch。

let x = 0;
while (true) {
  x++;
  if (x > 5) {
    break;
  }
}

1.8 Continue语句

continue语句会停止当前循环迭代的执行，并将控制传递给下一个迭代。

let sum = 0;
for (let x = 0; x < 100; x++) {
  if (x % 2 == 0) {
    continue
  }
  sum += x;
}

2. 组件基础

参考链接地址

文档中心

在鸿蒙应用开发中，我们能看到的 UI 结构基本都是组件
组件从概念上可以分为：页面组件、功能组件（官方分类会更为细致）

页面组件：完整的页面
功能组件：需要基于页面进行展示

2.1 组件结构

咱们展开来认识一下之前编写的代码，看看这么多的东西【分别】是什么

装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。
UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。
自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。
属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。
事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。

import { promptAction } from '@kit.ArkUI';

@Entry // 页面入口
@Component // 自定义组件
struct Index { // struct 组件名称
  @State message: string = 'Hello World';

  // 组件内必须要有build函数, 进行UI结构描述 => 构建页面内容的区域
  // 内容的展示可以用不用的组件渲染
  build() {
    // 列组件
    Column() {
      // 文字组件
      // 1. Text('内容') 函数调用
      // 2. .fontSize(18) 文字大小设置
      // 3. .fontColor(颜色) 文字颜色设置
      // 4. .onClick(点击) 事件绑定设置
      Text('hello 鸿蒙')
        .fontSize(50)
        .fontColor(Color.Red)
        .onClick(() => {
          promptAction.showToast({
            message: '我被点击了'
          })
        })
      // 按钮组件
      Button('按钮组件')

      // 列组件
      Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
    }
  }
}

2.2 创建自定义组件

参考链接

文档中心

当系统组件不能满足我们的功能需求时，我们也可以自己定义组件实现想要的效果

在定义组件时除了能满足需求，也可以其他的一些好处

业务解耦
组件复用
模块拆解

在很多情况下，由于业务的复杂度，我们经常会将一个大的业务拆成若干个组件，进行组装，这里我们非常灵活的复用组件，比如

我们可以把上图抽象成三个组件- Header- Main- Footer

import { MeiTuanFooter } from '../components/MeiTuanFooter';
import { MeiTuanHeader } from '../components/MeiTuanHeader';
import { MeiTuanMain } from '../components/MeiTuanMain';

@Entry
@Component
struct MeiTuan {
  @State message: string = 'Hello World';

  build() {
    Column() {
      MeiTuanHeader() // 60
      MeiTuanMain()
        .layoutWeight(1)
        .backgroundColor(Color.Green)
      MeiTuanFooter() // 60
    }.height('100%')
  }
}

@Preview
@Component
struct MeiTuanHeader {
  build() {
    Row () {
      Text("美团头部")
        .width('100%')
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height(60)
    .backgroundColor(Color.Pink)
  }
}
export { MeiTuanHeader }

@Component
struct MeiTuanMain {
  build() {
    Row() {
      Text("美团中部")
        .fontColor(Color.Red)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
  }
}

export { MeiTuanMain }

@Component
struct MeiTuanFooter {
  build() {
    Row () {
      Text("美团底部")
        .fontColor(Color.White)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height(60)
    .backgroundColor(Color.Blue)
  }
}
export  { MeiTuanFooter  }