arkUI：自定义构建函数（参数的引用传递）

1 主要内容说明

一个程序由多个部分组成，我们先举个例子源码1，创建一个卡片效果以显示每个人的各项信息。有具体显示样式的函数方法Message_view，然后还有接口部分Message，以及一个入口文件。我们先把相关内容功能全部编写运行于一个文件内，先运行显示一下效果。然后将卡片显示样式的方法部分，和接口类型部分，拆分各放于其他文件中，再使用导入和导出的方式，再次运行程序呈现效果。程序运行的观看效果界面相同，只是呈现代码的方式不同。本文大目标仍是展示自定义构建函数的参数传递效果的。
我们都知道一个程序是多个功能组成的，每个文件配置相应功能的代码，更易于程序的维护和管理。往大了讲，一个项目多个组成部分，各个人在不同的地区编写各自的功能部分，最后再汇总组合运行，使得项目的完成更有灵活性。
关于人员的内容，我们本文是创建了一个对象数组aar，用于数据的导入显示。这里我们可以把数组arr理解成一个小数据库。可以类比，导入数据库的数据内容，是不是也可以在此设置相关的函数，用以数据库数据的导入，将数据设置相关显示样式，以呈现观察。

2 相关内容

我们创建一个用于显示人员卡片信息的程序。程序大的方向主要有三部分。

• 第一部分，一个是程序的入口，在@Entry组件内，引用自定义构建函数的方法Message_view。
• 第二部分，Message_view方法是显示单个卡片的具体样式，具体举例如下：
  
• 第三部分，创建接口类型Message，用于引用设置Message_view方法的各项参数。

我们在@Entry组件内，使用ForEach方法，将数组内的每个人的参数以第二部分卡片的形式各个显示出来。

2.1 自定义构建函数（引用传参）

2.1.1 源码1的相关说明

• 定义数据接口：使用 Message 接口定义用户信息结构，包括姓名、年龄、身高、爱好和编号。

• 状态变量：使用 @State 定义一个数组 arr，存储多个用户的数据。

• 页面结构：在 build 函数中使用 ForEach 遍历 arr 数组，为每个用户调用 Message_view 组件，生成信息卡片。

• 卡片显示：Message_view 组件中使用 Row 和 Column 布局，显示用户的姓名、年龄、编号、身高和爱好，设置样式使得信息整齐显示。

2.1.2 源码1 （push方法）

