HarmonyOS -服务卡片

服务卡片提供了一种界面展示形式，可以将应用的重要信息或操作前置到服务卡片以达到服务直达、减少跳转层级的体验效果。有些类似于创建了一种 “快键方式”，比如下面的卡片流程图：在这里插入图片描述

  1. 添加基础卡片
    右键入口模块按照图示新增卡片
    在这里插入图片描述在这里插入图片描述在这里插入图片描述ArkTS卡片创建完成后，工程中会新增如下卡片相关文件：卡片生命周期管理文件（PhoneFormAbility.ets）、卡片页面文件（WidgetCard.ets）和卡片配置文件（form_config.json）在这里插入图片描述
    长按应用图标会出现Hello Word 基础卡片，代表卡片添加成功在这里插入图片描述
  2. 修改卡片UI
    卡片的UI可以像一个一般组件一样进行基础布局，很方便就可以做定制修改，打开WidgetCard.ets文件进行修改即可
/*1. The title.*/
readonly TITLE: string = '我是一个卡片';

在这里插入图片描述
3.定制样式
卡片的样式定制和普通组件的写法没有任何区别，按照实际需要进行UI改写即可
在这里插入图片描述

@Entry()
@Component
struct WidgetCard {fileNameList: string[] = new Array(2).fill('')build() {Column() {Row() {Text('今日推荐').fontColor('#fff').fontSize(16)}.height(40).width('100%').justifyContent(FlexAlign.Center)Row() {ForEach(this.fileNameList,(url: string) => {Row() {Image('').borderRadius(12).width(50).aspectRatio(1)}.backgroundColor('#eee').borderRadius(12)})}.justifyContent(FlexAlign.SpaceBetween).width('100%').layoutWeight(1).padding({left: 20,right: 20}).backgroundColor('#fff').borderRadius({topRight: 16,topLeft: 16}).onClick(() => {})}.linearGradient({angle: '135',colors: [['#FD3F8F', '0%'],['#FF773C', '100%']]}).height('100%')}
}

点击卡片唤起特定页

在这里插入图片描述
基础实现原理

  1. 卡片组件点击之后通过postCardAction触发router事件并携带参数
  2. 在应用的UIAbility中接收router事件，解析参数完成跳转在这里插入图片描述
    准备落地页
    视图features/my/src/main/ets/views/RecommendView.ets
import { router } from '@kit.ArkUI'
import { MkNavBar } from '@mk/basic'interface HotGoodsType {id: stringname: stringprice: stringpicture: string
}@Entry
@Component
export struct RecommendView {build() {Column() {Column() {this.topBanner()this.swiperContainer()}.height('80%').justifyContent(FlexAlign.Start).linearGradient({angle: 180,colors: [['#51E1F8', 0],['#F5F4F9', 1]]})Row() {Row() {Text('换一批看看').fontSize(16).fontColor('#fff')}.width('100%').height(46).justifyContent(FlexAlign.Center).backgroundColor('#00C6C6').onClick(() => {})}.width('100%').padding({left: 16,right: 16}).layoutWeight(1).backgroundColor('#F5F4F9')}}// 顶部banner@BuildertopBanner() {Stack({ alignContent: Alignment.TopStart }) {Image($r("app.media.ic_public_hot_banner_bg")).width('100%')MkNavBar({bg: Color.Transparent,leftClickHandler: () => {router.replaceUrl({url: 'pages/Index'})}})}}// 轮播图swiperController: SwiperController = new SwiperController()@BuilderswiperContainer() {Column() {Swiper(this.swiperController) {ForEach(new Array<HotGoodsType>(3).fill({id: '1001',name: 'PLAZA STYLE estaa 珍珠款毛绒绒保暖套装【含…',price: '289',picture: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/6fdcac19-dd44-442c-9212-f7ec3cf3ed18.jpg'}),(item: HotGoodsType) => {Column() {Image(item.picture).width('100%')Text(item.name).margin({top: 10}).fontSize(14).fontColor('#434343')Text(`￥${item.price}`).margin({top: 10}).fontSize(20).fontColor('#191919').fontWeight(700)}.padding(30).backgroundColor('#fff')})}.width(270).borderRadius(16).indicator(new DotIndicator().itemWidth(6).itemHeight(6).selectedItemWidth(6).selectedItemHeight(6).color('#E9E8EC').selectedColor('#191919'))}.margin({top: -60})}
}

页面products/phone/src/main/ets/pages/RecommendPage

import { RecommendView } from '@mk/my'@Entry
@Component
struct RecommendPage {build() {Column() {RecommendView()}.width('100%').height('100%')}
}

