arkUI:自定义构建函数(参数的引用传递)
- [1 主要内容说明](#1 主要内容说明)
- [2 相关内容](#2 相关内容)
-
- [2.1 自定义构建函数(引用传参)](#2.1 自定义构建函数(引用传参))
-
- [2.1.1 源码1的相关说明](#2.1.1 源码1的相关说明)
- [2.1.2 源码1 (push方法)](#2.1.2 源码1 (push方法))
- [2.1.3 源码1运行效果](#2.1.3 源码1运行效果)
- [2.2 源码1内容拆分,使用导入和导出方法显示程序效果](#2.2 源码1内容拆分,使用导入和导出方法显示程序效果)
-
- [2.2.1 源码2-1 @Entry入口文件](#2.2.1 源码2-1 @Entry入口文件)
- [2.2.2 源码2-2 卡片显示样式方法(Message_view)](#2.2.2 源码2-2 卡片显示样式方法(Message_view))
- [2.2.3 源码2-3 接口文件(interface Message)](#2.2.3 源码2-3 接口文件(interface Message))
- [2.2.4 源码2-1入口文件的运行效果](#2.2.4 源码2-1入口文件的运行效果)
- 3.结语
- 4.定位日期
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方法)
typescript
// 定义一个接口 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
文件夹中
typescript
// 引入 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
文件夹中
typescript
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
文件夹中
typescript
// 定义一个接口 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;