【11】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-模块化语法与自定义组件

序言：

本文详细讲解了关于鸿蒙系统学习中的模块化语法与自定义组件，在模块化语法中我们学习到了多种导入导出方式，实现了在一个项目中，通过引用不同的组件，让我们整体代码的可读性更强，相当于我们把一个手机拆分成了屏幕、芯片、外壳...等多种原件，最后组装成手机。

然后我们学习了自定义组件，在自定义组件模块中，我们学到了自定义组件中的各种成员参数的性质，基础属性和成员变量函数及成员函数的区别，最后我们学习了BuilderParam构建函数，可以起到传递UI的作用，使我们的代码更加灵活和具有可维护性。

笔者也是跟着B站黑马的课程一步步学习，学习的过程中添加部分自己的想法整理为笔记分享出来，如有代码错误或笔误，欢迎指正。

B站黑马的课程链接：鸿蒙课程介绍_哔哩哔哩_bilibili

往期笔记：

【01】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs基础语法与界面开发基础

【02】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-界面进阶与布局排布（附QQ登陆、得物、京东登陆综合案例+代码）

【03】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-更多布局（弹性/层叠）方式与界面开发综合（附飞狗卡片+B站卡片案例+实战开发支付宝界面+代码）

【04】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs进阶运算符+状态管理（附综合案例美团购物车）

【05】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-条件渲染+if/switch判断与for/while循环（附计数器、京东加购案例）
【06】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-综合案例·生肖抽奖卡具体实现（类似支付宝集五福）
【07】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Swiper轮播组件与样式&结构重用  

【08】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Scroll容器与Tabs组件

【09】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Class类基础全解（属性、方法、继承复用、判断）

【10】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-泛型基础全解（泛型函数、泛型接口、泛型类）及参数、接口补充

目录

一.模块化语法

1.模块化基本认知

2.默认导出和导入

3.按需导出和导入

4.全部导入

二.自定义组件

1.自定义组件-基础

2.自定义组件-通用属性和语法

3.自定义组件-成员变量函数

一.模块化语法

1.模块化基本认知

1）简介：

模块化：把一个大的程序，【拆分】成若干小的模块，通过【特定的语法】，可以进行任意组合，ArkTs中的每个ets文件，都可以看作是一个模块

2.默认导出和导入

1）简介：

默认导出：指一个模块，只能默认导出一个值或对象。使用时，可以自定义导入名称。

2）使用步骤：

①当前模块中国导出模块。

②需要使用的地方导入模块。

3）语法：

//默认导出
export  default 需要导出的内容
//默认导入
import xxx from '模块路径'

4）基础代码实例：

①导入num

src/main/ets/pages/05tools/module1.ets

//一个ets文件，就是一个模块，每个模块之间独立。
interface Person{
  name:string
  age:number
}
let num:number = 10
let person:Person = {
  name:'河马',
  age:88
}
//默认导出
export default num

src/main/ets/pages/Index.ets

//路径：查找文件时，从起点到终点的路线
//相对路径：从当前文件出发查找目标文件
// 找上一级用../
// 同级目录用 ./
import myNum from './05tools/module1'
console.log('module1中的数据',myNum)

如果想导出和导入person也是一样的

②导入person

src/main/ets/pages/05tools/module1.ets

//一个ets文件，就是一个模块，每个模块之间独立。
interface Person{
  name:string
  age:number
}
let num:number = 10
let person:Person = {
  name:'河马',
  age:88
}
//默认导出
export default person

src/main/ets/pages/Index.ets

//路径：查找文件时，从起点到终点的路线
//相对路径：从当前文件出发查找目标文件
// 找上一级用../
// 同级目录用 ./
import result from './05tools/module1'
console.log('module1中的数据',JSON.stringify(result))

③结果

3.按需导出和导入

1）简介：

按需导出：指一个模块，可以按照需要，导出多个特性。

2）基础代码实例：

①写法1 逐个导出

src/main/ets/pages/05tools/module2.ets

//按需导出
//写法1 逐个导出
export let name1:string = '荷花'
export let price:number = 9.98
export let sayHi = ()=>{
  console.log('打招呼')
}

src/main/ets/pages/Index.ets

//2.按需导入
import {name1,price,sayHi}from '../pages/05tools/module2'
console.log('module2中的数据',name1,price)
sayHi()

