在前端布局设计里，让页面元素能够自适应缩放可是极为关键的，如此一来，无论用户使用何种尺寸的设备，都能收获舒适美观的视觉体验。在线性布局场景下，有两大实用方法能帮我们达成这一目标。
方法一：借助 layoutWeight 属性
当父容器的尺寸已经确定时，layoutWeight 属性就派上用场了。它用于设定子元素与兄弟元素在主轴方向上的 “话语权”，也就是权重。一旦设置了这个属性，元素原本的尺寸设置就会被无视，它们会依据权重在不同尺寸设备下智能地占满剩余空间。
从横屏与竖屏的效果图能清晰看出，各个子 Column 组件依据自身的 layoutWeight 值，灵活瓜分了父 Row 容器在水平方向（Row 容器主轴是水平方向 ）的空间，不管屏幕怎么变，占比始终精准。
方法二：运用百分比设置宽度
同样在父容器尺寸既定的情况下，使用百分比来明确子元素与兄弟元素的宽度，是另一种简单有效的自适应手段。
在这段代码里，三个子 Column 组件分别设置了 20%、50%、30% 的宽度，如此一来，无论设备是横屏还是竖屏，它们都能稳稳占据对应的水平空间比例，维持布局的稳定与美观。这两种方法为我们打造跨设备适配的页面布局提供了有力支撑。
