❌

阅读视图

发现新文章，点击刷新页面。

HarmonyOS5ArkTS常见数据类型认识

✇掘金 前端
大胖子101

在 ArkTS（基于 TypeScript 的 HarmonyOS 开发语言）中，常见数据类型主要分为基础类型和复杂类型两大类，以下是核心整理：

⚙️ 一、基础类型（Primitive Types）

  1. number

    • 数值类型，包含整数和浮点数（无单独的 int/float 区分）
    typescript
复制
let age: number = 30;       // 整数
let price: number = 9.99;   // 浮点数

  2. string

    • 文本类型，支持单引号/双引号/模板字符串
    typescript
复制
let name: string = "Alice";
let msg: string = `Hello ${name}`;  // 模板字符串

  3. boolean

    • 布尔值，仅 true 或 false 
    typescript
复制
let isActive: boolean = true;

  4. void

    • 函数无返回值
    typescript
复制
function logError(): void {
  console.error("Error!");
}

  5. null 和 undefined

    • null：显式空值
    • undefined：变量未初始化默认值
    typescript
复制
let data: string | null = null;  // 联合类型允许赋值为 null

🧩 二、复杂类型（Complex Types）

集合类型

  1. 数组 Array<T>

    • 相同类型元素集合
    typescript
复制
let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ["a", "b"]; // 泛型语法

  2. 元组 Tuple

    • 固定长度和类型顺序的数组
    typescript
复制
let userInfo: [string, number] = ["Alice", 25];
let firstElement: string = userInfo[0]; // 类型安全访问

  3. 枚举 enum

    • 命名常量集合（自动赋值或手动指定）
    typescript
复制
enum Color { Red = 1, Green, Blue }; // Green=2, Blue=3
let bg: Color = Color.Green;

对象类型

  1. 接口 Interface

    • 定义对象结构（最常用）
    typescript
复制
interface User {
  id: number;
  name: string;
  isAdmin?: boolean;  // 可选属性
}

let user: User = { id: 1, name: "Bob" };

  2. 类 Class

    • 面向对象编程（封装/继承/多态）
    typescript
复制
class Person {
  constructor(public name: string) {}
  greet() { console.log(`Hello ${this.name}`) }
}

特殊类型

  1. 联合类型 |

    • 变量可多选类型
    typescript
复制
let id: string | number;
id = "001";  // 合法
id = 100;    // 合法

  2. 字面量类型

    • 固定值作为类型（常与联合类型配合）
    typescript
复制
type Direction = "left" | "right" | "up" | "down";
let move: Direction = "left"; // 只能赋值指定值

  3. any

    • 关闭类型检查（慎用！失去TS优势）
    typescript
复制
let unknownData: any = fetchExternalData();

  4. Resource（ArkUI特有）

    • 引用本地资源文件
    typescript
复制
Image($r('app.media.logo'))  // 加载resources中的图片

🛡️ 三、类型守卫与类型推断

  1. 类型守卫

    • 运行时检查类型（typeof/instanceof）
    typescript
复制
function printId(id: number | string) {
  if (typeof id === "string") {
    console.log(id.toUpperCase()); // 自动识别为string
  } else {
    console.log(id.toFixed(2));    // 自动识别为number
  }
}

  2. 类型别名 type

    • 为复杂类型命名
    typescript
复制
type UserID = string | number;
type Callback = () => void;

💎 核心数据类型总结表

类型 示例 典型场景
number let count: number = 5; 数值计算
string let msg: string = "Hi"; 文本展示
boolean let isDone: boolean = false; 条件判断
Array<T> let list: number[] = [1,2,3]; 数据集合
Interface interface User { id: number } 结构化数据定义
Union Types `let id: string number;`
Resource $r('app.string.title') 本地化资源引用

实际开发建议：

  1. 优先使用接口定义对象结构
  2. 避免 any 充分利用TS静态检查
  3. 联合类型+类型守卫提高安全性
  4. 善用资源类型加载本地文件

HarmonyOS5鸿蒙开发常用组件介绍

✇掘金 前端
大胖子101

