鸿蒙ArkUI布局与样式进阶（十五）—— 模块化 · 自定义组件 · 泛型机制深度解析

🚀 鸿蒙开发入门必看！30 分钟掌握 ArkUI 界面开发

大家好，我又来更新我的学习笔记啦！📒 这是我在学习HarmonyOS ArkUI 开发时新的整理与思考。本篇内容比较全面，说实话，光靠看官方文档很难完全消化知识点，而把它们转化为笔记，再写成文章，能加深很多理解。所以这篇文章里，我不仅整理了原始代码，还会穿插一些自己的见解和体会，帮助你更好地掌握这些知识。

本文整合自鸿蒙 ArkUI 实战笔记重点讲解了 TypeScript 在 ArkUI 应用开发中的模块组织、组件封装与泛型编程思想。

所有示例均为实际项目代码，可直接运行、改写和复用。

[一. 模块化基本认知](#一. 模块化基本认知)

[💡 官方定义](#💡 官方定义)

[2️⃣ 默认导出和导入](#2️⃣ 默认导出和导入)

[3️⃣ 按序导出和导入](#3️⃣ 按序导出和导入)

[4️⃣ 全部导入](#4️⃣ 全部导入)

[二. 自定义组件基础](#二. 自定义组件基础)

[💡 官方定义](#💡 官方定义)

自定义组件进一步封装

[三.自定义组件 --- 通用样式事件](#三.自定义组件 — 通用样式事件)

一. 模块化基本认知

💡 官方定义

模块化（Module） 指将一个大型程序拆分为多个可独立维护的小模块（文件），每个模块拥有独立的逻辑与作用域，

通过导出（export）和导入（import）语法进行组合使用。

🧠 个人理解

在鸿蒙 ArkUI 中，模块化是工程化开发的基础。

页面、组件、工具函数、网络请求等逻辑都应该放在各自独立的模块中。

它能让代码结构清晰、职责明确、方便多人协作与维护。

🧱 应用场景

• 将公共函数封装进 utils.ts

• 把接口请求封装在 apiService.ts

• 把页面 UI 拆成多个组件模块引用

2️⃣ 默认导出和导入

💡 定义

默认导出：一个模块只能默认导出一个内容。

导入时可以任意自定义名称。

🧩 语法模板

TypeScript 复制代码

// 默认导出
export default 需要导出的内容

TypeScript 复制代码

// 默认导入
import 自定义名称 from '模块路径'

✅ 示例

TypeScript 复制代码

// hello.ts
export default function sayHello() {
  console.log('Hello ArkUI')
}

// index.ts
import greet from './hello'
greet() // 输出：Hello ArkUI

🧠 个人理解

适用于导出单个主逻辑、默认组件或单例对象。

比如 ArkUI 的主页面 @Entry 组件，一般都会使用默认导出。

⚠️ 踩坑点

• 每个文件只能有一个 export default。

• 导入时不加 {}。

3️⃣ 按序导出和导入

💡 定义

一个模块可以按需导出多个变量、函数或类，通过花括号结构化导入。

列：

🧩 语法模板

TypeScript 复制代码

// 按序导出
export let name1 = 'ArkUI'
export function func1() {}
export class Person {}

TypeScript 复制代码

// 一次性导出多个
export { name1, func1, Person }

TypeScript 复制代码

// 按序导入
import { name1, func1, Person as User } from './module'

✅ 示例

TypeScript 复制代码

// modules.ts
export let name1 = '张三'
export let price2 = 99
export function sayHi() {
  console.log('你好，我是鸿蒙开发者')
}

// index.ts
import { name1, price2, sayHi } from './modules'
console.log('全部的数据', name1, price2)
sayHi()

🧠 个人理解

在 ArkUI 工程中常用于公共函数、常量定义或组件集合导出。

便于统一管理，提高复用性。

4️⃣ 全部导入

💡 定义

使用 import * as 模块名可一次性导入模块内所有导出成员。

✅ 示例

TypeScript 复制代码

import * as Modules from '../tools/modules'
console.log('全部的数据', Modules.name1)
console.log('全部的数据', Modules.price2)
Modules.sayHi()

🧱 应用场景

• 导入完整工具包（如 MathUtils、StringUtils）

• 汇总管理业务常量

• 维护多个导出时统一命名空间调用

⚠️ 踩坑点

• 尽量避免在大模块中使用 * 导入，会影响 Tree Shaking。

二. 自定义组件基础

💡 官方定义

自定义组件是由开发者通过 @Component 装饰器定义的 UI 单元。

系统提供的如 Text、Column、Row 称为系统组件，

而开发者创建的结构称为自定义组件。

✅ 示例

TypeScript 复制代码

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('系统组件')
      HelloComponent()
      HelloComponent()
    }
  }
}

@Component
struct HelloComponent {
  @State message: string = ''
  build() {
    Text('我是自定义组件')
  }
}

🧠 个人理解

@Entry 标记页面入口，@Component 定义复用组件。

它相当于 Vue 的组件声明方式。

通过拆分结构，可以让 UI 更具层次性与逻辑清晰度。

⚙️ 场景价值

• 封装业务区块

• 提高组件复用性

• 隔离逻辑，减少维护压力

自定义组件进一步封装

TypeScript 复制代码

@Component
struct MyCom {
  build() {
    Row() {
      Text('我是一个自定义组件')
      Button('按钮')
    }
  }
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      MyCom()
      MyHeader()
      MyCom()
    }
  }
}

@Component
struct MyHeader {
  build() {
    Text('我是头部')
      .fontColor(Color.blue)
      .width('100%')
      .height(50)
  }
}

🧠 个人理解

重复的 UI 逻辑可封装成公共组件。

类似 Vue 的「子组件复用」概念。

在实际 ArkUI 工程中，这能让布局结构清晰、维护性强。

三.自定义组件 --- 通用样式事件

💡 定义

自定义组件支持链式调用样式属性与事件方法，

例如 .width()、.onClick()、.backgroundColor() 等。

✅ 示例

TypeScript 复制代码

@Entry
@Component
struct Index {
  build() {
    Column() {
      HelloComponent()
        .width(200)
        .height(100)
        .backgroundColor(Color.orange)
        .onClick(() => {
          console.log('点击了自定义组件')
        })
    }
  }
}

@Preview
@Component
export struct HelloComponent {
  @State info: string = '默认info'
  build() {
    Row() {
      Text(this.info)
      Button('修改数据')
    }
  }
}

🧠 个人理解

这种链式语法让 ArkUI 的声明式布局更自然，

样式、事件与结构一体化，大大提高开发效率。

⚠️ 踩坑点

• 事件绑定中要注意闭包作用域。

• @State 状态变化会重新触发 build 渲染。

四.泛型约束

💡 定义

先复习一下泛型：

定义：

实例：

泛型约束（Generic Constraints）限制泛型参数必须符合某个接口或结构。

语法：

🧩 语法模板

TypeScript 复制代码

interface 接口名 {
  属性: 类型
}
function 函数名<T extends 接口名>(param: T) {
  console.log(param.属性)
}

✅ 示例

TypeScript 复制代码

interface ILength {
  length: number
}
function fn<T extends ILength>(param: T) {
  console.log(param.length)
}

🧠 个人理解

泛型约束能在编译期校验类型安全。

在 ArkUI 中，处理字符串数组或组件列表时常用。

五.多个泛型参数

💡 定义

可在函数中声明多个类型变量，以便同时处理不同类型数据。

✅ 示例

TypeScript 复制代码

function funcA<T, T2>(param1: T, param2: T2) {
  console.log('参数1', param1)
  console.log('参数2', param2)
}
funcA<string, number>('大白菜', 98)
funcA<string[], boolean[]>(['小花猫'], [false])

🧠 个人理解

这种方式常用于数据映射、请求响应、组件泛型化。

六.泛型接口

💡 定义

在接口中使用泛型参数，构建可复用的类型定义模板。

语法：

✅ 示例

TypeScript 复制代码

interface IdFunc<Type> {
  id: (value: Type) => Type
  ids: () => Type[]
}

let obj: IdFunc<number> = {
  id(value) { return value },
  ids() { return [1, 3, 5] }
}

🧱 应用场景

在 ArkUI 状态管理中可定义通用 Store 接口类型：

统一约束数据读取与写入逻辑。

七.泛型类

💡 定义

在类定义时结合泛型，可让属性与方法类型在不同数据下保持灵活。

语法：

✅ 示例

TypeScript 复制代码

class Person<T> {
  id: T
  constructor(id: T) {
    this.id = id
  }
  getId(): T {
    return this.id
  }
}

// 使用
let p = new Person<number>(10)
let p1: Person<string> = new Person<string>('abc')

🧠 个人理解

泛型类在 ArkUI 的数据建模中十分常见。

比如封装 Response<T>、ListItem<T> 等模型。

🧭 总结与思维导图

编号知识点关键词应用价值

1 模块化 export/import 拆分逻辑结构

2 自定义组件 @Component 构建复用组件

3 通用样式事件 .width().onClick() 样式链式编程

4 泛型约束 extends 限定类型结构

5 泛型接口 interface 数据接口抽象

6 泛型类 class 通用模型构建

🚀 写在最后

模块化让代码清晰，组件化让界面高效，泛型化让逻辑强健。

这三者结合，构成了鸿蒙 ArkUI 工程化开发的底层思维。

✅ 建议你在项目中多使用模块拆分 + 自定义组件封装 + 泛型抽象，

从"能跑"到"能复用"，就是你成为高级鸿蒙开发者的关键一步。

恭喜您，迈出了鸿蒙应用开发坚实的一步！🎉

🤔 接下来，我将继续为大家更新鸿蒙开发的相关知识点，如果喜欢，记得关注驻波

那年窗外下的雪.-CSDN博客