②写法2 一次性多个特性，进行导出

let name1:string = '荷花'
let price:number = 9.98
let sayHi = ()=>{
  console.log('打招呼')
}
//写法2 一次性多个特性，进行导出
export {
  name1,
  price,
  sayHi
}

Index代码不变，最后运行的效果都是一样的

3）别名：

4.全部导入

1）简介：

将所有的按需导入，全部导入进来→导出部分不需要调整，调整导入的语法即可。

2）基础代码实例：

src/main/ets/pages/05tools/module3.ets

let name1:string = '吕小布'
let name2:string = '陈美嘉'
let name3:string = '曾小贤'


let price1:number = 8888
let price2:number = 5555


let sayHi=()=>{
  console.log('打招呼')
}


let run=()=>{
  console.log('奔跑')
}


export {
  name1,name2,name3,
  price1,price2,
  sayHi,run
}

src/main/ets/pages/Index.ets

//3.全部导入

import * as Module3 from '../pages/05tools/module3'
console.log('全部导入方法中的数据',Module3.name1)
console.log('全部导入方法中的数据',Module3.name2)
console.log('全部导入方法中的数据',Module3.name3)
console.log('全部导入方法中的数据',Module3.price1)
Module3.sayHi()
Module3.run()

结果：

二.自定义组件

1.自定义组件-基础

1）概念：

由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。

2）基本语法及使用：

@Component
struct HelloComponent{
  //状态变量
  @State message:string=''
  build() {
    //描述UI
    Column(){
      Text('我是一个自定义组件')
      Button('我是按钮')
    }
  }
}
@Entry
@Component


struct Index {


  build() {
    Column(){
      HelloComponent()
    }
  }


}

3）具体应用：

比如说我们在一个界面上划分为上中下三部分，如头部、身体和腿，我们就可以定义三个组件来分别表示。

@Component
struct HelloComponent{
  //状态变量
  @State message:string=''
  build() {
    //描述UI
    Column(){
      Text('我是一个自定义组件')
      Button('我是按钮')
    }
  }
}
@Component
struct MyHead{
  //状态变量
  @State message:string=''
  build() {
    //描述UI
    Column(){
      Text('我是一个头部')
      Button('我是按钮')
    }
  }
}
@Component
struct MyBody{
  //状态变量
  @State message:string=''
  build() {
    //描述UI
    Column(){
      Text('我是一个中间的身体')
      Button('我是按钮')
    }
  }
}
@Component
struct MyLeg{
  //状态变量
  @State message:string=''
  build() {
    //描述UI
    Column(){
      Text('我是一个底下的腿部')
      Button('我是按钮')
    }
  }
}
@Entry
@Component


struct Index {


  build() {
    Column(){
      HelloComponent()
      MyHead()
      MyBody()
      MyLeg()
    }
  }


}

2.自定义组件-通用属性和语法

1）简介：

自定义组件可以通过点语法，设置 通用样式（宽高背景色...）、通用事件。

2）基础语法及使用：

@Component
struct HelloComponent {
  @State info:string = '默认info'
  build() {
    Row(){
      Text(this.info)
      Button('修改数据')
    }
    .width(100)
    .height(80)
    .backgroundColor(Color.Brown)
  }
}
@Entry
@Component


struct Index {


  build() {
    Column(){
      HelloComponent()
        .width(200)
        .height(100)
        .backgroundColor(Color.Orange)
        .onClick(()=>{
          console.log('外部添加的点击事件')
        })
    }
  }
}

我们未来会建一个Component目录中，当我们需要什么组件，就可以把这些组件写在这个文件夹里，这样我们以后用到这些组件就可以使用上文提到的导出，一般我们都是按需导出。

我们在文件夹里写的组件因为不是入口，所以无法直接预览，这个时候我们可以添加@Preview标签，这样我们就可以预览了，方便我们进行组件的调试与编写。

3.自定义组件-成员变量函数

1）简介：

除了必须要实现build()函数外，还可以定义其他成员函数，以及成员变量。

成员变量的值→外部可传参覆盖。

2）基础语法及使用