一、文本类组件

  1. Text

    • 用途：显示纯文本内容，支持样式自定义（字体、颜色、对齐等）

    • 示例：

      Text("Hello HarmonyOS")
  .fontSize(20)
  .fontColor(Color.Black)
  .textAlign(TextAlign.Center)

  2. TextInput

    • 用途：单行文本输入框，支持密码模式、占位符提示等

    • 关键属性：

      TextInput({ placeholder: "请输入内容" })
  .type(InputType.Password)  // 密码输入
  .placeholderColor(Color.Gray)

  3. TextArea

    • 用途：多行文本输入框，支持自动换行和字数统计

    • 示例：

      TextArea()
  .height(100)
  .maxLength(200)  // 限制输入长度
  .showCounter(true)  // 显示字数统计

🕹️ 二、交互类组件

  1. Button

    • 用途：触发操作的按钮，支持样式定制和点击事件

    • 示例：

      Button("提交", { type: ButtonType.Normal })
  .backgroundColor(0x317aff)
  .onClick(() => { /* 处理逻辑 */ })

  2. Toggle

    • 用途：开关控件，支持勾选框/开关样式切换

    • 示例：

      Toggle({ type: ToggleType.Switch, isOn: true })
  .onChange((isOn) => { console.log(`开关状态: ${isOn}`) })

  3. CheckBox & Radio

    • 用途：多选框（CheckBox）和单选框（Radio），用于选项选择

    • 示例：

      // 多选框
CheckBox({ name: 'option1' }).select(true)
// 单选框
Radio({ value: 'A', group: 'choices' }).checked(true)

🧩 三、布局容器组件

  1. Column & Row

    • 用途：纵向（Column）和横向（Row）排列子组件，支持主轴/交叉轴对齐

    • 示例：

      Column() {
  Text("顶部文本")
  Button("底部按钮")
}.justifyContent(FlexAlign.SpaceBetween)  // 两端对齐

  2. List

    • 用途：滚动列表容器，适用于长列表数据展示（需配合 ListItem 使用）

    • 示例：

      List() {
  ForEach(dataArray, (item) => {
    ListItem() { Text(item.name) }
  })
}.scrollBar(BarState.Off)  // 隐藏滚动条

  3. Swiper

    • 用途：轮播图容器，支持自动播放和循环切换

    • 示例：

      Swiper() {
  ForEach(bannerList, (item) => {
    Image(item.imageSrc).objectFit(ImageFit.Contain)
  })
}.autoPlay(true).loop(true)

  4. Scroll

    • 用途：可滚动容器，当内容超出可视区域时支持滚动

    • 注意：嵌套 List 时需明确指定子组件宽高以优化性能。

🖼️ 四、媒体与图像组件

  1. Image

    • 用途：显示本地或网络图片，支持缩放和裁剪模式

    • 示例：

      Image($r('app.media.logo'))  // 加载资源图片
  .objectFit(ImageFit.Cover)  // 覆盖整个容器
  .borderRadius(10)  // 圆角

📊 五、高级容器组件

  1. Grid & GridItem

    • 用途：网格布局（Grid）及其子项容器（GridItem），用于瀑布流展示

    • 限制：GridItem 必须作为 Grid 的子组件使用。

  2. WaterFlow & FlowItem

    • 用途：瀑布流布局（WaterFlow）及其子项（FlowItem），适用于不规则内容排列

⚙️ 六、自定义组件

通过 @Component 装饰器创建可复用的 UI 单元，组合系统组件实现业务逻辑

@Component
struct CustomCard {
  build() {
    Column() {
      Text("自定义卡片标题").fontSize(18)
      Button("详情").onClick(() => { /* 跳转逻辑 */ })
    }
  }
}

💎 核心组件总结表

类别 组件 核心功能 典型场景
文本输入 Text, TextInput 显示/编辑文本内容 表单输入、内容展示
交互控制 Button, Toggle 触发操作、状态切换 提交表单、开关设置
布局容器 Column, List 排列子组件、支持滚动 列表页、详情页布局
媒体展示 Image, Swiper 图片/轮播图展示 Banner 广告、商品图集
高级容器 Grid, WaterFlow 网格/瀑布流布局 图片墙、商品分类页

