「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用

自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。

在这里插入图片描述


关键词
  • 自定义组件
  • 复用组件
  • 属性传递
  • 组件通信
  • 组件封装

一、创建基础自定义组件

自定义组件是一个独立的 UI 单元,包含了特定的布局、样式和行为,可以在应用的不同部分复用。

1.1 基础自定义组件

创建一个显示标题和内容的简单组件,封装标题文字和内容区域:

// TitleContentCard.ets
@Component
export struct TitleContentCard {@Prop title: string; // 标题属性@Prop content: string; // 内容属性build() {Column() {Text(this.title).fontSize(20) // 设置字体大小.fontWeight(FontWeight.Bold) // 设置字体加粗.margin({ bottom: 5 }); // 设置底部边距Text(this.content).fontSize(16); // 设置内容字体大小Image($r('app.media.cat')) // 添加一张图片.width(305) // 设置图片宽度.height(360); // 设置图片高度}.padding(10) // 设置内边距.borderRadius(8) // 设置圆角.backgroundColor(Color.Gray); // 设置背景颜色}
}

1.2 使用自定义组件

在其他页面引用 TitleContentCard 组件,并传递标题和内容数据:

// Index.ets
import { TitleContentCard } from './TitleContentCard'; // 引入自定义组件@Entry
@Component
struct MainPage {build() {Row() {TitleContentCard({ title: '组件标题', content: '这里是内容' });TitleContentCard({ title: '第二个标题', content: '更多内容展示' });}.padding(20); // 设置外边距}
}

效果示例:展示多个 TitleContentCard 实例,带有不同标题和内容。
在这里插入图片描述


二、向自定义组件传递属性

自定义组件可以使用 @Prop 修饰符接收外部传入的属性,增强组件的复用性和灵活性。

2.1 属性传递

通过 @Prop 定义组件的参数,并从外部传递数据。以下示例中,titledescription 被传入并在组件中显示:

// InfoCard.ets
@Component
export struct InfoCard {@Prop title: string; // 标题属性@Prop description: string; // 描述属性build() {Column() {Text(this.title).fontSize(18) // 设置标题字体大小.fontWeight(FontWeight.Bold); // 设置标题加粗Text(this.description).fontSize(14) // 设置描述字体大小.margin({ top: 5 }); // 设置顶部边距}.padding(10) // 设置内边距.backgroundColor(Color.White) // 设置背景颜色.borderRadius(10); // 设置圆角}
}

效果示例:显示标题和描述,展示信息卡片。
在这里插入图片描述


2.2 可选属性和默认值

@Prop 设置默认值,以防止外部未传递数据时出现错误:

// InfoCard.ets
@Component
export struct InfoCard {@Prop title: string = '默认标题'; // 设置默认标题@Prop description: string = '默认描述'; // 设置默认描述build() {Column() {Text(this.title).fontSize(18).fontWeight(FontWeight.Bold);Text(this.description).fontSize(14).margin({ top: 5 });}.padding(10).backgroundColor(Color.White).borderRadius(10);}
}

效果示例:当未传递标题和描述时,展示默认信息。
在这里插入图片描述


三、嵌套与组合自定义组件

自定义组件可以嵌套使用,创建更复杂的 UI 布局,实现界面模块化。

3.1 组合组件示例

创建一个包含图片、标题和内容的卡片组件,并嵌套使用 TitleContentCard 组件:

// ImageCard.ets
import { TitleContentCard } from './TitleContentCard'; // 引入自定义组件@Component
export struct ImageCard {@Prop imageUrl: string; // 图片 URL@Prop title: string; // 标题@Prop content: string; // 内容build() {Column() {Image(this.imageUrl).width('100%') // 设置宽度.height(150) // 设置高度.objectFit(ImageFit.Cover) // 设置图片填充模式.borderRadius(10); // 设置圆角TitleContentCard({ title: this.title, content: this.content }).margin({ top: 10 }); // 设置顶部边距}.padding(10) // 设置内边距.backgroundColor(Color.White) // 设置背景颜色.borderRadius(10); // 设置圆角}
}
3.2 组合组件的使用

在其他组件中调用 ImageCard,并传入数据:

// Index.ets
ImageCard({imageUrl: 'https://example.com/sample.jpg',title: '图片标题',content: '这是一段描述文字。'
});

效果示例:展示包含图片、标题和内容的卡片。
在这里插入图片描述


四、组件状态管理与内部通信
  1. 内部状态管理