@Component
struct Module1 {
  //状态变量
  @State msg:string=''
  //成员变量-数据
  info:string = ''
  //成员变量*函数-可以外部修改
  sayHello=()=>{


  }
  //成员函数-不可以外部修改
  sayHi(){}
  build() {
    ///.....描述UI
  }
}
@Entry
@Component


struct Index {


  build() {
    Column(){
      Module1()
      Module1({info:'你好',msg:'修改一下状态变量'})
      Module1({sayHello(){console.log('传入的逻辑')}})
    }
  }


}

3）BuilderParam构建函数-传递UI

@Component
struct SonCom {
  //1.定义构建函数
  @BuilderParam ContentBuilder:()=>void=this.defaultBuilder
  //2.定义默认值
  @Builder
  defaultBuilder(){
    Text('默认的内容')
  }
  build() {
    //3.使用构建函数，构建结构
    Column(){
      this.ContentBuilder()
    }
  }
}
@Entry
@Component


struct Index {


  build() {
    Column(){
      SonCom(){
        Button('传入的内容')
      }


    }
  }


}

感谢观看

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

认知战认知作战：认知战与安全挑战中方企业在海外的应对策略分析

认知战认知作战：认知战与安全挑战中方企业在海外的应对策略分析

认知战认知作战：认知战与安全挑战中方企业在海外的应对策略分析 关键词：认知战, 中方企业, 恐怖袭击, 安全挑战, 信息传播, 社会责任, 风险管理, 国际合作,认知作战,新质生产力,人类命运共同体,认知战,认知域,认知战研究中心,认知战争,认知战战术,认知战…
阅读更多...
MATLAB中lsqminnorm函数用法

MATLAB中lsqminnorm函数用法

