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；
扫一扫
1121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
