HarmonyOS 5.0应用开发——Ability与Page数据传递

news2025/2/24 7:32:17

【高心星出品】

文章目录

      • Ability与Page数据传递
        • Page向Ability传递数据
        • Ability向Page传递数据

Ability与Page数据传递

基于当前的应用模型，可以通过以下几种方式来实现UIAbility组件与UI之间的数据同步。

  • 使用EventHub进行数据通信：在基类Context中提供了EventHub对象，可以通过发布订阅方式来实现事件的传递。在事件传递前，订阅者需要先进行订阅，当发布者发布事件时，订阅者将接收到事件并进行相应处理。
  • 使用AppStorage/LocalStorage进行数据同步：ArkUI提供了AppStorage和LocalStorage两种应用级别的状态管理方案，可用于实现应用级别和UIAbility级别的数据同步。
Page向Ability传递数据

EventHub为UIAbility组件提供了事件机制，使它们能够进行订阅、取消订阅和触发事件等数据通信能力。

在基类Context中，提供了EventHub对象，可用于在UIAbility组件实例内通信。使用EventHub实现UIAbility与UI之间的数据通信需要先获取EventHub对象，本章节将以此为例进行说明。

下面案例实现：页面点击按钮发送颜色给ability，从而修改ability的窗口背景色。

在这里插入图片描述

