HarmonyOS应用开发入门笔记：布局原理+常见交互组件实战

Hana_0901

205人浏览 · 2026-06-24 18:05:20

Hana_0901 · 2026-06-24 18:05:20 发布

一.文本显示

Text是文本组件，用于展示用户视图，如显示文章的文字内容。

创建文本 Text可通过以下两种方式来创建：

string字符串：Text('我是一段文本')

引用Resource资源：资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json，例如

{
"string": [
{
"name": "module_desc",
"value": "模块描述"
}
]
}

// 请将$r('app.string.module_desc')替换为实际资源文件，在本示例中该资源文件的value值为"模块描述"
Text($r('app.string.module_desc'))
.baselineOffset(0)
.fontSize(30)
.border({ width: 1 })
.padding(10)
.width(300)

例如：

二.按钮Button

简单创建

Button('我是按钮')

常见样式调整

简单交互

这是层叠加按钮的例子还有文本显示

单选框 (Radio)

创建单选框

Radio(options: {value: string, group: string})

怎么给单选框加点击后的交互逻辑——比如选完某个选项之后，怎么拿到用户选了哪个，做后续的处理（比如跳页、校验之类）

Radio支持设置选中状态和非选中状态的样式。

Radio({ value: 'Radio1', group: 'radioGroup' })
.checked(false)
Radio({ value: 'Radio2', group: 'radioGroup' })
.checked(true)

场景示例

我拿一个来做例子解释：

Radio({ value: '本科', group: 'education' })

value: '本科'：这个按钮代表的选项就是「本科」，你选它，最后得到的结果就是“我选了本科” • group: 'education'：给这个按钮贴个标签「我属于学历这一组」，只要是贴了这个标签的按钮，都只能选一个，选我就不能选别人了，然后再调大小高度最后写

.checked(true) 页面一打开，这个按钮默认就是选中的

切换按钮 (Toggle)

创建切换按钮

Toggle(options: { type: ToggleType, isOn?: boolean })

其中，ToggleType为开关类型，包括Button、Checkbox和Switch，isOn为切换按钮的状态。

接口调用有以下两种形式：

创建不包含子组件的Toggle。

当ToggleType为Checkbox或者Switch时，用于创建不包含子组件的Toggle：

Toggle({ type: ToggleType.Checkbox, isOn: false }).id('toggle1') // 请开发者替换为实际的id
Toggle({ type: ToggleType.Checkbox, isOn: true }).id('toggle2') // 请开发者替换为实际的id

Toggle({ type: ToggleType.Switch, isOn: false }).id('toggle3') // 请开发者替换为实际的id
Toggle({ type: ToggleType.Switch, isOn: true }).id('toggle4') // 请开发者替换为实际的id

除支持通用事件外，Toggle还用于选中和取消选中后触发某些操作，可以绑定onChange事件来响应操作后的自定义行为。

Toggle({ type: ToggleType.Switch, isOn: false })
.onChange((isOn: boolean) => {
if(isOn) {
// 需要执行的操作
// ···
}
})

场景示例

这是一个演示两种Toggle组件（复选框、开关）的页面，当你切换开关时，下方文字会同步更新显示开关的状态。

@State isOpen:boolean = true：用状态变量保存开关的状态，初始默认是打开（true），状态变化后页面会自动刷新。

第一个Toggle：复选框默认关闭状态

第二个Toggle：开关创建一个开关样式的Toggle：

• type:ToggleType.Switch：指定类型为滑动开关

• isOn:this.isOpen：开关状态和我们定义的isOpen状态变量绑定

• 设置了尺寸，选中状态的颜色为红色

• onChange是状态切换的回调：当用户点击切换开关，就把isOpen取反（打开变关闭、关闭变打开），状态改变后页面自动刷新。

根据当前isOpen的值显示对应文字：打开就展示"开关已打开"，关闭就展示"开关已关闭"，状态切换后文字会同步变化。

使用纵向布局容器Column排列内容，首先添加了一行提示文本，设置文字大小为20。

创建了开关类型的Toggle组件：

• type:ToggleType.Switch：指定组件为滑动开关样式

• isOn:true：设置开关默认是打开状态

• 配置了开关的宽高

• 核心是.enabled(false)：把开关设置为禁用状态，此时用户无法点击切换开关，对应右侧预览效果中灰化不可点击的打开态开关。

build()是构建UI的方法，使用纵向布局Column排列内容

• 添加文本后，根据状态isOpen动态设置文字颜色：isOpen为真则文字变红，否则变绿

创建开关类型的Toggle组件，开关的选中状态和isOpen状态绑定