更多组件用法详见 HarmonyOS 官方文档 或参考 ArkUI 组件指南。实际开发中可组合使用（如 List + ListItem 构建动态列表，Swiper + Image 实现轮播图）

HarmonyOS5鸿蒙开发常用装饰器

✇掘金 前端
大胖子101

 一、UI 组件装饰器

  1. @Component

    • 标记 struct 为自定义组件，必须实现 build() 方法描述 UI 结构

    • 示例：

      @Component
struct MyButton {
  build() {
    Button('Click')
  }
}

  2. @Entry

    • 声明页面入口组件，每个页面仅允许一个 @Entry 装饰的组件

    • 常与 @Component 组合使用：

      @Entry
@Component
struct HomePage { ... }

  3. @Reusable

    • 使组件具备复用能力，优化频繁创建/销毁场景的性能（如列表滑动、条件渲染）

    • 限制：仅能在同一父组件下复用实例。

🔄 二、状态管理装饰器

1. 组件内状态

  • @State
    组件内部私有状态变量，变化触发 UI 刷新

    @State count: number = 0;

  • @Prop
    单向同步父组件的参数，子组件不可修改

    @Prop title: string; // 父组件传递的只读数据

  • @Link
    父子组件双向数据绑定，修改同步至父组件

2. 跨层级状态

  • @Provide 和 @Consume
    实现祖先与后代组件的双向同步，无需逐层传递参数

    // 祖先组件
@Provide('theme') theme: string = 'dark';

// 后代组件
@Consume('theme') theme: string;

  • @Observed 和 @ObjectLink
    用于嵌套对象或数组属性的双向同步 @Observed 装饰类，@ObjectLink 装饰子组件中接收该类的变量。

3. 应用级状态

  • @LocalStorageProp / @LocalStorageLink
    与页面级 LocalStorage 中的属性建立单向/双向同步

  • @StorageProp / @StorageLink
    与全局 AppStorage 中的属性建立单向/双向同步

🛠️ 三、UI 复用与样式装饰器

  1. @Builder

    • 封装可复用的 UI 描述块，支持引用状态变量（$$ 语法）

      @Builder customButton($$: { text: string }) {
  Button($$.text).width(100)
}

  2. @BuilderParam

    • 作为占位符，接收外部传入的 @Builder 方法

      @BuilderParam action: () => void;

  3. @Styles 和 @Extend

    • @Styles：封装多条样式属性，支持全局或组件内复用

      @Styles fancy() {
  .width(200).backgroundColor(Color.Red)
}

    • @Extend：扩展原生组件样式，支持参数传递

      @Extend(Text) function textStyle(size: number) {
  .fontSize(size).fontColor('#333')
}

  4. stateStyles

    • 依据组件内部状态（如按下、禁用）动态切换样式

⚙️ 四、辅助功能装饰器

  1. @Watch

    • 监听状态变量变化，触发回调逻辑

      @State @Watch('onCountChange') count: number = 0;
onCountChange() { ... }

  2. @Track

    • 标记类对象的属性，仅当该属性变化时触发 UI 更新（优化性能）

      class User {
  @Track name: string; // 仅 name 变化时更新 UI
}

💎 关键总结

类别 装饰器 核心用途
组件定义 @Entry, @Component 标记入口和自定义组件
状态管理 @State, @Prop, @Link 组件内状态与父子同步
跨组件通信 @Provide/@Consume 祖先-后代数据共享
UI 复用 @Builder, @BuilderParam 封装与动态注入 UI 逻辑
样式扩展 @Styles, @Extend 样式复用与原生组件扩展
性能优化 @Reusable, @Track 组件复用与精准更新

更多实践案例可参考：HarmonyOS 开发文档 developer.huawei.com/consumer/cn… 。实际开发中需根据场景组合使用，例如 @State + @Watch 实现状态监听，@Provide + @Consume 替代深层参数传递。

❌