    • 自定义组件可以使用 @State 管理内部状态,控制组件内部的动态变化。例如,切换显示内容的状态:
    // ToggleContentCard.ets
    @Component
    export struct ToggleContentCard {@Prop title: string; // 标题@Prop content: string; // 内容@State isVisible: boolean = false; // 是否可见build() {Column() {Text(this.title).fontSize(18).onClick(() => {this.isVisible = !this.isVisible; // 切换可见状态});if (this.isVisible) {Text(this.content).fontSize(16).margin({ top: 10 });}}.padding(10).backgroundColor(Color.Gray).borderRadius(8);}
    }
    
  2. 父子组件通信

    • 父组件可以通过状态管理与子组件通信,实现数据共享。例如,父组件控制 ToggleContentCard 的显示状态:
    // Index.ets
    import { ToggleContentCard } from './ToggleContentCard'; // 引入子组件@Entry
    @Component
    struct MainPage {@State isCardVisible: boolean = false; // 卡片是否可见build() {Column() {Button('切换内容显示').onClick(() => {this.isCardVisible = !this.isCardVisible; // 切换状态}).padding(10).backgroundColor(Color.Green).fontColor(Color.White).borderRadius(5);if (this.isCardVisible) {ToggleContentCard({title: '点击标题查看内容',content: '这里是详细内容'}).margin(20);}}.padding(20).width('100%').height('100%').alignItems(HorizontalAlign.Center) // 水平居中.justifyContent(FlexAlign.Center); // 垂直居中}
    }
    

五、自定义组件的最佳实践
  1. 组件拆分

    • 尽量将组件拆分为小而独立的部分,每个组件负责一项特定功能,减少耦合。
  2. 可重用性

    • 为组件提供通用的属性,设置默认值,确保组件在多种场景下均能复用。
  3. 性能优化

