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的):

相关文章
|
9天前
|
存储 调度 数据安全/隐私保护
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
34 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
|
9天前
|
开发工具 芯片 开发者
鸿蒙Flutter实战:12-使用模拟器开发调试
本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。
25 2
鸿蒙Flutter实战:12-使用模拟器开发调试
|
15天前
|
IDE 开发工具
鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0
本文介绍了如何使用 Flutter SDK 3.22.0 搭建鸿蒙开发环境。首先安装 Flutter SDK 3.22.0,并通过 FVM 管理多个版本。接着配置项目,使用 `fvm use custom_3.22.0` 设置自定义 SDK 版本。添加鸿蒙平台支持并进行项目签名,最后通过 `fvm flutter run` 运行项目。详细步骤包括安装、项目配置、签名和运行,确保开发环境顺利搭建。
41 7
鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0
|
15天前
|
UED
<大厂实战经验> Flutter&鸿蒙next 中使用 initState 和 mounted 处理异步请求的详细解析
在 Flutter 开发中,处理异步请求是常见需求。本文详细介绍了如何在 `initState` 中触发异步请求,并使用 `mounted` 属性确保在适当时机更新 UI。通过示例代码,展示了如何安全地进行异步操作和处理异常,避免在组件卸载后更新 UI 的问题。希望本文能帮助你更好地理解和应用 Flutter 中的异步处理。
60 3
|
15天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
93 1
|
22天前
|
JavaScript 数据管理 编译器
揭秘 ArkTS 与 TypeScript 的神秘差异:鸿蒙系统开发者的必备知识与实战技巧
【10月更文挑战第18天】ArkTS 是华为为鸿蒙系统(HarmonyOS)推出的开发语言,作为 TypeScript 的超集,它针对鸿蒙系统的分布式特性和需求进行了优化和扩展。ArkTS 强化了分布式数据管理、类型系统、编译与运行时性能,并支持声明式 UI 和专为鸿蒙设计的 API,使开发者能够更高效地开发跨设备协同工作的应用。
55 6
|
13天前
|
移动开发 资源调度 IDE
鸿蒙Taro实战:01-搭建开发环境
本文介绍了如何使用 Taro 4.x 框架搭建鸿蒙应用开发环境。主要内容包括:下载并配置 DevEco IDE,创建鸿蒙项目,安装 Taro 4.x,初始化 Taro 项目,配置鸿蒙插件和编译配置,修改 `package.json`,运行 Taro 和鸿蒙项目。通过本文,读者可以快速上手鸿蒙应用开发。
|
15天前
|
JSON Dart 数据格式
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
110 0
|
28天前
|
缓存 Dart IDE
鸿蒙Flutter实战:10-常见问题集合
本文介绍了鸿蒙 Flutter 开发的学习路径,包括掌握 Flutter 和鸿蒙基础知识,解决 MatePad 适配、模拟器异常、debug 版本错误等问题,并提供了更换 App 图标和名称的方法及环境变量配置指导。
58 0
|
28天前
|
Dart IDE 开发工具
鸿蒙Flutter实战:09-现有Flutter项目支持鸿蒙
本文介绍了将现有Flutter项目适配鸿蒙系统的步骤。首先,根据[鸿蒙Flutter适配指南]搭建开发环境,并使用fvm管理多版本SDK。项目采用模块化设计,包括apps、common、components、modules和plugins等目录,分别对应不同功能模块。重点在于在apps目录下创建新的鸿蒙项目,逐步添加依赖并解决版本兼容性问题。最后,通过配置pubspec.yaml文件和特定插件的鸿蒙化适配,完成项目的编译与运行测试。
59 0