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

相关文章
|
2月前
鸿蒙开发:组件样式的复用
如果要实现多页面之间的组件属性样式复用,建议使用AttributeModifier,如果是单页面,通用属性可以使用@Styles,组件自有属性可以使用@Extend。
鸿蒙开发:组件样式的复用
|
2月前
|
存储 JavaScript 开发工具
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
本次的.HarmonyOS Next ,ArkTS语言,HarmonyOS的元服务和DevEco Studio 开发工具,为开发者提供了构建现代化、轻量化、高性能应用的便捷方式。这些技术和工具将帮助开发者更好地适应未来的智能设备和服务提供方式。
76 8
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
|
2月前
|
Dart 前端开发 IDE
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
304 4
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
2月前
|
2月前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
196 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
|
2月前
|
安全 数据安全/隐私保护 UED
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
### HarmonyOS 5.0(Next)应用开发实战:使用ArkTS构建开箱即用的登录页面 HarmonyOS 5.0(Next)融合了美学与科技,引入“光感美学”设计理念和多设备深度协同功能。本文通过 ArkTS 构建一个简单的登录页面,展示了模块化导入、状态管理、方法封装、声明式UI构建及事件处理等最佳实践。代码实现了一个包含用户名和密码输入框及登录按钮的界面,支持错误提示和页面跳转。
183 14
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
|
2月前
|
人工智能 安全 数据安全/隐私保护
HarmonyOS应用开发实战:基于ArkTS的开箱即用登录页面实现【样式方式实现①】【HarmonyOS 5.0(Next)】
本文介绍了基于HarmonyOS 5.0(Next)和ArkTS实现的开箱即用登录页面。HarmonyOS 5.0是华为于2024年10月22日发布的第三代移动操作系统,具备原生智能、互联、安全及流畅特性。文章详细解析了使用ArkTS开发登录页面的代码,涵盖组件定义、界面布局、事件处理、样式设置及异步操作等内容,展示了清晰的组件结构、响应式设计与模块化编程的优势。通过这段代码,开发者可以快速上手并构建高效、美观的应用界面。
188 9
|
2月前
|
JavaScript API 数据处理
基于HarmonyOS 5.0 (Next)技术的渐变模糊效果技术实现【代码实战】
本文详细介绍如何在HarmonyOS 5.0(Next)中实现渐变模糊效果,涵盖从基础页面搭建到添加模糊、渐变效果的全过程,并通过代码实战展示具体操作步骤。文章首先介绍了使用`Stack`和`Image`控件设置背景并应用`foregroundBlurStyle`属性实现模糊效果,接着通过`linearGradient`属性融入渐变效果,使界面更加精致美观。此外,还展示了如何利用滑动条和手势等交互元素动态调整模糊与渐变效果,增强用户体验。最后,通过具体代码示例说明如何为图片、弹窗等控件添加渐变模糊效果,突显HarmonyOS的强大功能与灵活性。
112 17
|
3天前
鸿蒙开发:了解@Builder装饰器
@Builder装饰是鸿蒙UI开发中,非常重要的一个装饰器,在实际的开发中,合理且正确的使用,能够让我们的代码更加的简洁,有两点需要注意,一是,是用私有还是全局,取决于当前的组件的复用机制,如果多个页面都使用了,建议以全局为主;二是传参的动态更新,有更新就使用引用参数传递,没有更新按值传递即可。
50 28
|
1月前
|
存储 JSON 区块链
【HarmonyOS NEXT开发——ArkTS语言】购物商城的实现【合集】
HarmonyOS应用开发使用@Component装饰器将Home结构体标记为一个组件,意味着它可以在界面构建中被当作一个独立的UI单元来使用,并且按照其内部定义的build方法来渲染具体的界面内容。txt:string定义了一个名为Data的接口,用于规范表示产品数据的结构。src:类型为,推测是用于引用资源(可能是图片资源等)的一种特定类型,用于指定产品对应的图片资源。txt:字符串类型,用于存放产品的文字描述,比如产品名称等相关信息。price:数值类型,用于表示产品的价格信息。
61 5

热门文章

最新文章