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

小蜗牛764号2024-11-11 13:33

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；

相关推荐
程序猿会指北16 小时前
纯血鸿蒙APP实战开发——Text实现部分文本高亮和超链接样式
移动开发·harmonyos·arkts·openharmony·arkui·组件化·鸿蒙开发
程序猿会指北2 天前
纯血鸿蒙APP实战开发——应用新功能引导实现案例
移动开发·harmonyos·arkts·openharmony·arkui·组件化·鸿蒙开发
howard20053 天前
鸿蒙学习笔记：用户登录界面
鸿蒙·用户登录·arkui
Harry技术6 天前
七、ArkTS 声明式UI-常用布局-相对布局 (RelativeContainer)
harmonyos·arkui
小白学鸿蒙11 天前
Harmony-鸿蒙开发常用Hdc命令大全
鸿蒙·命令行·harmony·hdc
小蜗牛764号15 天前
SQLite：DDL（数据定义语言）的基本用法
数据库·sqlite·harmony·ddl
小蜗牛764号21 天前
arkTS：使用ArkUI实现用户信息的持久化管理与自动填充（PersistentStorage）
arkts·arkui·storage·persistent·持续化储存
syj_1111 个月前
初识ArkUI
ui·arkts·arkui
howard20051 个月前
鸿蒙学习笔记：ArkUI概述
arkui·鸿蒙应用开发
白羊@1 个月前
ArkUI---常用组件---切换按钮 (Toggle)
华为·harmonyos·arkts·鸿蒙·arkui
热门推荐
01SQL 主从数据库实时备份02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04基于大语言模型（LLM）的合成数据生成、策展和评估的综述05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07VSCode插件 —— Cody AI （免费AI助手！）08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10ARM学习（31）编译器对overlay方式的支持