// 定义一个接口 Message 来描述用户信息
export interface Message {name: string;  // 姓名age: number;   // 年龄height: number; // 身高hobby: string; // 爱好num: number;   // 编号
}// 引入 Message 接口和 Message_view 组件
// import { Message } from "../model/interface_massage"
// import { Message_view } from "../model/Message_view"@Entry
@Component
struct PageFunction {// 定义一个状态变量 arr，其类型是 Message 数组，用来存储用户数据@State arr: Message[] = [{name: "阿桦",age: 20,height: 168,hobby: "篮球",num: 1},{name: "小魏",age: 22,height: 160,hobby: "排球",num: 2},{name: "基恩",age: 27,height: 164,hobby: "羽毛球",num: 3},{name: "诶安康",age: 23,height: 163,hobby: "足球",num: 4},{name: "蓝染",age: 18,height: 178,hobby: "游泳",num: 5},{name: "任丽君",age: 25,height: 166,hobby: "山地骑行",num: 6}]// build 函数，生成页面结构build() {Column() {// 使用 ForEach 循环遍历 arr 数组，为每一个用户创建一个 Message_view 组件ForEach(this.arr,(item: Message) => {Message_view(item) // 调用 Message_view 组件，传入 item})}.height('100%').width('100%')}
}// 定义一个名为 Message_view 的函数组件，用来显示每个用户的信息卡片
@Builder
function Message_view(mes: Message) {Column() {// 卡片上部分，显示姓名和年龄Row() {Text("姓名：")Text(mes.name)  // 显示用户的姓名.fontSize(20).fontWeight(FontWeight.Bold).fontColor("rgba(217, 18, 112, 1.00)")Blank() // 空格用于间隔Text("年龄：")Text(mes.age.toString())  // 显示用户的年龄.fontSize(20).fontWeight(FontWeight.Bold)Blank()}.width("100%").padding({ left: "2%", right: "2%" })// 卡片下部分，显示编号、身高和爱好Row() {Text("编号:")Text(mes.num.toString())  // 显示用户的编号.fontSize(15).fontWeight(FontWeight.Bold)Blank()Text("身高:")Text(mes.height.toString())  // 显示用户的身高.fontSize(15).fontWeight(FontWeight.Bold)Text("cm")Blank()Text("爱好:")Text(mes.hobby)  // 显示用户的爱好.fontSize(15).fontWeight(FontWeight.Bold)}.width("100%").padding({ left: "2%", right: "2%" })}.margin({ bottom: 20 })  // 每个卡片之间的底部间隔.padding({ left: "2%", right: "2%" })  // 卡片内容的左右内边距.backgroundColor("#ff25ffed")  // 卡片的背景颜色.height(80)  // 卡片高度.justifyContent(FlexAlign.SpaceEvenly)  // 控制子组件在卡片中的分布.width("90%")  // 卡片宽度.borderRadius("20")  // 圆角样式
}

2.1.3 源码1运行效果

2.2 源码1内容拆分，使用导入和导出方法显示程序效果

• 文件路径关系如下
  

2.2.1 源码2-1 @Entry入口文件

• 文件名PageFunction.ets，在pages文件夹中

// 引入 Message 接口和 Message_view 组件
import { Message } from "../model/interface_massage"
import { Message_view } from "../model/Message_view"@Entry
@Component
struct PageFunction {// 定义一个状态变量 arr，其类型是 Message 数组，用来存储用户数据@State arr: Message[] = [{name: "阿桦",age: 20,height: 168,hobby: "篮球",num: 1},{name: "小魏",age: 22,height: 160,hobby: "排球",num: 2},{name: "基恩",age: 27,height: 164,hobby: "羽毛球",num: 3},{name: "诶安康",age: 23,height: 163,hobby: "足球",num: 4},{name: "蓝染",age: 18,height: 178,hobby: "游泳",num: 5},{name: "任丽君",age: 25,height: 166,hobby: "山地骑行",num: 6}]// build 函数，生成页面结构build() {Column() {// 使用 ForEach 循环遍历 arr 数组，为每一个用户创建一个 Message_view 组件ForEach(this.arr,(item: Message) => {Message_view(item) // 调用 Message_view 组件，传入 item})}.height('100%').width('100%')}
}

2.2.2 源码2-2 卡片显示样式方法（Message_view）

• 文件名Message_view.ets，在model文件夹中

import {Message} from "../model/interface_massage"// 定义一个名为 Message_view 的函数组件，用来显示每个用户的信息卡片
@Builder
export function Message_view(mes: Message) {Column() {// 卡片上部分，显示姓名和年龄Row() {Text("姓名：")Text(mes.name)  // 显示用户的姓名.fontSize(20).fontWeight(FontWeight.Bold).fontColor("rgba(217, 18, 112, 1.00)")Blank() // 空格用于间隔Text("年龄：")Text(mes.age.toString())  // 显示用户的年龄.fontSize(20).fontWeight(FontWeight.Bold)Blank()}.width("100%").padding({ left: "2%", right: "2%" })// 卡片下部分，显示编号、身高和爱好Row() {Text("编号:")Text(mes.num.toString())  // 显示用户的编号.fontSize(15).fontWeight(FontWeight.Bold)Blank()Text("身高:")Text(mes.height.toString())  // 显示用户的身高.fontSize(15).fontWeight(FontWeight.Bold)Text("cm")Blank()Text("爱好:")Text(mes.hobby)  // 显示用户的爱好.fontSize(15).fontWeight(FontWeight.Bold)}.width("100%").padding({ left: "2%", right: "2%" })}.margin({ bottom: 20 })  // 每个卡片之间的底部间隔.padding({ left: "2%", right: "2%" })  // 卡片内容的左右内边距.backgroundColor("#ff25ffed")  // 卡片的背景颜色.height(80)  // 卡片高度.justifyContent(FlexAlign.SpaceEvenly)  // 控制子组件在卡片中的分布.width("90%")  // 卡片宽度.borderRadius("20")  // 圆角样式
}

2.2.3 源码2-3 接口文件（interface Message）

• 文件名interface_massage.ets，在model文件夹中

// 定义一个接口 Message 来描述用户信息
export interface Message {name: string;  // 姓名age: number;   // 年龄height: number; // 身高hobby: string; // 爱好num: number;   // 编号
}

2.2.4 源码2-1入口文件的运行效果

• 和源码1的效果一样，且可以正常运行程序。
  

3.结语

使用全局的函数，可以让代码更灵活。特别是在组件设置方式重复较多时，调用方法函数，让代码更简便。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

4.定位日期

2024-11-10；
21:52；