• 通过onChange监听开关切换：每次切换时，将isOpen取反，状态改变后会自动触发文字颜色刷新。

文本内容根据isShow动态改变：开启则显示"开关已开启"，关闭显示"开关已关闭"；同时文字颜色同步变化，开启为红色，关闭为绿色。
使用横向布局Row排列文字和开关，元素间距20vp
创建一个开关样式的Toggle组件：开关状态和isShow状态绑定，选中后的开启颜色设置为红色，和标题文字颜色保持一致
通过onChange监听切换：用户切换开关后，直接把新的开关值赋值给状态isShow，触发页面UI刷新。

三.点击事件onClick.@state和按钮结合

在ArkTS里，@State就是用来给会变的组件数据做标记的装饰器：

• 被它标记的变量就叫「状态变量」

• 只要变量的值发生改变，ArkUI会自动刷新对应页面区域，不用你手动修改页面内容，是鸿蒙里最基础的状态管理方式。

onClick比如说设置一个开关按钮或者文本是点击一下就有开关和关闭

什么是点击事件onClick？

onClick是组件的点击回调方法，你只要给它传一个函数，用户点击这个组件的时候，就会自动执行你写好的逻辑代码，一般用来处理用户交互（比如点按钮切换状态、跳转页面等）。

场景示例

整体代码运行逻辑梳理

1. 页面刚打开的时候，isOpen默认是false，页面显示**「开关已关闭」+绿色文字**

2. 用户点击「点击切换状态」按钮，触发绑定的onClick回调

3. 回调里把isOpen的值改成了!false也就是true

4. 因为isOpen是被@State标记的状态变量，值改变后ArkUI自动刷新页面

5. 最终页面变成**「开关已开启」+红色文字**，再点一次就会切回去，循环往复

这个是一个状态变量做带限制的计数器例子

声明状态变量：用@State定义了一个数字类型的变量count，初始值是0，@State让这个数字变的时候，页面上的数字能自动刷新，不用我们手动改界面。
界面布局最上方用大字号加粗文字，显示当前count的数值；
接下来并排放两个按钮，分别是「递增+」「递减-」，还提示了当前数值范围是0-10，用灰色小字标注。
按钮点击逻辑：点**递增+**按钮的时候：会先判断count是不是小于10，如果满足，就让count加1；如果已经到10了，就不做改动，保证数字不会超过上限；
点**递减-**按钮的时候：会先判断count是不是count减1；大于0，如果满足，就让如果已经是0了，就不改动，保证数字不会低于下限；

最终效果：每次点按钮，count符合范围限制就会改变数值，而因为它是@State状态变量，页面最上方的数字会自动刷新，最终就得到了右边预览里，可控增减的计数器效果。

四.TextInput输入框组件

TextInput是单行输入框：TextInput()

TextInput是HarmonyOS ArkUI框架里的单行文本输入核心组件，专门用于采集用户短文本信息，是登录页、搜索框、表单等场景的基础交互入

支持自定义占位提示文字、输入框尺寸、背景样式
内置多种输入类型适配：普通文本、密码、邮箱、手机号、数字等，自动匹配对应软键盘
支持输入内容监听、回车提交、焦点变化等交互事件

整体页面设置
和之前的登录页逻辑一样，让整个页面占满屏幕，同时把所有内容都自动居中，每块内容之间留出30的空隙，保证页面不拥挤。

大标题设置
顶部做了「完善个人信息」的大标题：用了超大字号+加粗字体，还在标题下方留了足够空隙，和下方输入框分隔开，让页面层次很清晰。

三个信息输入三个填写信息的输入框框
从上往下做了，样式完全统一：都是相同的宽度、更大的高度、浅灰色背景、圆角设计，看起来清爽柔和：

整体布局设置
最外层把整个页面内容整体居中排布，占满整个手机屏幕，所有内容之间留space30的空隙，让页面不会挤在一起。

先写了一个大标题加粗fontweight

第一个输入框（账号输入）

• 先加提示文字请输入学号/手机号码，用户没输入的时候，输入框就会显示这个提示，告诉用户该填什么；

• 还设置了固定宽度、高度，浅粉色的背景、合适的字体大小，加了圆角让输入框更好看不生硬。第二个输入框（密码输入）
这是密码输入框，尺寸样式和账号输入框基本一致，多了一个特殊设置：type(InputType.Password)，就是把输入的内容隐藏成圆点，和右边预览效果一样，防止别人看到你的密码，更安全。提示文字是请输入密码，告诉用户这里填密码。

设置了一个简单的按钮并把整体内容居中