用户场景

相信很多人都在设计器上看到过“扩展比率”和“压缩比率”这两个属性，但非前端开发可能大多会对这两个属性表示疑惑：“这是个啥子属性？干嘛用的？”。答：这两个属性能帮你做出可以很好兼容适配不同尺寸屏幕的布局。

功能介绍

1.扩展比率

扩展比率用于设置一个控件在分配父级控件剩余空间时能分配到的空间比例（此处空间指：当父级控件为水平布局时，指宽度；当父级控件为垂直布局时，指高度），咋一听好像很难理解，没关系，下面我们直接图解：

拿图中第三个例子说明，B、C的扩展比率分别为1和2，剩余空间为600px，则B分得剩余空间为:

600 * (1 / (1 + 2)) = 200，加上自身基础宽度，则最终B的宽度为400px，同理得C的最终宽度为600px。

注：

① 如果你的父容器设置了垂直布局，那么此时分配的就会是父容器的剩余高度空间，分配对象为子容器的高度；

②扩展比率设置为0即表示该控件不被扩展，只维持自身宽度(高度)

③当父容器剩余空间小于等于0时，扩展比率不生效（因为没有空间可分了）

2.压缩比率

压缩比率用于设置一个控件在父级控件空间不足以放下所有子控件时，不足的部分由子控件们按照设置的压缩比例压缩各自的空间

拿图中第三个例子说明，B、C的压缩比率分别为1和3，父容器不足的空间为200px，则B应该压缩的空间为:

200 * (1 / (1+3)) = 50，自身基础宽度600px减去应该被压缩的宽度，则最终B的宽度为550px，同理得C的最终宽度为450px。

注：

① 如果你的父容器设置了垂直布局，那么此时需要压缩的空间大小就是父容器距离足以容纳子控件的高度所差的空间，压缩对象为子容器的高度。

②压缩比率设置为0即表示该控件不被压缩，维持自身宽度(高度)，即使本身宽度（高度）超出父容器也不会被压缩。

③当父容器的空间足以容纳所有子控件时，子控件上设置的压缩比率不生效，所有子控件维持自身宽度（高度）

快速了解“扩展比率”和“压缩比率”