热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

FigmaAutoLayout(自动布局)内部元素单独自定义间距

Figma自动布局是个非常好用的功能,但是它提供的调整属性只能设定统一的上下边距、左右边距、元素间边距。很显然直接使用这些参数来调整设计稿所能应用的范围是非常有限的。

Figma自动布局是个非常好用的功能,但是它提供的调整属性只能设定统一的上下边距、左右边距、元素间边距。很显然直接使用这些参数来调整设计稿所能应用的范围是非常有限的。官方文档和例子中所演示的都是非常简单的情况,比如它所演示的弹窗,三行元素间的间距相等,这在现实的使用时适用性太差,估计也就能用在列表上。

Figma 自动布局参数设定区

如果我们想在一个弹窗的设计中使用自动布局怎么办?如下图中不同元素之间的距离不同,我们需要一些替代性的操作。

弹窗内的元素之间距离不同

我们使用完全透明的矩形放到自动布局组中即可实现需要的效果,而且不会影响开发视角。当需要调整两个元素间的距离时,调整该矩形高度即可。

图层列表树

有更好的方法或者问题请在评论区留言。本文章同步发表于站酷Figma Auto Layout(自动布局)内部元素单独自定义间距


推荐阅读
  • 本文详细介绍了 com.facebook.drawee.view.SimpleDraweeView 中的 setScaleType 方法,提供了多个实际代码示例,并解释了其在不同场景下的应用。 ... [详细]
  • 本文将详细介绍如何在 Android 平台上开发一个时钟应用。我们将从创建项目开始,逐步介绍布局文件的配置、TabHost 的创建与初始化,以及常见问题的解决方法。 ... [详细]
  • 本文介绍如何使用 Android 的 Canvas 和 View 组件创建一个简单的绘图板应用程序,支持触摸绘画和保存图片功能。 ... [详细]
  • 本文详细介绍了如何在 Android 开发中高效地管理和使用资源,包括本地资源和系统资源的访问方法。通过实例和代码片段,帮助开发者更好地理解和应用资源管理的最佳实践。 ... [详细]
  • Qt QTableView 内嵌控件的实现方法
    本文详细介绍了在 Qt QTableView 中嵌入控件的多种方法,包括使用 QItemDelegate、setIndexWidget 和 setIndexWidget 结合布局管理器。每种方法都有其适用场景和优缺点。 ... [详细]
  • 本文介绍了SVD(奇异值分解)和QR分解的基本原理及其在Python中的实现方法。通过具体代码示例,展示了如何使用这两种矩阵分解技术处理图像数据和计算特征值。 ... [详细]
  • 本文详细探讨了Android Activity中View的绘制流程和动画机制,包括Activity的生命周期、View的测量、布局和绘制过程以及动画对View的影响。通过实验验证,澄清了一些常见的误解,并提供了代码示例和执行结果。 ... [详细]
  • 在 Android 开发中,通过 Intent 启动 Activity 或 Service 时,可以使用 putExtra 方法传递数据。接收方可以通过 getIntent().getExtras() 获取这些数据。本文将介绍如何使用 RoboGuice 框架简化这一过程,特别是 @InjectExtra 注解的使用。 ... [详细]
  • 深入解析 Android IPC 中的 Messenger 机制
    本文详细介绍了 Android 中基于消息传递的进程间通信(IPC)机制——Messenger。通过实例和源码分析,帮助开发者更好地理解和使用这一高效的通信工具。 ... [详细]
  • 本文详细介绍了如何在Android 4.4及以上版本中配置WebView以实现内容的自动高度调整和屏幕适配,确保中文显示正常,并提供代码示例。 ... [详细]
  • ListView简单使用
    先上效果:主要实现了Listview的绑定和点击事件。项目资源结构如下:先创建一个动物类,用来装载数据:Animal类如下:packagecom.example.simplelis ... [详细]
  • 本文详细介绍了如何在 Android 中使用值动画(ValueAnimator)来动态调整 ImageView 的高度,并探讨了相关的关键属性和方法,包括图片填充后的高度、原始图片高度、动画变化因子以及布局重置等。 ... [详细]
  • 本文详细介绍了 Android 开发中 layout_gravity 属性的使用方法及其在不同布局下的效果,旨在帮助开发者更好地理解和利用这一属性来精确控制视图的布局。 ... [详细]
  • 圆形进度指示器忽略宽度/高度属性并且不缩放 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
author-avatar
苗淑香哈哈_405_408
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有