跳转打开落地页

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { promptAction, window } from '@kit.ArkUI';
import { Log } from '@abner/log';
import { deviceInfo } from '@kit.BasicServicesKit';
import { auth } from '@mk/basic';export default class EntryAbility extends UIAbility {// 保存 传递的信息private selectPage: string = ''// 保存当前的  WindowStage 对象private currentWindowStage: window.WindowStage | null = null;onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');if (want.parameters !== undefined) {let params: Record<string, string> = JSON.parse(JSON.stringify(want.parameters));this.selectPage = params.targetPage;Log.info(this.selectPage)}Log.info('onCreate-run')}onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {// hilog.info(DOMAIN_NUMBER, TAG, `onNewWant Want: ${JSON.stringify(want)}`);// Log.info('onNewWant-run')if (want.parameters?.params !== undefined) {let params: Record<string, string> = JSON.parse(JSON.stringify(want.parameters));this.selectPage = params.targetPage;}// 如果 window 对象存在， 人为的调用 onWindowStageCreate 传入 window 对象if (this.currentWindowStage !== null) {// 根据设置的页面 拉起对应的 Pagethis.onWindowStageCreate(this.currentWindowStage);}}onDestroy(): void {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');}onWindowStageCreate(windowStage: window.WindowStage): void {// Main window is created, set main page for this abilityhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');// const pageName = this.selectPage != '' ? this.selectPage : 'pages/Index';// 保存 window 对象 后续 通过该对象 拉起指定的页面if (this.currentWindowStage === null) {// 第一次启动 保存this.currentWindowStage = windowStage}windowStage.loadContent(this.selectPage || 'pages/Index', (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.');// 清空 传递进来的 页面名称，避免重复打开即可this.selectPage = ''// 2in1设备，不需要全屏if (deviceInfo.deviceType != '2in1') {// 开启全屏const win = windowStage.getMainWindowSync()win.setWindowLayoutFullScreen(true)// 获取安全区域const top = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRectAppStorage.setOrCreate<number>('safeTop', px2vp(top.height))const bottom = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRectAppStorage.setOrCreate<number>('safeBottom', px2vp(bottom.height))}});}onWindowStageDestroy(): void {// Main window is destroyed, release UI related resourceshilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');}onForeground(): void {// Ability has brought to foregroundhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');}onBackground(): void {// Ability has back to backgroundhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');}
}

products\phone\src\main\ets\widget\pages\WidgetCard.ets

