15-Figma-布局约束和栅格

15-Figma-布局约束和栅格

约束操作

• 拖动Frame,子组件缩放,子组件的默认约束就是缩放
• 拖动Frame,子组件保持在中间,选中所有子组件,然后在属性面板修改
• 拖动Frame,子组件保持在左边,选中所有子组件,然后在属性面板修改
• 拖动Frame,子组件保持在其他位置,选中所有子组件,然后在属性面板修改

约束案列

案列1

效果

左右拉伸Frame，图片不动，标题不动，描述文字拉升

实现

图片 约束 左
标题 约束 左
描述 约束 左右拉伸

案例2

效果

左右拉伸Frame，图片缩放，标题不动，描述文字拉升

实现

图片 约束 缩放
标题 约束 左
描述 约束 左右拉伸

约束简单总结

1. 约束常用于适合弹性布局的界面中
2. 当父级画框进行大小拖动时，只会影响子级，不能跨级控制
3. 按Shift可以加选与减选约束控制

布局网格

• Frame设置布局网格,属性面板操作
• Frame布局网格类型设置为拉伸,属性面板操作

布局网格案例

效果

图标在4等分水平垂直居中，左右拉伸，图片还是居中

实现

方案一：我想的
根据底部栏，计算出一个矩形（底部栏width/4 * 底部栏高度),放入一个图标,然后垂直居中对齐,然后水平摆放,然后创建Frame,设置约束为居中

方法二:利用布局网格
4个图标,套一个frame,然后设置布局网格,然后调节位置(也不是绝对的居中)