上一章 自动布局中的自适应逻辑

并列布局的自适应类型

UX百科编辑部2025-01-22 发布
67人在学·0条笔记
收藏

自动布局中允许添加多个子图层进行并列布局,而应用并列的同时也可以添加自适应的逻辑,实现更灵活的组件控制。

同理,在这种模式下也包含父级适应还是子级填充两种情况,我们分别来拆分它们的应用逻辑。

首先是父级编组随子元素适应,比如创建一个新闻列表中的卡片,卡片内包含标题、简讯、操作三个栏目并列,卡片高度会随内容的高度适应。那么卡片本身的高度设置为 Hug,下级内容为 Fixed 或者 Hug (文本框可用),则只需要完成内部元素的设计和排列,就能自动适应出最终得卡片高度。

父级编组适应只有它一个对象做自适应,很容易理解。复杂的是子元素适应模式下,多个子元素进行自适应,或采用混合模式进行布局的逻辑。

第一种情况是子元素都要使用自适应模式,比如商品列表、瓷片区等,当父级组件进行宽度调节时,则下方所有的子元素都要自适应调整尺寸。

这种场景下父级编组的宽度使用 Fixed,所有下级元素使用 Fill Container,则父级组件调整宽度时下级元素会自动适应 (会强制使并列的元素宽度相等)。

另一种情况是子元素有的尺寸不变,有的自适应。比如一个顶部标题栏,包含左右两侧的图标和中间的搜索框。因为标题栏可能会应用在不同尺寸的画布中,宽度会变更,但是两侧图标的尺寸是固定的。

所以在这个场景中,左右两侧图标的宽度是 Fixed,而中间搜索栏的宽度是 Fill Container,那么实现的效果如下:

搜索栏使用自适应的宽度计算公式为:

搜索栏宽 = 页面宽 – 左右间距 – 图标宽*图标数

在组件设置中,要先确定两者的适应关系,是父级基于子元素适应,还是子元素基于父级填充。

67人在学·0条笔记
收藏
已学会
1人已学会
下一篇自动布局的相互嵌套
自动布局处理的是编组层和下级元素的排版关系,下级元素可以是普通编组、矢量图层、图片、文本、组件,也可以是 —— 其它自动布局。 也就是自动布局是可以进行上下嵌套的,而它们也可以实现自适应的效果。 比如做一个横向标签列表,自动布局得宽度为自适应 hug,它下级的每个标签可以由自动布局实现,且每个标签作...
本章笔记
仅看自己
logo