在 Compose 中,您可以将多个修饰符串联起来,以更改可组合项的外观和风格。这些修饰符链可能会影响传递给可组合项的约束条件,这些约束条件用于定义宽度和高度边界。
本页介绍了链式修饰符如何影响约束条件,进而影响可组合项的测量和放置。
界面树中的修饰符
为了了解修饰符如何相互影响,直观呈现修饰符在界面树中的显示方式会很有帮助,该结构是在组合阶段生成的。如需了解详情,请参阅组合部分。
在界面树中,您可以将修饰符视为布局节点的封装容器节点:
向可组合项添加多个修饰符会创建一个修饰符链。当您链接多个修饰符时,每个修饰符节点都会封装链的其余部分和布局节点。例如,当您链接 clip
和 size
修饰符时,clip
修饰符节点会封装 size
修饰符节点,然后 size
修饰符节点会封装 Image
布局节点。
在布局阶段,遍历树的算法保持不变,但系统也会访问每个修饰符节点。这样,修饰符就可以更改其封装的修饰符或布局节点的大小要求和位置。
如图 2 所示,Image
和 Text
可组合项本身的实现由一系列封装单个布局节点的修饰符组成。Row
和 Column
的实现只是描述其子项布局方式的布局节点。
总结:
- 修饰符会封装单个修饰符或布局节点。
- 布局节点可以布局多个子节点。
以下部分介绍了如何使用此心理模型推理修饰符串联及其对可组合项的大小有何影响。
布局阶段中的约束条件
布局阶段遵循三步算法来查找每个布局节点的宽度、高度以及 x 和 y 坐标:
- 测量子节点:节点会测量其子节点(如果有)。
- 确定自己的大小:节点根据这些测量值确定自己的大小。
- 放置子项:每个子节点都相对于节点自身的位置进行放置。
Constraints
可帮助在算法的前两个步骤中为节点找到合适的大小。约束条件用于定义节点宽度和高度的最小和最大边界。当节点确定其大小时,其测量大小应在此大小范围内。
限制条件的类型
限制条件可以是以下项之一:
- 受限:节点具有宽度和高度上限和下限。
- 无界限:节点不受任何大小限制。最大宽度和高度边界设为无穷大。
- Exact:系统会要求节点遵循确切的大小要求。最小边界和最大边界设为相同的值。
- 组合:节点遵循上述约束条件类型的组合。例如,约束条件可以限制宽度,同时允许无上限的最大高度,也可以设置确切宽度,但提供受限的高度。
下一部分将介绍如何将这些约束条件从父项传递给子项。
如何将约束条件从父项传递给子项
在布局阶段中的约束条件中所述的算法的第一步,约束条件会在界面树中从父项向下传递至子项。
当父节点测量其子节点时,它会向每个子节点提供这些约束条件,以告知它们允许的大小。然后,在确定自己的大小时,它还会遵循其父级传入的约束条件。
概括来讲,该算法的运作方式如下:
- 为了确定它实际希望占用的尺寸,界面树中的根节点会测量其子节点,并将相同的约束条件转发给其第一个子节点。
- 如果子项是不会影响衡量的修饰符,则会将约束条件转发给下一个修饰符。除非遇到会影响衡量的修饰符,否则约束条件会按原样向下传递到修饰符链。然后,约束条件会相应地调整大小。
- 一旦到达没有任何子节点的节点(称为“叶节点”),该节点就会根据传入的约束条件确定其大小,并将此已解析大小返回给其父节点。
- 父项会根据此子项的测量值调整其约束条件,并使用这些经过调整的约束条件调用其下一个子项。
- 测量完父节点的所有子节点后,父节点会确定自己的大小,并将其传递给自己的父节点。
- 这样,整个树会按深度优先顺序遍历。最终,所有节点都确定了其大小,测量步骤也随之完成。
如需查看深入示例,请观看约束条件和修饰符顺序视频。
影响约束条件的修饰符
在上一部分中,您了解到某些修饰符可能会影响约束条件大小。以下部分介绍了会影响约束条件的具体修饰符。
size
修饰符
size
修饰符用于声明内容的首选尺寸。
例如,以下界面树应由 200dp
在 300dp
容器中呈现。约束条件是有界限的,允许宽度介于 100dp
和 300dp
之间,高度介于 100dp
和 200dp
之间:
size
修饰符会调整传入的约束条件,以匹配传递给它的值。在此示例中,值为 150dp
:
如果宽度和高度小于最小约束边界,或大于最大约束边界,则修饰符会尽可能贴近传递的约束条件,同时仍然遵循传入的约束条件:
请注意,串联多个 size
修饰符不起作用。第一个 size
修饰符会将最小值和最大值约束条件都设置为固定值。即使第二个大小修饰符请求的大小更小或更大,它仍需要遵循传入的确切边界,因此不会替换这些值:
requiredSize
修饰符
如果您需要节点替换传入的约束条件,请使用 requiredSize
修饰符,而不是 size
。requiredSize
修饰符会替换传入的约束条件,并将您指定的大小作为确切边界传递。
当大小传回树时,子节点将在可用空间中居中:
width
和 height
修饰符
size
修饰符会调整约束条件的宽度和高度。借助 width
修饰符,您可以设置固定宽度,但不确定高度。同样,使用 height
修饰符,您可以设置固定高度,但宽度不确定:
sizeIn
修饰符
借助 sizeIn
修饰符,您可以为宽度和高度设置确切的最小和最大约束条件。如果您需要对约束条件进行精细控制,请使用 sizeIn
修饰符。
示例
本部分展示并说明了使用链式修饰符的多个代码段的输出。
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
此代码段会生成以下输出:
fillMaxSize
修饰符会更改约束条件,将最小宽度和高度都设置为最大值,即宽度为300dp
,高度为200dp
。- 即使
size
修饰符希望使用大小为50dp
,但仍需要遵循传入的最小约束条件。因此,size
修饰符还会通过200
输出300
的确切约束边界,从而有效地忽略size
修饰符中提供的值。 Image
会遵循这些边界,并报告大小为300
x200
,该大小会一直传递到树顶。
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
此代码段会生成以下输出:
fillMaxSize
修饰符会调整约束条件,将最小宽度和高度都设置为最大值,即宽度为300dp
,高度为200dp
。wrapContentSize
修饰符会重置最小约束条件。因此,虽然fillMaxSize
生成的约束条件是固定的,但wrapContentSize
会将其重置为有界限约束条件。现在,以下节点可以再次占用整个空间,也可以小于整个空间。size
修饰符会将约束条件设置为50
的最小和最大边界。Image
会解析为50
x50
的大小,size
修饰符会将其转发。wrapContentSize
修饰符具有特殊的属性。它会获取其子项,并将其放置在传递给它的可用最小边界的中心。因此,它向其父级传达的大小等于传入它的最小边界。
只需组合使用三个修饰符,您就可以为可组合项定义尺寸,并将其居中放置在其父项中。
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .clip(CircleShape) .padding(10.dp) .size(100.dp) )
此代码段会生成以下输出:
clip
修饰符不会更改约束条件。padding
修饰符会降低最大约束条件。size
修饰符会将所有约束条件设置为100dp
。Image
会遵循这些约束条件,并按100dp
报告大小为100
。padding
修饰符会针对所有尺寸添加10dp
,因此它会将报告的宽度和高度增加20dp
。- 现在,在绘制阶段,
clip
修饰符会通过120dp
对120
的画布进行操作。因此,它会创建该大小的圆形遮罩。 - 然后,
padding
修饰符会在所有尺寸上将其内容内嵌10dp
,因此它会将画布大小按100dp
减小到100
。 Image
会绘制在该画布中。图片会根据120dp
的原始圆形进行剪裁,因此输出结果是非圆形。