20.图解鸿蒙之布局-blank

144 阅读1分钟

在打造页面布局时,自适应拉伸效果可是关键,它能让页面在不同屏幕尺寸下都保持美观与实用。在线性布局里,有两个巧妙的办法来实现这一效果。


一是借助空白填充组件 Blank,它在线性布局容器的主轴方向上相当机灵,会自动把空白空间填满,轻松达成自适应拉伸。就像下面这段代码展示的:

image.png

在这个布局里,Row 容器内部,Text 组件显示文字,Toggle 组件是个开关,中间的 Blank 组件则见缝插针,填充剩余的水平方向(因为 Row 的主轴是水平方向 )空间,让整个 Row 布局满满当当,没有一丝缝隙。


另一个方法是利用 Row 和 Column 容器自身特性。只要给它们设置宽高为百分比形式,当屏幕的宽高出现变动时,布局就能自动适应新尺寸。从竖屏切换到横屏时,得益于这种百分比设置,页面元素会自动调整位置与大小,维持布局的合理性与美观度,无需手动干预,轻松搞定不同设备下的显示差异,给用户带来始终如一的视觉体验。