HarmonyOS实战—卡片的样式设计
目录
- HarmonyOS实战
- HarmonyOS卡片样式设计
- 卡片的布局文件
- 自定义2*4的卡片布局
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的):
本文正在参与“有奖征文 | HarmonyOS征文大赛”活动:
活动链接:https://marketing.csdn.net/p/ad3879b53f4b8b31db27382b5fc65bbc
HarmonyOS实战—卡片的样式设计相关推荐
- HarmonyOS实战—可编辑的卡片交互
目录 HarmonyOS实战 前言 何为卡片编辑功能? 定义编辑界面 界面的交互逻辑 界面的布局 HarmonyOS实战 前言 在前面的天气卡片设计中,我们设计了一个天气类卡片在桌面进行7日天气的直观 ...
- 我的HarmonyOS实战 — 一篇文章讲明白什么是鸿蒙2.0服务卡片
目录 引言 正文 1. 什么服务卡片? 2. 服务卡片如何设置? 3. 如何取消服务卡片? 4. 服务卡片的设计探索 4.1 创造性的上滑操作 4.2 服务卡片的视觉展示 5. 服务卡片提交流程 6. ...
- 【有利可图网】PS实战系列:PS图层样式设计制作透明塑料质感字体效果
本篇教大家如何巧用PS图层样式设计制作透明塑料质感字体效果!教程讲解过程灰常的详细,首先把字体复制多层,副本文字图层填充都改为零,然后为副本字体层设置图层样式,这样就可以叠加出高光细腻,质感不错的文字 ...
- HarmonyOS实战—欧洲杯还可以这么玩?
目录 HarmonyOS实战 前言 创建卡片 卡片的样式开发 布局设计 index.hml index.css index.json 卡片的交互 卡片数据的初始化 卡片的定时更新 权限设置 Harmo ...
- HarmonyOS实战[一]——原理概念介绍安装:基础篇
[本文正在参与"有奖征文|HarmoneyOS征文大赛"活动] 相关文章: HarmonyOS实战[一]--原理概念介绍安装:基础篇 HarmonyOS实战[二]-超级详细的原子化 ...
- html卡片布局按钮,Material Design风格动态网格卡片布局UI设计
这是一款效果非常炫酷的Material Design风格动态网格卡片布局UI设计效果.在该效果中鼠标滑过卡片时会有阴影效果,当浏览器尺寸改变时,卡片大小会随着改变,整个网格布局有动态变化效果. 使用方 ...
- HarmonyOS实战 —基于hi3861芯片鸿蒙2.0的避坑指南
HarmonyOS实战 -基于hi3861芯片鸿蒙2.0的避坑指南 特别说明:本文章与卡片开发无关,想看卡片开发的不用往下读了 最近学习鸿蒙设备开发的过程中遇到了很多问题,因为目前几乎所有设备开发教程 ...
- 【Material Design视觉设计语言】应用样式设计
作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://github.co ...
- html卡片ui,炫酷网站带缩略图的文章卡片UI界面设计
这是一款效果非常炫酷的网站列表页文章卡片UI界面设计效果.该文章卡片中包含了文章的缩略图.标题.文章简介等内容.文章的简介默认是不可见的,当鼠标滑过卡片时,缩略图被缩小,文章简介内容随之滑动显示出来. ...
最新文章
- Android进阶笔记07:Android之MVC 理解
- sprintf,求字符串长度
- 超棒的jQuery密码强度检验插件 - Complexify
- JavaScript怎么上传图片
- sql中当前日期加2个月_一文搞定Mysql日期时间函数
- Llinux 磁盘配额的搭建和常规问题解答
- LeetCode 1268. 搜索推荐系统(Trie树/multiset)
- 原生JS 将canvas生成图片
- python导入鸢尾花数据集_数据可视化——鸢尾花数据集的分析与散点图的绘制
- Tomcat安装与配置(详细步骤)
- HTML期末大作业——基于html实现传统文化苏绣手工艺带psd设计图视频dw模板
- Spring Boot 应用在 kubernetes 的 sidecar 设计与实战
- I2C分析及RX8025驱动编写
- Navicat Premium使用教程
- web前端学习之———互联网与HTML篇
- 第1章第6节:如何打开之前编辑过的演示文稿 [PowerPoint精美幻灯片实战教程]
- python列表按照长度排序_Python程序根据元素的长度对列表进行排序?
- 小福利,用excel制作旋风图,小狗图和漏斗图
- 心魔,只有自己才能战胜。只要有心做,必定能达成。
- 【数据结构与算法】二叉树题目很难?一句话秒杀基础二叉树题目
热门文章
- scratch经典扫雷游戏中实现点阵字库中文显示
- python创建excel文件报错_[转]用Python读写Excel文件
- 《Splunk智能运维实战》——3.7 制作请求方法、浏览量和响应时间的时间图
- 上交所技术 基于FPGA技术的FAST行情解码研究
- 使用Pytorch搭建CNN模型完成食物图片分类(李宏毅视频课2020作业3,附超详细代码讲解)
- Coderforces集锦
- Java 验证码识别(Tess4J初体验)
- tess4j linux so文件,linux tesseract 安装及部署tess4j项目的常见问题
- roc曲线spss怎么做_SPSS在线_SPSSAU_SPSS_ROC曲线
- 网游如何防外挂篡改数据——客户端内存加密