arkUI:自定义构建函数(参数的引用传递)

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;

相关推荐
howard20052 天前
鸿蒙学习笔记:ArkUI概述
arkui·鸿蒙应用开发
白羊@5 天前
ArkUI---常用组件---切换按钮 (Toggle)
华为·harmonyos·arkts·鸿蒙·arkui
白羊@6 天前
ArkUI---使用弹窗---@ohos.promptAction (弹窗)
华为·harmonyos·鸿蒙·harmony·hcip-harmonyos
亦世凡华、8 天前
【HarmonyOS】鸿蒙系统在租房项目中的项目实战(一)
经验分享·harmonyos·harmonyos next·arkui·鸿蒙开发
Swift社区8 天前
如何构建安全可靠的 HarmonyOS 应用
harmonyos·arkts·arkui
Swift社区11 天前
HarmonyOS 如何实现传输中的数据加密
harmonyos·arkts·arkui
林家凌宇12 天前
【从零开始鸿蒙开发:01】自定义闪屏页
前端·chrome·华为·鸿蒙·鸿蒙系统·arkui·鸿蒙自定义闪屏页
Swift社区15 天前
HarmonyOS App 购物助手工具的开发与设计
harmonyos·arkts·arkui
纯爱掌门人16 天前
鸿蒙NEXT实践(一):华为账号一键登录实现
华为·harmonyos·arkui