【HarmonyOS ArkTS 开发入门打卡第4天】:从函数到界面布局实战
·
学习概览
本次学习主要涵盖了 ArkTS 基础语法(函数定义、箭头函数)、声明式 UI 核心概念(组件分类、布局容器)、通用属性与文本样式、图像资源加载 以及 盒模型(内外边距) 的实战应用。通过理论结合代码演示,逐步构建了对鸿蒙应用开发的基础认知。
1. 函数定义与使用 (Functions)
在 ArkTS 中,函数是逻辑复用的基石。我们学习了两种主要的定义方式:传统函数定义和箭头函数。
1.1 传统函数定义 (function)
适用于逻辑较复杂或需要明确类型声明的场景。
- 语法要点:
- 使用
function关键字。 - 参数需明确指定数据类型(如
r: number)。 - 使用
return返回计算结果。
- 使用
💡 案例:计算圆的周长
// 定义函数:接收半径 r (number 类型),返回周长
function calc(r: number): number {
return 2 * 3.14 * r;
}
// 调用函数并存储结果
let c1: number = calc(10);
// 输出结果
console.log('圆的周长是', c1);
// 预期输出: 圆的周长是 62.8
运行结果示意:
1.2 箭头函数 (Arrow Functions)
适用于简洁的逻辑表达,常用于回调函数或简单的计算逻辑。
- 语法要点:
- 写法:
(参数) => { 逻辑体 }。 - 支持类型推断,但建议显式声明参数类型以增强代码健壮性。
- 可以将函数赋值给变量,变量名即作为函数名使用。
- 写法:
💡 案例:计算两数之和
// 定义箭头函数并赋值给 sum 变量
let sum = (num1: number, num2: number): number => {
return num1 + num2;
}
// 调用并输出
console.log('两个数的和是', sum(23, 11));
// 预期输出: 两个数的和是 34
运行结果示意:
2. 声明式 UI 基础:组件与布局
鸿蒙的 UI 构建遵循 “先容器,后内容” 的设计思路。
2.1 组件分类
| 组件类型 | 描述 | 常用组件 |
|---|---|---|
| 容器组件 | 用于包裹其他组件,决定子组件的排列方式。语法:ComponentName() { ... } |
Column (垂直排列)Row (水平排列) |
| 内容组件 | 用于展示具体信息(文本、图片等)。语法:ComponentName() |
Text, Image, Button |
2.2 通用属性 (Universal Attributes)
所有组件均可使用的属性,主要用于控制尺寸和背景:
.width()/.height(): 设置宽高。.backgroundColor(): 设置背景颜色。
2.3 文本专属属性 (Text Attributes)
针对 Text 组件的样式修饰:
.fontSize(): 字体大小。.fontColor(): 字体颜色。.fontWeight(): 字体粗细(范围 100-900,默认 400,数值越大越粗)。
3. 图像组件 (Image Component)
Image 组件支持多种资源加载方式,适应不同的业务场景。
3.1 加载本地资源
使用 $r() 资源引用语法,通常用于应用内打包的图片。
- 路径格式:
$r('app.media.资源名')
@Entry
@Component
struct Index {
build() {
Column() {
// 加载本地 media 目录下的 product 图片
Image($r('app.media.product'))
.width(200)
.height(200)
}
}
}
3.2 加载网络图片或 Base64
直接传入 URL 字符串或 Base64 编码数据。
- 注意:加载网络图片需在
module.json5中配置网络权限。
@Entry
@Component
struct Index {
build() {
Column() {
// 加载 Base64 格式的图片数据
Image('data:image/webp;base64,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')
.width(200)
.height(200)
}
}
}
4. 盒模型实战:内外边距 (Padding & Margin)
在布局中,控制组件之间的距离和对齐至关重要。
- 内边距 (
padding):内容与边框之间的距离。padding(value): 四边统一。padding({ top: v, left: v, ... }): 单独控制某一边。
- 外边距 (
margin):组件边框与其他组件之间的距离。- 用法同
padding。
- 用法同
🎯 实战练习
通过组合 Column 容器、Text 组件以及 padding/margin 属性,完成了一个特定的界面布局题目。
📝 题目要求图示:
💻 我的代码实现:
利用 Column 进行垂直堆叠,通过 margin 控制卡片间距,利用 padding 增加内部留白,使界面更加美观。
// 此处填入您的实际代码逻辑
// 示例结构:
@Entry
@Component
struct PracticePage {
build() {
Column() {
// 模拟题目中的卡片
Column() {
Text('标题内容')
.fontSize(20)
.fontWeight(FontWeight.Bold)
Text('详细描述内容...')
.fontSize(14)
.fontColor('#666')
}
.width('90%')
.padding(15) // 内边距
.backgroundColor('#f5f5f5')
.margin({ top: 10 }) // 外边距
}
.width('100%')
.padding(10)
}
}
✅ 运行结果:
成功还原了设计图效果,掌握了间距调节的核心技巧。
📝 学习总结
通过本次学习,我已经能够:
- 熟练使用 TypeScript 语法编写逻辑函数。
- 理解鸿蒙 声明式 UI 的“容器 - 内容”嵌套思想。
- 灵活运用 通用属性 和 文本属性 美化界面。
- 掌握 Image 组件的多种资源加载方式。
- 通过 Padding/Margin 精确控制页面布局细节。
下一步计划深入学习 border属性,以构建更动态的应用界面。
更多推荐






所有评论(0)