    • 避免在组件内部频繁更新状态,减少不必要的重绘,保证性能。

小结

本篇介绍了自定义组件的创建与使用,涵盖了属性传递、嵌套组合和状态管理等内容。通过自定义组件,开发者可以构建复用性强、逻辑清晰的 UI 模块,大大提升鸿蒙应用的开发效率和维护性。


下一篇预告

下一篇将带你体验第一个互动项目——“灯光控制小项目”,学习如何结合按钮交互和状态管理来实现动态效果。


上一篇:「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
下一篇:「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/885112.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【SpringCloud】Nacos微服务注册中心

微服务的注册中心 注册中心可以说是微服务架构中的"通讯录",它记录了服务和服务地址的映射关系 。在分布式架构中, 服务会注册到这里,当服务需要调⽤其它服务时,就从这里找到服务的地址,进行调用。 注册中心…

docker对nginx.conf进行修改后页面无变化或页面报错

可能是因为没有重启nginx容器 可以执行 docker restart nginx 重启nginx试试 引入了其他的配置文件 本人安装的是docker默认的nginx,自带了一个default.conf的配置文件,并且在nginx.conf中还引入了这个文件,后面我还对nginx.conf添加了一个…

【Go语言】| 第1课:Golang安装+环境配置+Goland下载

😎 作者介绍:我是程序员洲洲,一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。 🤓 同时欢迎大家关注其他专栏,我将分享Web前后端开发、人工智能、机器学习、深…

数据库优化指南:如何将基本功能运用到极致?

一次问题 数据库的归档日志很多,多到那个机器的硬件不足以处理了。查看了一下为什么产生这么多日志。发现其实都是一些不当的使用方式。比如开发人员建立了一个xxxx_temp从这么名字上就应该能猜出来这是要做什么?美其名曰是临时表。 就是导入一批数据&am…

150道MySQL高频面试题,学完吊打面试官--关于索引的五道大厂面试题,跳槽面试很重要

前言 本专栏为150道MySQL大厂高频面试题讲解分析,这些面试题都是通过MySQL8.0官方文档和阿里巴巴官方手册还有一些大厂面试官提供的资料。 MySQL应用广泛,在多个开发语言中都处于重要地位,所以最好都要掌握MySQL的精华面试题,这也…

自攻螺钉的世纪演变:探索关键设计与应用

自攻螺钉作为现代工业和建筑中的不可或缺的标准部件,经过了超过100年的发展和创新。从1914年最早的铁螺钉设计到今天的自钻自攻螺钉,自攻螺钉的设计不断优化,以适应更复杂的应用需求。本文将回顾自攻螺钉的演变历程,分析其设计原理…

用Java实现获取视频文件的总时长

太久没有更新了~今天来更新一篇简单的小需求。 最近哈猿需要实现在后台读取到某个视频文件的总时长,也就是: 在Java中实现获取视频文件的总时长 确定了需求,那当然就是直接在网上找方案了。的确,网上的方案有很多,大…

【一些关于Python的信息和帮助】

Python是一种广泛使用的高级编程语言,它的设计哲学强调代码的可读性和简洁的语法(尤其是使用空格缩进划分代码块,而不是使用大括号或关键字)。Python支持多种编程范式,包括面向对象、命令式、函数式和过程式编程。 以…

【KMP算法】

目录 BF算法 KMP算法 BF算法 F算法,即暴力(Brute Force)算法,是普通的模式匹配算法,BF算法的思想就是将目标串S的第一个字符与模式串T的第一个字符进行匹配,若相等,则继续比较S的第二个字符和 T的第二个字符&#xf…

快速学习Django框架以开发Web API

简介 Django是一个高级Python Web框架,它鼓励快速开发和简洁实用的设计。由经验丰富的开发者构建,Django可以为你处理大量的Web开发任务,使你能够专注于编写应用的关键组件。Django的模块化设计、可复用性和广泛的社区支持,使其成为开发Web应用和API的理想选择。 在本文中…

论文 | Evaluating the Robustness of Discrete Prompts

论文《Evaluating the Robustness of Discrete Prompts》深入探讨了离散提示(Discrete Prompts)的鲁棒性,即离散提示在自然语言处理任务中面对不同扰动时的表现。研究特别关注离散提示在自然语言推理(NLI)任务中的表现…

2024中国国际数字经济博览会:图为科技携明星产品引领数智化潮流

10月24日,全球数智化领域的目光齐聚于中国石家庄正定,一场关于数字经济未来的盛会—2024中国国际数字经济博览会在此拉开帷幕。 云边端算力底座的领航者,图为科技携其明星产品惊艳亮相,期待与您共赴一场数智化的非凡之旅&#xff…

7.2、实验二:被动接口和单播更新

源文件链接: 7.2、实验二:被动接口和单播更新: https://url02.ctfile.com/d/61945102-63671890-6af6ec?p2707 (访问密码: 2707) 一、被动接口 1.介绍 定义: 在路由协议的配置中,一个被动接口指的是一个接口不发送路由更新包的配置方式&a…

4.3 Linux的中断处理流程

点击查看系列文章 》 Interrupt Pipeline系列文章大纲-CSDN博客 原创不易,需要大家多多鼓励!您的关注、点赞、收藏就是我的创作动力! 4.3 Linux的中断处理流程 先上图,一图胜千言! 图中心的蓝色部分,是L…

深度学习:循环神经网络(RNN)详解

循环神经网络(RNN)详解 **循环神经网络(Recurrent Neural Network, RNN)**是一类能够处理序列数据的神经网络,其设计使得网络可以在每个时间步上保留先前时间步的信息。RNN通过在时间步之间共享参数,能够建…

告别项目混乱,自定义工作项类型驱动项目管理进化

在项目管理中,工作项类型是用于分类和管理项目任务的基本构建块。如瀑布管理和敏捷管理,都有其特定的工作项类型来支持其独特的流程和实践: 敏捷管理的工作项类型 敏捷管理中的工作项类型强调迭代和增量开发,以用户故事为核心&a…

JAVA学习日记(十一) 常用API

一、Math //开平方根 public static double sqrt(double a); //返回结果 //开立方根 public static double cbrt(double a); 水题: public class Main {public static void main(String[] args) {//统计一共有多少个水仙花数 : abca^3b^3c^3abc// aabc/100%10//…

C++ 的异常处理详解

C 的异常处理详解 在编程过程中,错误和异常是不可避免的,合理的异常处理机制能够提高程序的健壮性。在 C 中,异常机制为捕获和处理错误提供了一种结构化的方式。本文将对 C 的异常处理进行详细探讨,包括异常的概念、如何抛出和捕…

IP协议知识点总结

IP协议主要分为三个 1. 地址管理 每个网络上的设备, 要能分配一个唯一的地址 2. 路由选择 小A 给小B 发消息, 具体应该走什么路线 3. 地址管理 IP 地址. 本质上是一个 32 位的整数 通常将, 32 位的整数使用点分十进制来表示, 如 192.168.1.1 一共可以表示 42 亿 9 千万个地址…

Linux之selinux和防火墙

selinux(强化的linux) 传统的文件权限与账号的关系:自主访问控制,DAC; 以策略规则制定特定程序读取特定文件:强制访问控制,MAC SELinux是通过MAC的方式来控制管理进程,它控制的主…