@Entry
@Component
struct WidgetCard {/** The title.*/readonly TITLE: string = '我是一个卡片';/** The action type.*/readonly ACTION_TYPE: string = 'router';/** The ability name.*/readonly ABILITY_NAME: string = 'EntryAbility';/** The message.*/readonly MESSAGE: string = 'add detail';/** The width percentage setting.*/readonly FULL_WIDTH_PERCENT: string = '100%';/** The height percentage setting.*/readonly FULL_HEIGHT_PERCENT: string = '100%';fileNameList: string[] = new Array(2).fill('')build() {Column() {Row() {Text('今日推荐').fontColor('#fff').fontSize(16)}.height(40).width('100%').justifyContent(FlexAlign.Center)Row() {ForEach(this.fileNameList,(url: string) => {Row() {Image('').borderRadius(12).width(50).aspectRatio(1)}.backgroundColor('#eee').borderRadius(12)})}.justifyContent(FlexAlign.SpaceBetween).width('100%').layoutWeight(1).padding({left: 20,right: 20}).backgroundColor('#fff').borderRadius({topRight: 16,topLeft: 16}).onClick(() => {// postCardAction 卡片可以使用 和应用通信的一个 apipostCardAction(this, {action: 'router', // 通信的方式 是 routerabilityName: 'EntryAbility', // ability 的名字，当前应用写这个即可params: { targetPage: 'pages/RecommendPage' } // 传递的参数});})}.linearGradient({angle: '135',colors: [['#FD3F8F', 0],['#FF773C', 1]]}).height('100%')}
}

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

4-1.Android Camera 之 CameraInfo 编码模板（前后置摄像头理解、摄像头图像的自然方向理解）

4-1.Android Camera 之 CameraInfo 编码模板（前后置摄像头理解、摄像头图像的自然方向理解）

一、Camera.CameraInfo Camera.CameraInfo 是用于获取设备上摄像头信息的一个类&#xff0c;它提供摄像头的各种详细信息&#xff0c;例如&#xff0c;摄像头的方向、是否支持闪光灯等&#xff0c;以下是它的常用属性 static int CAMERA_FACING_BACK&#xff1a;表示设备的后置…
阅读更多...
【生日视频制作】F900xr宝马摩托车提车交车仪式AE模板修改文字软件生成器教程特效素材【AE模板】

【生日视频制作】F900xr宝马摩托车提车交车仪式AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程F900xr宝马摩托车提车交车仪式AE模板修改文字特效广告生成神器素材祝福玩法AE模板工程 AE模板套用改图文教程↓↓&#xff1a; 怎么如何做的【生日视频制作】F900xr宝马摩托车提车交车仪式AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤&a…
阅读更多...
Unity 资源 之 Super Confetti FX：点亮项目的璀璨粒子之光

Unity 资源 之 Super Confetti FX：点亮项目的璀璨粒子之光

Unity 资源 之 Super Confetti FX&#xff1a;点亮项目的璀璨粒子之光 一&#xff0c;前言二&#xff0c;资源包内容三&#xff0c;免费获取资源包 一&#xff0c;前言 在创意的世界里&#xff0c;每一个细节都能决定一个项目的独特魅力。今天&#xff0c;要向大家介绍一款令人…
阅读更多...
UNITY UI简易反向遮罩

UNITY UI简易反向遮罩

附带示例资源文件&#xff1a;https://download.csdn.net/download/qq_55895529/89726994?spm1001.2014.3001.5503 大致效果&#xff1a; 实现思路:通过ui shader的模板测试功能实现 通过让想要被突出显示的物体优先渲染并写入模板值,而后再让黑色遮罩渲染并判断模板值进行渲…
阅读更多...
龙芯+FreeRTOS+LVGL实战笔记（新）——06添加二级按钮

龙芯+FreeRTOS+LVGL实战笔记（新）——06添加二级按钮

本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇，主要的区别在于实时操作系统的不同，章节的安排和任务的推进保持一致，并对源码做了完善与优化，各位可以先到本人主页下去浏览另一专栏的博客列表（目前已撰写36篇，图1所示），再决定是否订阅。此外，也可以…
阅读更多...
揭秘 AMD GPU 上 PyTorch Profiler 的性能洞察

揭秘 AMD GPU 上 PyTorch Profiler 的性能洞察

Unveiling performance insights with PyTorch Profiler on an AMD GPU — ROCm Blogs 2024年5月29日&#xff0c;作者&#xff1a;Phillip Dang。 在机器学习领域&#xff0c;优化性能通常和改进模型架构一样重要。在本文中&#xff0c;我们将深入探讨 PyTorch Profiler&#…
阅读更多...
【人工智能学习笔记】2_数据处理基础

【人工智能学习笔记】2_数据处理基础

数据的概述 数据&#xff08;Data&#xff09;的定义 用于表示客观事物的未经加工的原始素材不仅指狭义上的数字&#xff0c;也只具有一定意义的文字、字母、数字符号的组合客观事物的属性、数量、位置及其相互关系的抽象表示 在计算机科学与技术领域中&#xff0c;数据是指…
阅读更多...
vite+vue3+typescript+elementPlus前端实现电子证书查询系统

vite+vue3+typescript+elementPlus前端实现电子证书查询系统

实现背景&#xff1a;之前电子证书的实现是后端实现的&#xff0c;主要采用GD库技术&#xff0c;在底图上添加文字水印和图片水印实现的。这里采用前端技术实现电子证书的呈现以及点击证书下载&#xff0c;优点是&#xff1a;后端给前端传递的是一组数据&#xff0c;不需要传证…
阅读更多...
从零开始写论文：如何借助ChatGPT生成完美摘要？

从零开始写论文：如何借助ChatGPT生成完美摘要？

AIPaperGPT&#xff0c;论文写作神器~ https://www.aipapergpt.com/ 在写论文的过程中&#xff0c;摘要是一个非常重要的部分&#xff0c;它能够帮助读者快速理解论文的核心内容&#xff0c;决定是否进一步阅读全文。但是许多学生在写摘要的时候常常感到困惑&#xff0c;不知…
阅读更多...
基于Java的宿舍报修管理系统的设计与实现(论文+源码)_kaic

基于Java的宿舍报修管理系统的设计与实现(论文+源码)_kaic

基于Java的宿舍报修管理系统的设计与实现(论文源码)_kaic 摘　　要 随着教育改革‎‏的不断‎‏深入&#xff0c;‎‏学校宿‎‏舍的管‎‏理体系‎‏也在不‎‏断地完‎‏善&#xff0c;校园后勤服务是学校管理的重要工作&#xff0c;学校提供优秀的后勤服务&#xff0c;能提…
阅读更多...
自制游戏手柄--电位器的使用

自制游戏手柄--电位器的使用

在前面的讨论中&#xff0c;我们考虑了使用陀螺仪来获取手柄的运动情况来进行瞄准&#xff0c; 自制实战吃鸡手柄原理-CSDN博客 也可以使用图像识别来实现&#xff0c;这里我们再考虑下使用电位器来获取运动状态&#xff0c;一个电位器可以获取到一个平面上的旋转情况&#x…
阅读更多...
C++——类与对象（二）

C++——类与对象（二）

目录 引言 类的默认成员函数 构造函数 1.构造函数的概念 2.注意事项 初始化列表 1.初始化列表的概念 2.注意事项 析构函数 1.析构函数的概念 2.注意事项 拷贝构造函数 1.拷贝构造函数的概念 2.注意事项 运算符重载 1.运算符重载的概念 2.注意事项 赋值运算符…
阅读更多...
开源网安引领AIGC+开发安全，智能防护铸就软件安全新高度

开源网安引领AIGC+开发安全，智能防护铸就软件安全新高度

近日&#xff0c;国内网络安全领域知名媒体数说安全正式发布了《2024年中国网络安全市场100强》和《2024年中国网络安全十大创新方向》。开源网安凭借在市场表现力、资源支持力以及产品在AI方向的创新力上的优秀表现成功入选百强榜单&#xff0c;并被评为“AIGC开发安全”典型厂…
阅读更多...
Percona 开源监控方案 PMM 详解

Percona 开源监控方案 PMM 详解

文章目录 前言1. 安装部署1.1 Server 安装1.2 Client 安装 2. 监控数据库2.1 MySQL2.2 PostgreSQL 3. Dashboard 介绍总结 前言 Percona Monitoring and Management (PMM) 是 Percona 公司基于业界流行的组件 Prometheus 和 Grafana 设计开发的一体化数据库监控解决方案。本篇…
阅读更多...
【H2O2|全栈】关于HTML（3）HTML基础（二）

【H2O2|全栈】关于HTML（3）HTML基础（二）

HTML相关知识 目录 HTML相关知识 前言 准备工作 标签的具体分类&#xff08;二&#xff09; 本文中的标签在什么位置使用&#xff1f; 本期前置知识点 超文本 超文本引用和源属性 图片标签 锚链接 iframe 锚点 预告和回顾 后话 前言 本系列博客将分享HTML相关…
阅读更多...
【数据结构】你知道什么是二叉树的顺序存储结构吗？

【数据结构】你知道什么是二叉树的顺序存储结构吗？

文章目录 前言1. 顺序结构2. 实现顺序结构二叉树2.1 堆的概念与结构2.2 堆的实现2.2.1 向上调整算法2.2.2 向下调整算法 3. 结语 前言 二叉树一般可以使用两种结构存储&#xff0c;一种顺序结构&#xff0c;一种链式结构。本文将要介绍的是二叉树的顺序存储结构。 1. 顺序结构…
阅读更多...
python安装以及访问openAI API

python安装以及访问openAI API

安装python 我是python小白&#xff0c;所以需要一步一步来&#xff0c;先安装。 一口吃不成胖子&#xff0c;记住。 从官网下载python&#xff0c;目前最新版本是3.12&#xff0c;但是据说稳定版3.11更好一点&#xff0c;所以&#xff0c;下载3.11&#xff0c;注意不要下载…
阅读更多...
stm32的内部时钟源 | RC震荡电路

stm32的内部时钟源 | RC震荡电路

文章目录 前言学习了解 前言 了解到 内部高速RC振荡器&#xff08;HSI&#xff09;就是RC震荡器实现的&#xff0c;故想对RC震荡做些了解与分析。 学习了解 【不需要晶振&#xff0c;也可产生时钟脉冲&#xff01;RC振荡器的工作原理&#xff0c;维恩电桥振荡器&#xff01;…
阅读更多...
string字符会调用new分配堆内存吗

string字符会调用new分配堆内存吗

gcc的string默认大小是32个字节&#xff0c;字符串小于等于15直接保存在栈上&#xff0c;超过之后才会使用new分配。
阅读更多...
Kafka 分布式消息系统详细介绍

Kafka 分布式消息系统详细介绍

Kafka 分布式消息系统 一、Kafka 概述1.1 Kafka 定义1.2 Kafka 设计目标1.3 Kafka 特点 二、Kafka 架构设计2.1 基本架构2.2 Topic 和 Partition2.3 消费者和消费者组2.4 Replica 副本 三、Kafka 分布式集群搭建3.1 下载解压3.1.1 上传解压 3.2 修改 Kafka 配置文件3.2.1 修改z…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发