目录
一、HarmonyOS 组件开发基础
在 HarmonyOS 应用开发的广袤天地里，组件开发无疑是一块重要基石，是构建用户界面的关键环节。组件，简单来说，就是屏幕上展示出来的各种元素，是构成应用界面的基本单元。就好比搭积木，每一块积木是一个组件，通过不同的组合方式，能搭建出千变万化的建筑，而组件的合理组合就能构建出功能各异、美观实用的应用界面。
HarmonyOS 中的组件丰富多样，从功能上大致可分为以下几类。显示类组件，这类组件主要负责数据展示，像我们常见的 Text（文本）组件，用于显示一段文字内容，无论是标题、正文还是提示信息都离不开它；Image（图片）组件则用于展示图片，无论是本地图片还是网络图片，都能轻松加载呈现 ，比如电商 APP 商品详情页的商品图片展示。交互类组件，它们的存在让用户与应用之间有了互动的可能。Button（按钮）组件，用户点击它可以触发各种操作，像登录按钮，点击后进行登录验证；TextField（文本输入框）组件，允许用户输入文本信息，例如在搜索框中输入关键词进行搜索 。布局类组件则是比较特殊的存在，它们决定了其他组件的展示方式，如同房间的布局规划，不同的布局方式让家具摆放各有不同。DirectionalLayout（线性布局），可以让组件按照水平或垂直方向依次排列；DependentLayout（相对布局），组件的位置基于其他组件或父容器来确定 。
在实际的应用开发中，组件开发的重要性不言而喻。它是实现应用功能和交互设计的直接手段。一个社交类应用，聊天界面中消息展示需要 Text 组件，发送消息按钮是 Button 组件，用户头像用 Image 组件展示。这些组件的合理布局与交互设计，直接影响着用户聊天体验。从代码角度看，组件开发能提高代码的复用性。将一些常用的功能模块封装成组件，在不同页面或项目中重复使用，减少重复代码编写。比如一个通用的弹窗组件，在多个页面需要提示用户信息时都能调用，节省开发时间和精力。而且组件化开发有利于团队协作，不同开发人员可以专注于不同组件的开发，提高开发效率，就像工厂流水线作业，各司其职，共同打造出完整的应用。
二、深入 HarmonyOS 组件开发
2.1 自定义组件开发
在 HarmonyOS 开发里，自定义组件是非常强大的功能。简单来讲，自定义组件就是开发者按照自身业务需求，把已有的系统组件进行组合、封装而形成的新组件。它就像是一个个性化的积木块，是根据你的独特设计打造出来的 。比如说在一个电商应用中，商品展示模块里每个商品项都包含图片、名称、价格等信息，将这些相关组件组合封装成一个 “商品展示组件”，在不同商品展示页面都能复用，这就是自定义组件的实际应用。
自定义组件有着诸多显著特点。它具备高度的可组合性，开发者可以自由地将各种系统组件按照自己的想法组合在一起，就像玩乐高积木一样，把不同形状的积木拼成独特的造型 。可重用性也是它的一大亮点，一次定义，多处使用，大大减少了重复代码的编写。一个通用的弹窗组件，在应用的多个功能模块中都能调用，提高开发效率 。它还实现了数据驱动 UI 更新，通过改变状态变量，就能轻松驱动 UI 界面的刷新，让界面与数据保持实时同步 。
开发自定义组件一般遵循以下步骤。定义组件结构，基于struct关键字来构建自定义组件，并用@Component装饰器标识，让它具备组件化的能力 。比如定义一个简单的计数器组件：
@Component
struct CounterComponent {
@State count: number = 0;
build() {
Column() {
Text(`${this.count}`).fontSize(20);
Button('+1').onClick(() => {
this.count++;
});
}
}
}在上述代码中，我们定义了一个CounterComponent计数器组件，使用@State修饰的count变量来记录计数，build方法中通过Column布局包含一个显示计数的Text组件和一个点击增加计数的Button组件。
再就是设置组件属性和方法，通过定义属性，让组件更加灵活通用，能接收外部传入的数据；定义方法，实现组件内部的业务逻辑 。假设我们要扩展这个计数器组件，添加一个重置功能：
@Component
struct CounterComponent {
@State count: number = 0;
// 新增重置方法
resetCount() {
this.count = 0;
}
build() {
Column() {
Text(`${this.count}`).fontSize(20);
Button('+1').onClick(() => {
this.count++;
});
// 新增重置按钮
Button('Reset').onClick(() => {
this.resetCount();
});
}
}
}这里新增了resetCount方法用于将计数器重置为 0，并在build方法中添加了一个点击调用该方法的 “Reset” 按钮。
下面通过一个实际例子 —— 待办事项列表页面开发，来更直观地展示自定义组件的基本用法 。首先，定义一个待办事项组件TodoItem：
@Component
export struct TodoItem {
@Prop text: string;
@Prop isCompleted: boolean;
build() {
Row() {
Checkbox(this.isCompleted).onChange((isChecked) => {
// 这里可以添加逻辑将状态同步到数据层
});
Text(this.text).textDecoration(this.isCompleted? TextDecoration.LineThrough : TextDecoration.None);
}.padding(10);
}
}在这个TodoItem组件中，通过@Prop接
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
