于是，2021年6月2日，华为正式公布了其自主研发的操作系统—HarmonyOS，也就是鸿蒙。 ...我们只需要在图标位置处，轻轻上划，就能呼出相对应的应用卡片，这些卡片还可以实现自定义大小 、固定在主屏幕等功能。 ...HarmonyOS Developer中我们可以了解到这三者的分工： · 提供方模块 提供卡片显示内容的HarmonyOS应用或原子化服务，控制卡片的显示内容、控件布局以及控件点击事件。...卡片缓存管理： 在卡片添加到卡片管理服务后，对卡片的视图信息进行缓存，以便下次获取卡片时可以直接返回缓存数据，降低时延。...新建项目 至少选择一个类型 进入之后显示如下界面 单击运行显示 Hello World 简单的鸿蒙版 Hello World 到这里就完成啦，还不赶快动手试试 ^ _^
由于当时是直接设置了一个粒度（比如300个卡片作为一片），在刷新或者更新后去滚动页面，「虽然没有白屏现象了，但卡顿依然非常明显。」...智能表格是一种拥有多视图的新型表格，它本质上是一个在线数据库，拥有更丰富的列类型和视图，一份数据多种维度展示，目前已经有表格视图、看板视图、画册视图、甘特视图、日历视图等。...表格视图： 看板视图（无封面）： 看板视图（有封面）： 甘特视图： 画册视图： 日历视图： 其中看板视图和画册视图是以卡片的形式来展现，非常适合做一些运营活动和项目管理。...表格里面的排版意思就是在渲染之前根据行列来计算布局信息（宽高等等），在看板里面，每个分组的高度都不一样，都是根据里面的卡片高度累加计算的，所以计算每个卡片的高度成为了重点。 为什么计算卡片高度会慢呢？...以下面这段话为例，我们来给定一个宽度，需要计算出来文本在哪个字符处换行、添加省略号。 这里最初使用的是二分查找对整段文本进行计算，不断进行二分，最终找到在哪个字符处进行换行。
与SAP Fiori元素相比，自由式应用程序为前端开发人员提供了UI设计和逻辑方面的完全灵活性，但在开发阶段需要大量的精力。...概述页面（OVP） –由多种样式的卡片组成。卡片可以包括条形图，图形。 分析列表页面（ALP） –由带有条形图和图表以及列表的分析视图组成。...OData导航必须是必须在导航上显示的下一个实体。 7.单击下一个选项卡中的完成，将创建项目。 8.选择项目，然后单击运行。 9.项目执行后，Fiori应用程序将如下所示。...为了在应用程序中显示智能表，窗体，字段等，我们利用UI批注将UI元素放置/放置在Fiori应用程序上。 我们在CDS视图级别将UI注释编写为@UI。...要创建元数据扩展文件，请右键单击CDS节点，然后选择“元数据扩展名”。提供类似于CDS数据定义的名称和描述。 创建元数据扩展文件后，最重要的步骤是： 提供我们要进行UI注释的视图名称。
自己亲手做一个天气卡片组件的想法其实很早就有了，但是做起来难度还是很大的（布局、数据源、天气展示、自适应），最终不了了之。...（实际上在国庆小长假之前就基本上把问题搞定了）目前版本的DouWeather托管在临时仓库，因为没有考虑代码结构，后期维护困难。...并且在开发时图标仅设计了3个，需要顾及开发后期如何便捷地对图标增删改，尽量降低图标检索和主体代码间的耦合度。...我一度想要固定卡片宽度，事实上直到我将DW的布局和逻辑基本全部写完后，我依然没有找到很好的解决方案。...给我灵感的，是windows的资源管理器： 天气卡片的主体元素固定在左侧不动，右侧的数据展示根据卡片宽度显示滚动条，实现也非常简单，因为我使用的弹性布局，只要在原来的数据展示区域外边包装一层带有 flex-grow
本文以下图展示的企业门户应用为例，我们来学习如何使用微搭进行企业门户应用的快速搭建。...9、添加一个列表视图组件，选择模板为卡片列表。 10、在右侧对列表视图组件进行数据绑定配置，在右侧数据模型配置中选择通过 Excel 生成的数据模型。...12、随后我们对列表视图中的图片进行数据绑定，选中列表视图下的图片组件，随后在右侧配置区中单击数据绑定按钮，绑定对应的数据字段。...5、之后我们对页面的布局样式进行细微调整，将标题组件的全部内间距调整为20，富文本组件的左右内间距调整为20，至此我们便完成了"关于我们"页面的创建。...创建内容详情页面 1、"内容详情""页面与"关于我们"页面布局基本类似，我们可以克隆功能进行页面的复制，并单击页面设置按钮修改页面名称为"内容详情"。
保存每列末尾的视图id，是为了在它下方添加视图时可以指定位于哪个视图的下方；保存每列的总高度，是为了判断当前哪一列总高度最小，从而把新来的网格添加到该列末尾。...为此我们需要重写dispatchTouchEvent方法，在按下事件时计算当前按下区域位于哪个控件中，具体算法就是获取该控件在屏幕上的位置getLocationOnScreen，然后根据宽和高得到该触摸点的归属控件...接着在弹起事件中判断要如何处理弹起事件，单击和长按可以通过按下的时间长短来区分，网格位置的position，可以用当前控件的编号id减去第一个视图的临时id，它们的差便是当前网格的序号。...该控件实现了瀑布流网格的所有常用功能，但在一些细节上处理地有问题。...比如网格内容动态变化导致网格高度也随之变化时，StaggeredGridView在第一行网格的展示上就存在高度不对齐的情况，下面截图便反映了StaggeredGridView的这个问题。
RecyclerView、CardView为用于显示复杂视图的新增Widget。接下来看看如何使用吧。...RecyclerView注意事项，如何用 虽然RecyclerView充分考虑了它的扩展性，更好用，更灵活，但是用起来也有些麻烦。...LayoutManager：这个LayoutManager类决定视图被放在画面中哪个位置，但这只是它的众多职责之一。它可以管理滚动和循环利用。...如何用呢？这里我就不过多介绍了，因为关于RecyclerView的使用，去年我很早时间就写过一篇文章。...CardView CardView介绍 CardView是Android5.0之后为新增的控件，CardView是一个卡片布局，布局可以包含圆角和阴影，本质上CardView是一个FrameLayout
要了解有关显示关键字段的更多信息，请阅读“折叠卡片时显示关键字段”部分。 桌卡属性 您可以更改模型视图中的表卡如何显示具有卡属性的信息。要查看卡的属性，请确保未选择表或字段。...卡顶部的PIN KEY字段 您可以选择将表格的关键字段固定在其表格卡片的顶部。 此图像以字母顺序显示Sales表中的字段，这是Power BI中表和字段的默认顺序。...性能改进 我们对模型视图进行了一些性能改进。如果您有一个大型模型（超过50个表），那么Power BI会加载并让您确定您要使用的布局，而不是尝试显示所有表并遇到性能错误。...但是，每次您需要应用过滤器时，都需要额外单击一下。5月，我们发布了“应用所有过滤器”的预览选项，您可以在过滤器窗格中添加一个“应用”按钮，从本质上讲，您和您的最终用户可以一次应用所有过滤器修改。...要使用缩放滑块，只需单击并拖动端点即可调整视图窗口的尺寸。然后单击并拖动它们之间的栏以平移该窗口。以下是实际使用的缩放滑块的示例： 您可以在支持的视觉效果的格式窗格中为其卡片启用缩放滑块。
这些海量的数据皆会以图表或列表的方式跃然纸上，方便团队成员随时查看各项目的进度、状态和指标，云端协作迎来真正意义上的工作数据可视化。...本文将介绍如何配置仪表盘，内容包括如何使用仪表盘中的统计卡片编辑、自由拖拽统计卡片，自定义仪表盘布局等自定义功能，并简要展示每张统计卡片的作用及统计范围，点击阅读原文可查阅各统计卡片详细说明。...如何配置 点击仪表盘「自定义」按钮进入编辑状态后，可以进行添加卡片、统计卡片编辑、统计卡片拖拽等仪表盘布局操作。 您的每次设置只会应用于个人视图，不会影响团队中其他成员的视图。...[20200806150903.png] 添加卡片 在编辑状态中点击「添加卡片」按钮，右侧会浮现菜单栏展示各统计卡片，可拖拽至仪表盘面板完成卡片的添加。...[20200806152413.png] 统计卡片拖拽 每张卡片均可拖动调整卡片位置，点击卡片空白处可拖拽整张卡片。
界面下部分为各个书库展示界面，每个展示卡片左半部分为书库封面，右半部分则为书库的名称与简介，单击书库卡片则会跳转对应书库界面，右键则会弹出响应补充功能按钮：打开书库，编辑书库，删除书库，以及打开书库所在文件夹...同时，瀑布流布局可以节约页面空间，因为它可以让网页上的元素紧凑地排列，使得页面可以呈现更多内容，同时使得页面不显得过于拥挤。...最重要的是瀑布流布局可以适应不同屏幕尺寸，因为它可以根据屏幕宽度自动调整元素的排列方式，从而使得页面可以在不同的设备上呈现出最佳的布局效果。...图集元数据编辑界面 在图集展示界面单击图片会展开图片资源展示与编辑界面栏，界面最上方是图片资源预览缓存图，图片下方展示图片的五个主色调色块，单击或右键可以选择复制色块的 RGB 值或 16 进制值。...页面右半部分则是功能键与基本信息展示卡片，最上方三个按钮分别支持用户将图片分享至 QQ 空间与微信或是复制文件路径，下方展示了图片的评分，相关链接，图片信息备注，标签，创建日期以及分辨率和图片类型等基本信息
在使用MUI开发APP的过程中，功能的融合和美观的布局，往往能使得项目得以顺利进展。不错的设计肯定离不开MUI的各个控件。...在本文中，我将介绍如何使用MUI现成样式做一个卡片视图。首先，大家是否明白卡片视图是什么？我们不妨看看下面这张图。...不难看出在这个页面中，有三张完整的卡片模块，其实，CardView就是若干个卡片模块的集合。在同一个CardView中的所有卡片大致主题样式应该相似，卡片内容上的布局也应该保持统一性。...想必，大家对CradView已经有了整体的了解。接下来，我们就开始通过代码具体实现一个CradView。万事第一步，先搭一个框架，咱们也不例外。 先来做个card的框架： <!...当然，对于一些细节上的修改，可以打开mui的css文件进行样式修改。
卡片集合是共面的，或同一平面上的卡片布局。 ?...左：卡片有圆角、能有多个操作、可关闭/重现 右：是tile而不是卡片，无圆角、最多两个操作 ? 左：快速可浏览列表，适合展示无操作的同类内容 右：阻碍了快速浏览，且这些内容不能关闭 ?...图像可以强化卡片中的其他内容。 但是，它们在卡内的大小和位置取决于图像是主要内容还是用于补充卡片上的其他内容。 背景图像 当文字放置在纯色背景上时，文字清晰度最高，且文字对比度足够高。...放置在图像背景上的文本应该保留文本的易读性。 ? 左：不同布局的卡片 右：排版方式能突出重点内容 ?...卡片不会翻转以显示背面的信息。 支持的手势 卡片手势应始终在卡片集合中实施。 支持的手势包括： 滑动手势（swipe gesture）可以在每张卡片上使用。限制视图内的轻扫手势，使其不会彼此重叠。
那么如何做好从设计到开发的交付呢？本文就教一教大家，如何用工具帮助完成从设计到开发的完美交付。 一、移交项目 其实在移交具体的设计稿之前，项目的切换和移交更应该处在最前沿。...特点： 能在单个面板上创建并组织各项任务，并能按照截止日期、标签或人员进行筛选 可为每项任务选择受让人、添加提醒、注释、以及文件，以供团队共享 可将各种任务按照甘特图、列状视图或列表视图进行组合 可将日历与特定事件的任务进行同步...特点： 灵活的看板模式，能以卡片、面板和列表的形式存储各项创建的任务 用户可以在卡片中创建各种清单，并能给每项任务的绩效投票 发电子邮件到面板（Email-to-board）的功能，允许用户将他们的电子邮件直接转换到面板和卡片上...很多时候标注密密麻麻的，设计元素又很小，有这个放大镜功能就不用愁了。 ? 可切换到图层树。图层树展示了所有图层和图层的层级关系，单击图层可在Canvas中显示出来。 ?...在Dashboard中双击任意一个Page就可进入到Canvas；单击选中一个图层，鼠标Hover到另一图层上，即可查看图层间的标注； 右侧面板展示了详细的信息，包括X/Y、宽/高、色值、阴影、字体、文字内容等
布局编辑器中的示例数据 许多Android布局具有运行时数据，这使得在应用程序开发的设计阶段难以可视化布局的外观和感觉。您现在可以在布局编辑器中轻松查看您的视图预览，其中包含示例数据。...要尝试使用示例数据，请将其添加 RecyclerView 到新布局，单击设计视图下方的设计时属性按钮 ，然后从样本数据模板轮播中选择一个选择。...要开始使用，请右键单击项目文件夹并选择New > Other > Slice Provider。 要了解更多信息，包括如何测试Silces交互，请阅读Silces入门指南。...更多新的lint检查 除了上一节中介绍的Kotlin互操作性lint检查之外，Android Studio 3.2还实现了20个新的lint检查，以帮助您查找和识别常见代码问题。...当您使用AVD管理器编辑AVD时，您可以指定在AVD启动时加载哪个AVD快照。
例如，Power BI分析了散点图视觉效果，显示了各种交易，并显示了哪个城市/地区的单笔交易收入最高，交易次数最多： ?...现在，您可以将任何视觉效果设置为保持不变，而不是在选择时显示在前面：只需在格式窗格的“常规”卡片中打开该视觉效果的“维护图层顺序”切换即可。 ? 请记住，这将调整行为，仅用于阅读视图。...移动创作增强 书签窗格现在在移动版式视图中可用 从此版本开始，当您使用“移动设备”视图处理移动设备优化的布局时，可以打开“书签”窗格并选择一个书签以查看其如何影响移动布局中的报表，而无需返回到Web视图...使用新的搜索框，您可以 在工作区中搜索所有内容，快速在图中查找项目，查看其沿袭，并通过单击卡来浏览其元数据。 要使用搜索，请在键盘上键入CTRL + F或单击顶部菜单上的搜索框。...数据源影响分析 几个月前，我们介绍了数据集影响分析，现在我们发布了数据源影响分析。现在，只需单击一下，您便可以检查整个Power BI租户中的哪些数据集和数据流使用特定的数据源。
过渡绘制 屏幕上某一像素点在一帧中被重复绘制多次，就是过渡绘制。 下图中多个卡片跌在一起，但是只有第一个卡片是完全可见的。背后的卡片只有部分可见。...但是Android系统在绘制时会将下层的卡片进行绘制，接着再将上层的卡片进行绘制。但其实，下层卡片不可见的部分是不需要进行绘制的，只有可见部分才需要进行绘制。 ?...典型的例子，抽屉布局，找了网易云音乐开刀： ? 注意观察左侧抽屉打开的时候，抽屉布局和背后布局重叠在一起了，此时整个屏幕一多半都变成了红色，过渡绘制严重。...在抽屉布局弹出时，抽屉布局是不透明的，也就是说抽屉布局背后挡住的内容布局是不需要绘制的，而网易云进行了绘制，导致抽屉布局所在区域的像素点绘制了多次。...背景为不透明、抽屉高度和父布局高度一致时，取得抽屉视图左、上、右、下边缘在canvas中的位置信息。
不过，牢记以下要点，基本能做到90%了。实际上，Google 官方的应用也有不遵照规范的地方，不能太拘泥于条条框框。...编辑 **卡片集**是**卡片**的一个平面布局 编辑 即使在同一个列表中，卡片的内容和布局方式也可以不一样。 编辑 卡片统一带有2dp的圆角。...编辑 ** 卡片布局准则 ** 字体设计 正文：14 sp 或 16 sp 标题：24 sp 或更大 扁平按钮：Roboto Medium, 14 sp, 10 sp 字间距 移动设备上的卡片间距...通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图，或者是弹出与 Chip 实体相关的操作菜单。 狭小空间内表现复杂信息的一个组件，比如日期、联系人选择器。 ...编辑 编辑 通栏分隔线的层级高于内嵌分隔线 ** 网格（Grids） ** 编辑 网格列表是一种标准列表视图的可选组件。网格列表与应用于布局和其他可视视图中的网格有着明显的区别。
本文围绕动态化容器中的动态布局技术，阐述了如何通过可测性改造来帮助达成提升测试效率的目标。希望可以给同样需要测试动态化页面的同学们带来一些启发和帮助。...如何在影响范围较小的前提下，达成获取视图信息的目标呢？接下来，我们将进一步研究动态布局的实现方案。...图8 动态卡片的页面绘制流程 动态布局的视图呈现过程分为：解析模板->绑定数据->计算布局->页面绘制，计算布局结束后，元素在页面上的位置就已经确定了，那么只要拦截这个阶段信息就可以实现视图信息的获取。...-XrayServer 我们获取到了信息，接下来就要考虑如何将视图信息传递给自动化测试脚本，我们参考了Appium的设计。...动态布局自动化的收益 基于视图可测性的提升，美团动态化卡片的自动化测试覆盖度有了大幅的提升，从原来无法做自动化测试，到目前80%以上的动态化卡片都实现了自动化测试，而且效率也得到了明显的提升。
image-20231208085015798 3.在编辑窗口右上角的工具栏，单击运行，等待编译完成即可便运行在设备上。 这个时候真机就可以看到HelloWord。接下来我们就创建蜜蜂AI元服务。...卡片：具备不同规格大小的界面展示，卡片的内容可以进行交互，如实现按钮进行界面的刷新、应用的跳转等。 卡片提供方：包含卡片的应用，提供卡片的显示内容、控件布局以及控件点击处理逻辑。...FormExtensionAbility：卡片业务逻辑模块，提供卡片创建、销毁、刷新等生命周期回调。 卡片页面：卡片UI模块，包含页面控件、布局、事件等显示和交互信息。...动态卡片事件能力说明 针对动态卡片，ArkTS卡片中提供了postCardAction()接口用于卡片内部和提供方应用间的交互，当前支持router、message和call三种类型的事件，仅在卡片中可以调用...例如当resource指定为$profile:form_config时，会使用开发视图的resources/base/profile/目录下的form_config.json作为卡片profile配置文件
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
