在设计中,选择合适的容器类型至关重要。Frame 和 Group 的选择直接影响设计的可维护性和效率。Frame 和 Group 的本质差异在于 Frame 提供了更高的设计控制和灵活性。 在本讲中,我们将深入探讨 Frame 和 Group 的技术差异,以及如何利用这些差异提升设计效率。 Group 是被动的。它只是把选中的元素打包,没有自己的坐标系,没有固定边界,子元素跑到哪里它就跟到哪里。Frame 完全不同。Frame 拥有独立的 origin 属性,定义自身的中心点位置;拥有 bounds 属性,描述它在父级坐标系中的精确矩形区域。这意味着 Frame 是一个真正的容器,Gong,它有自己的规则,子元素必须在它划定的空间内运作。 使用快捷键 F 创建 Frame,Frame 的 anchorPoint 默认值是 (0.5, 0.5),这影响所有变换的基准。更关键的是,Frame 变化会自动更新图层的 presentationLayer,也就是说动画状态和静态布局始终保持同步,不会出现「看到的」和「实际的」不一致的情况。autoresizingMask 机制让 Frame 能自适应父级尺寸变化,这是响应式布局的底层逻辑。 图层管理控制的是 Z 序,也就是元素的叠放顺序。一个按钮由背景矩形、文字、图标三层叠加而成,图层树的结构直接决定谁压着谁。图层遮罩(mask)可以创建不规则形状显示,圆角通过 cornerRadius 设置,阴影通过 shadow 系列属性配置,边框通过 borderWidth 和 borderColor 控制。这些属性全部挂载在 CALayer 上,由图层负责渲染和动画。 还有一个少为人知的细节,Gong:layer.sublayers 数组可以直接操作子图层,用 superlayer.insertSublayer 能精确控制插入位置。这不是小技巧,这是专业设计师和开发者沟通时的共同语言。命名图层同样关键——在多人协作环境中,一个叫「矩形 47」的图层和一个叫「按钮/主要/默认」的图层,交付效率相差十倍。 核心要点:Frame 是一个智能容器,具备独立坐标系和自适应能力。掌握 Frame 与 Group 的差异和图层管理技巧,将使你的设计文件更具协作性和专业性。