EntryAbility代码

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    // 注册event_01事件监听
    this.context.eventHub.on('event_01',(data:Record<string,Object>)=>{
       // 获取页面传递的数据  设置窗口背景颜色
       this.context.windowStage.getMainWindowSync().setWindowBackgroundColor(data!.color as string)
    })
  }

  onDestroy(): void {
    //关闭监听
    this.context.eventHub.off('event_01')
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/eventpage', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }

      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

eventpage页面代码

import { common } from '@kit.AbilityKit';

@Entry
@Component
struct Eventpage {
  @State message: string = 'Hello World';
  private context:common.UIAbilityContext=getContext(this) as common.UIAbilityContext
  build() {
   Column(){
     Button('向EntryAbility发送数据更改背景颜色')
       .width('60%')
       .onClick(()=>{
         // 提交数据
         this.context.eventHub.emit('event_01',{color:'#ff0000'})
       })
   }
   .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
Ability向Page传递数据

ArkUI提供了AppStorage和LocalStorage两种应用级别的状态管理方案，可用于实现应用级别和UIAbility级别的数据同步。使用这些方案可以方便地管理应用状态，提高应用性能和用户体验。其中，AppStorage是一个全局的状态管理器，适用于多个UIAbility共享同一状态数据的情况；而LocalStorage则是一个局部的状态管理器，适用于单个UIAbility内部使用的状态数据。

下面一个案例：在ability获取窗口可布局界面的宽度和高度（窗口高度-通知栏高度）

在这里插入图片描述

EntryAbility代码

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { AppStorageV2, window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    // 注册event_01事件监听
    this.context.eventHub.on('event_01',(data:Record<string,Object>)=>{
       // 获取页面传递的数据  设置窗口背景颜色
       this.context.windowStage.getMainWindowSync().setWindowBackgroundColor(data!.color as string)
    })



  }

  onDestroy(): void {
    //关闭监听
    this.context.eventHub.off('event_01')
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    // 获取窗口可布局的宽度和高度
    let win=windowStage.getMainWindowSync()
    // 获得通知栏区域
    let notifybar=win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect
    let width=win.getWindowProperties().windowRect.width
    let height=win.getWindowProperties().windowRect.height-notifybar.height
    // 保存到appstorage中
    AppStorage.setOrCreate('width', width);
    AppStorage.setOrCreate('height', height);
    windowStage.loadContent('pages/eventpage', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }

      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

eventpage页面代码

import { common } from '@kit.AbilityKit';

@Entry
@Component
struct Eventpage {
  @State message: string = 'Hello World';
  // 获取ability传过来的宽度和高度 单位是px
  @StorageProp('width') wd: number = 0
  @StorageProp('height') ht: number = 0
  private context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext

  build() {
    Column() {
      Button('向EntryAbility发送数据更改背景颜色')
        .width('60%')
        .onClick(() => {
          // 提交数据
          this.context.eventHub.emit('event_01', { color: '#ff0000' })
        })
      Column() {
        Text('宽度为： ' + this.wd).width('100%').fontSize(20)
        Text('高度为： ' + this.ht).width('100%').fontSize(20)
      }
      // 设置组件的宽和高
      .width(this.wd / 2 + 'px')
      .height(this.ht / 3 + 'px')
      .border({ width: 3, color: Color.Red, style: BorderStyle.Dashed })
      .justifyContent(FlexAlign.Center)
      .margin(20)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
order({ width: 3, color: Color.Red, style: BorderStyle.Dashed })
      .justifyContent(FlexAlign.Center)
      .margin(20)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2254840.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MFC扩展库BCGControlBar Pro v36.0新版亮点：黑色主题中的自动反转图标

MFC扩展库BCGControlBar Pro v36.0新版亮点：黑色主题中的自动反转图标

BCGControlBar库拥有500多个经过全面设计、测试和充分记录的MFC扩展类。 我们的组件可以轻松地集成到您的应用程序中&#xff0c;并为您节省数百个开发和调试时间。 BCGControlBar专业版 v36.0已全新发布了&#xff0c;这个版本在黑暗主题中添加自动图标反转、新增一个全新的S…
阅读更多...
查找 排序算法（系列）

查找 排序算法（系列）

复习一下排序算法吧&#xff0c;数据结构有点难&#xff0c;虽然我已经看过一遍了&#xff0c;重温一遍还是很有收获&#xff01; 本文会出一系列&#xff08;主讲算法排序&#xff09;&#xff0c;欢迎订阅&#xff01;&#xff01;&#xff01; Python中常用的排序算法有以…
阅读更多...
Y20030053 JSP+SSM+MYSQL+LW+旅游系统的设计与实现 源码 配置 文档 全套资料

Y20030053 JSP+SSM+MYSQL+LW+旅游系统的设计与实现 源码 配置 文档 全套资料

旅游系统的设计与实现 1.摘要2.开发目的和意义3.系统功能设计4.系统界面截图5.源码获取 1.摘要 摘 要 随着旅游业的蓬勃发展和人们对休闲度假需求的不断增加&#xff0c;旅游业管理面临着越来越多的挑战。为了提高管理效率、优化客户体验并增强市场竞争力&#xff0c;本文介绍…
阅读更多...
3D 生成重建016-SA3D从nerf中分割一切

3D 生成重建016-SA3D从nerf中分割一切

3D 生成重建016-SA3D从nerf中分割一切 文章目录 0 论文工作1 方法介绍2 实验结果 0 论文工作 1 SAM的背景和目标&#xff1a; SAM 是一种强大的二维视觉基础模型&#xff0c;能够在 2D 图像中进行任意物体的分割。传统上&#xff0c;SAM 在二维空间表现出色&#xff0c;但其无…
阅读更多...
Leetcode—374. 猜数字大小【简单】

Leetcode—374. 猜数字大小【简单】

2024每日刷题&#xff08;202&#xff09; Leetcode—374. 猜数字大小 C实现代码 /** * Forward declaration of guess API.* param num your guess* return -1 if num is higher than the picked number* 1 if num is lower than the picked number* …
阅读更多...
数字孪生与大型模型强强联合，共塑工业制造崭新前景

数字孪生与大型模型强强联合，共塑工业制造崭新前景

随着新一代信息技术与实体经济的加速融合&#xff0c;工业领域的数字化、智能化转型趋势愈发显著&#xff0c;孕育出一系列制造业数字化转型的新模式与新业态。在此背景下&#xff0c;数字孪生技术作为关键支撑力量&#xff0c;正在全球范围内迅速崛起并得到广泛应用&#xff0…
阅读更多...
vue+mars3d点击图层展示炫酷的popup弹窗

vue+mars3d点击图层展示炫酷的popup弹窗

展示效果 目录 一&#xff1a;叠加数据图层到地图上&#xff0c;此时需要使用bindPopup绑定popup 二、封装自定义的popup&#xff0c;样式可以自行调整 一&#xff1a;叠加数据图层到地图上&#xff0c;此时需要使用bindPopup绑定popup 这里我根据数据不同&#xff0c;展示的…
阅读更多...
springboot利用easypoi实现简单导出Excel

springboot利用easypoi实现简单导出Excel

vue springboot利用easypoi实现简单导出 前言一、easypoi是什么&#xff1f;二、使用步骤 1.传送门2.前端vue3.后端springboot 3.1编写实体类&#xff08;我这里是dto,也一样&#xff09;3.2控制层结尾 前言 今天玩了一下springboot利用easypoi实现excel的导出&#xff0c;以前…
阅读更多...
Milvus attu - docker 使用 及 版本兼容

Milvus attu - docker 使用 及 版本兼容

文章目录 版本查看attu 和 milvus 的兼容性Docker 加载attu docker 合并到 Milvus文件管理使用 docker compose 挂在 Milvus，登录 attu 出现报错： Error: Failed to connect to Milvus: Error: 1 CANCELLED: Call cancelled 于是检查兼容问题 版本查看 Milvus 版本发布： htt…
阅读更多...
洛谷 P1957 口算练习题 C语言

洛谷 P1957 口算练习题 C语言

题目&#xff1a; https://www.luogu.com.cn/problem/P1957 题目描述 王老师正在教简单算术运算。细心的王老师收集了 ii 道学生经常做错的口算题&#xff0c;并且想整理编写成一份练习。 编排这些题目是一件繁琐的事情&#xff0c;为此他想用计算机程序来提高工作效率。王老…
阅读更多...
el-select 修改样式

el-select 修改样式

这样漂亮的页面&#xff0c;搭配的却是一个白色风格的下拉框 &#xff0c;这也过于刺眼。。。 调整后样式为&#xff1a; 灯红酒绿总有人看着眼杂&#xff0c;但将风格统一终究是上上选择。下面来处理这个问题。 分为两部分。 第一部分&#xff1a;是修改触发框的样式 第二部…
阅读更多...
Proteus中添加新元件库

Proteus中添加新元件库

手上村&#xff1a;本来打算在Proteus中设计充电电路&#xff0c;发现软件自带的元器件库中没有我想要充电芯片。因此&#xff0c;看了其他大神的导入新的元器件步骤&#xff0c;建立自己的元器件库&#xff01;自己也来记录一波&#xff01;话不多说&#xff0c;赶紧上菜&…
阅读更多...
数字IC前端学习笔记：脉动阵列的设计方法学（以串行FIR滤波器为例）

数字IC前端学习笔记：脉动阵列的设计方法学（以串行FIR滤波器为例）

相关阅读数字IC前端_日晨难再的博客-CSDN博客https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 引言 脉动结构&#xff08;也称为脉动阵列&#xff09;表示一种有节奏地计算并通过系统传输数据的处理单元(PEs)网络。这些处理单元有规律地…
阅读更多...
springboot mvn 打包，jar和资源文件分离打包

springboot mvn 打包，jar和资源文件分离打包

默认打包方式如下&#xff1a; <build><finalName>${project.artifactId}</finalName><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><execution…
阅读更多...
5G CPE核心器件-基带处理器（三）

5G CPE核心器件-基带处理器（三）

5G CPE 核心器件 -5G基带芯片 基带芯片简介基带芯片组成与结构技术特点与发展趋势5G基带芯片是5G CPE中最核心的组件，负责接入5G网络，并进行上下行数据业务传输。移动通信从1G发展到5G，终端形态产生了极大的变化，在集成度、功耗、性能等方面都取得巨大的提升。 基带芯片简…
阅读更多...
【JavaWeb后端学习笔记】SpringBoot框架下Http请求参数接收

【JavaWeb后端学习笔记】SpringBoot框架下Http请求参数接收

Http请求参数接收 1、简单参数2、实体参数3、数组参数4、集合参数5、日期参数6、Json格式参数&#xff08;常用&#xff09;7、路径参数&#xff08;常用&#xff09;8、接收请求参数常用的几个注解 Http请求能携带各种格式的请求参数。因此也就需要不同的接收方式。 1、简单参…
阅读更多...
在 MacOS 上为 LM Studio 更换镜像源

在 MacOS 上为 LM Studio 更换镜像源

在 MacOS 之中使用 LM Studio 部署本地 LLM时&#xff0c;用户可能会遇到无法下载模型的问题。 一般的解决方法是在 huggingface.co 或者国内的镜像站 hf-mirror.com 的项目介绍卡页面下载模型后拖入 LM Studio 的模型文件夹。这样无法利用 LM Studio 本身的搜索功能。 本文将…
阅读更多...
Vue工程化开发中各文件的作用

Vue工程化开发中各文件的作用

1.main.js文件 main.js文件的主要作用&#xff1a;导入App.vue&#xff0c;基于App.vue创建结构渲染index.html。
阅读更多...
Grule前端表单post后端执行grule引擎规则

Grule前端表单post后端执行grule引擎规则

Grule前端表单post后端执行grule引擎规则 编写前端表单和后端接口 编写test.go执行grule引擎规则 示例都是 go test 执行的测试代码&#xff0c;所以将里面的测试代码去除 由于之前 NumberExponentExample_test.go 已经验证可运行, 所以将 err 的异常处理去除 package mai…
阅读更多...
Android hid 数据传输（device 端 ）

Android hid 数据传输（device 端 ）

最近一直在处理hid 数据需求&#xff0c;简而言之就是两台设备直接可以通过usb 线互相传递数据。 项目架构 为什么Device 端要采用HID&#xff08;人机接口设备&#xff09;的方式发送和接收数据呢&#xff1f; 主要是速度快&#xff0c;举个例子&#xff0c;就是鼠标移动&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023