目录 语法 说明 示例 求解具有无限个解的线性系统 指定容差以减少含噪数据的影响 切换显示低秩矩阵警告 lsqminnorm函数的功能是线性方程的最小范数最小二乘解。 语法 X lsqminnorm(A,B) X lsqminnorm(A,B,tol) X lsqminnorm(___,rankWarn) 说明 X lsqminnorm(A,B…
阅读更多...
Ansible学习之ansible-pull命令

Ansible学习之ansible-pull命令

想要知道ansible-pull是用来做什么的，就需要了解Ansible的工作模，Ansible的工作模式有两种： push模式 push推送，这是Ansible的默认模式，在主控机上编排好playbook文件，push到远程主机上来执行。pull模式 p…
阅读更多...
QT系统学习篇（2）- Qt跨平台GUI原理机制

QT系统学习篇（2）- Qt跨平台GUI原理机制

一、Qt工程管理 1、新建项目： 我们程序员新建项目对话框所有5类项目模板 Application: Qt的应用程序，包含Qt Quick和普通窗口程序。 Library: 它可以创建动态库、静态库、Qt Creator自身插件、Qt Quick扩展插件。 其他项目: 创建单元测试项目、子目录项…
阅读更多...
数据分析之Spark框架介绍

数据分析之Spark框架介绍

文章目录 概述一、发展历程与背景二、核心特点三、生态系统与组件四、应用场景五、与其他大数据技术的比较 核心概念1. 弹性分布式数据集（RDD, Resilient Distributed Dataset）2. 转换（Transformations）和动作（Actions…
阅读更多...
Redis主从复制(replica)、哨兵

Redis主从复制(replica)、哨兵

一、Redis主从复制介绍: 主从复制，master主机以写为主，slave从机以读为主，当主机数据变化的时候自动将新的数据异步同步到其他从机数据库；能够实现读写分离， 容灾恢复、 数据备份以及水平扩容支撑高并发 二、实现方法…
阅读更多...
【stm32】ADC的介绍与使用

【stm32】ADC的介绍与使用

ADC的介绍与使用 1、ADC介绍2、逐次逼近型ADC3、ADC电路4、ADC基本结构程序代码编写：ADC 通道和引脚复用的关系 5、转换模式（1）单次转换，非扫描模式转换流程：程序编写： （2）连续转换&…
阅读更多...
基于 springboot vue中学生日常行为评分管理系统设计与实现

基于 springboot vue中学生日常行为评分管理系统设计与实现

博主介绍：专注于Java（springboot ssm 等开发框架） vue .net php python(flask Django) 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找…
阅读更多...
​通用代码生成器典型应用场景​

​通用代码生成器典型应用场景​

​通用代码生成器典型应用场景​ 1. 通用代码生成器简介 通用代码生成器或称动词算子式通用代码生成器，是一系列各种语言的易用的整站式代码生成器。其根本原理是把方法分解成动词算子和域对象的笛卡儿积。根据动词算子式代码生成器的基本原理。所有方法&#xff…
阅读更多...
网 络 安 全

网 络 安 全

网络安全是指保护网络系统及其所存储或传输的数据免遭未经授权访问、使用、揭露、破坏、修改或破坏的实践和技术措施。网络安全涉及多个方面，包括但不限于以下几个方面： 1. 数据保护：确保数据在传输和存储过程中的完整性和保密性，…
阅读更多...
[Python] 《人生重开模拟器》游戏实现

[Python] 《人生重开模拟器》游戏实现

文章目录 优化点一：多元化的天赋系统示例天赋：天赋选择代码： 优化点二：更加多样化的随机事件年龄阶段划分：随机事件代码： 优化点三：设定人生目标人生目标示例：人生目标代码&#xff…
阅读更多...
python爬虫 - 初识requests模块

python爬虫 - 初识requests模块

🌈个人主页：https://blog.csdn.net/2401_86688088?typeblog 🔥 系列专栏：https://blog.csdn.net/2401_86688088/category_12797772.html 前言 requests 是一个用于发送 HTTP 请求的 Python 库，设计简单且功能强大&am…
阅读更多...
如何创建虚拟环境并实现目标检测及验证能否GPU加速

如何创建虚拟环境并实现目标检测及验证能否GPU加速

创建虚拟环境： 先创建一个虚拟python环境，敲如下代码 然后再到该虚拟环境里面安装自己想要的包 激活虚拟环境 然后再聚类训练这些 验证GPU加速 阿里源 pip install torch torchvision -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mir…
阅读更多...
B树系列解析

B树系列解析

我最近开了几个专栏，诚信互三！ > |||《算法专栏》：：刷题教程来自网站《代码随想录》。||| > |||《C专栏》：：记录我学习C的经历，看完你一定会有收获。||| > |||《Linux专栏》&#xff1…
阅读更多...
YOLO11改进|卷积篇|引入线性可变形卷积LDConv

YOLO11改进|卷积篇|引入线性可变形卷积LDConv

目录 一、【LDConv】卷积1.1【LDConv】卷积介绍1.2【LDConv】核心代码 二、添加【LDConv】卷积2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、【LDConv】卷积 1.1【LDConv】卷积介绍 下图是【LDCNV】的结构图，让我们简单分析…
阅读更多...
鸿蒙HarmonyOS开发生态

鸿蒙HarmonyOS开发生态

1、官网 华为开发者联盟-HarmonyOS开发者官网，共建鸿蒙生态 2、开发工具IDE下载及使用 https://developer.huawei.com/consumer/cn/ 3、使用帮助文档 4、发布到华为应用商店 文档中心
阅读更多...
多模态大语言模型（MLLM）-Blip2深度解读

多模态大语言模型（MLLM）-Blip2深度解读

前言 Blip2是一个多模态大语言模型，因其提出时间较早（2023年），且效果较好，很快成为一个标杆性工作。Blip2中提出的Q-former也成为衔接多模态和文本的重要桥梁。 Blip2发表时间是2023年，现在引用已经3288了…
阅读更多...
事件抽取（Event Extraction, EE）

事件抽取（Event Extraction, EE）

一、引言 事件抽取（Event Extraction, EE）是信息抽取领域中的一个重要任务，旨在从非结构化文本中识别和抽取事件相关的信息。事件抽取通常包括识别事件触发词、事件类型以及事件中的参与者、时间、地点等元素，最终将这些信息结构…
阅读更多...
常见的基础系统

常见的基础系统

权限管理系统支付系统搜索系统报表系统API网关系统待定。。。 Java 优质开源系统设计项目 来源：Java 优质开源系统设计项目 | JavaGuide 备注：github和gitee上可以搜索到相关项目
阅读更多...
【含文档】基于Springboot+Android的房屋租赁App（含源码+数据库+lw）

【含文档】基于Springboot+Android的房屋租赁App（含源码+数据库+lw）

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统定…
阅读更多...
最新文章

Copyright @ 2022~2023