HarmonyOS实战—卡片的样式设计

简介: HarmonyOS实战—卡片的样式设计

HarmonyOS实战


HarmonyOS卡片样式设计

从鸿蒙手机的左下角屏幕向上滑动,就能打开我们的卡片服务。在这里可以直接找到多样化的卡片类应用操作。如下图所示:

如上图所示的今日视频推荐,这是前面博主开发的简单的视频类小卡片应用。那么这个图标是如何生成,又怎么由开发中定义呢?


今天,博主就来教大家如何玩转卡片。


卡片的布局文件

首先,我们要明白创建的项目哪个文件卡片布局。


如上图所示,这里展开的widget与resource文件夹都是纯卡片应用,卡片布局的一部分。如这里的index.hml文件所示:


可以看到,这里就是1张图片与2个文本。其中图片为下图的背景,而2个文本,一个是标题(今日文本推荐),一个是描述(还记得三年之约…)。


不过,这只是卡片应用的缩略图,点击之后,会展开如下图所示的详细操作卡片步骤。


这里有2个文本内容,(本人专属的小视频应用)文本以及(…的专属视频)文本。


…的专属视频文本:在resources-base-element-string.json中进行配置。


本人专属的小视频应用:在config.json的配置文件中修改。如下图所示:


当然,这里开发中可以自行配置中英文对照,博主为了偷懒省略了英文修改,还请见谅。卡片布局的一些配置及文件修改,这里基本讲解完成。下面,我们来自定义卡片的布局。


自定义2*4的卡片布局

可以看到上面截图的配置文件config.json中,有一个2*2的supportDimensions,顾名思义就是这个卡片占据2行2列图标位置,这里可以配置多个。


现在我们需要将其变为2行4列如何做到呢?


其实很简单,再创建一个即可。再entry文件夹点击右键New-Service Widget,然后选择2*4的默认样式,点击创建即可。



创建成功之后,我们的项目下会多一个widget1的文件夹,这个就是2*4样式的代码文件。我们只需要在这里操作即可。


运行之后,效果如下:

当然,这里的样式同样是一个类html文件布局,你只要更改上面的内容,这里的内容自然会变更,至于组件的应用后面实战有详细讲解。


桌面样式如下(这是24的,你也可以添加22的):

相关文章
|
3月前
|
JavaScript IDE 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
71 0
|
3月前
|
JavaScript API 开发者
【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门
【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门
271 0
|
3月前
|
存储 JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
43 0
|
3月前
|
JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
33 0
|
3月前
|
JavaScript 前端开发 索引
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
40 0
|
3月前
|
JavaScript
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
44 0
|
5月前
|
存储 Java 数据管理
HarmonyOS实战—HarmonyOS入门第一课
HarmonyOS实战—HarmonyOS入门第一课
44 0
HarmonyOS实战—HarmonyOS入门第一课
|
6月前
|
存储 监控 安全
HarmonyOS 实战项目
本章将介绍如何在 HarmonyOS 上进行实际项目开发。我们将从项目需求分析开始,逐步完成项目的设计、开发、测试和上线过程。
91 1
|
9月前
|
缓存 自然语言处理 JavaScript
HarmonyOS实战—服务卡片初体验
最近看到很多博客网站上出现了HarmonyOS的征文活动,看到那些精美的奖品让我也安耐不住开了,当然奖品的诱惑当然是抵挡不住我对技术的狂热追求,对于开发者而言技术没有顶峰没有终点。那么今天给大家做一个卡片服务开发的经验分享,如果有什么地方说的不对的请各位开发者进行指正,如果有什么问题也可以发私信或者直接在帖子中留言,我也会及时回复大家。
|
11月前
|
缓存 搜索推荐 Java
HarmonyOS实战—亮眼的原子化服务体验
HarmonyOS实战—亮眼的原子化服务体验