核心内容摘要
窥探平凡中的不凡：当《家访的老师》遇上吴梦梦
Modifier.align() 和 Arrangement 的区别Modifier.align()作用对象当前元素在父容器中的位置使用场景在Box容器中使用功能控制单个子元素在父容器中的对齐方式常用值Alignment.TopStart,Alignment.Center,Alignment.BottomEnd等示例Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center){// 这个 Box 在父 Box 中居中Box(modifierModifier.size(
dp).align(Alignment.TopStart)// 这个会覆盖父 Box 的 contentAlignment.background(Color.Red)){Text(Hello)}}Arrangement作用对象容器内部多个子元素之间的排列方式使用场景在Row和Column容器中使用功能控制所有子元素作为一个整体在容器中的分布方式常用值Arrangement.Start,Arrangement.Center,Arrangement.SpaceBetween等
两者的详细对比Box 中的 alignBox(modifierModifier.size(
dp).background(Color.LightGray)){// 这个红色方块在父 Box 中靠右上角对齐Box(modifierModifier.size(
dp).align(Alignment.TopEnd)// 控制自己在父容器中的位置.background(Color.Red))// 这个蓝色方块在父 Box 中居中Box(modifierModifier.size(
dp).align(Alignment.Center)// 控制自己在父容器中的位置.background(Color.Blue))}Row 中的 ArrangementRow(modifierModifier.fillMaxWidth().height(
dp).background(Color.LightGray),horizontalArrangementArrangement.SpaceEvenly,// 控制所有子元素的排列方式verticalAlignmentAlignment.CenterVertically// 控制所有子元素的垂直对齐){Box(modifierModifier.size(
dp).background(Color.Red))Box(modifierModifier.size(
dp).background(Color.Blue))Box(modifierModifier.size(
dp).background(Color.Green))}// 结果是三个方块在 Row 中均匀分布
关键区别
总结特性Modifier.align()Arrangement作用对象单个元素容器内所有子元素使用容器BoxRow, Column, LazyRow, LazyColumn控制什么元素在父容器中的位置子元素之间的排列方式是否能覆盖能覆盖父容器的 contentAlignment容器级别设置影响所有子元素应用场景需要精确定位单个元素需要控制多个元素的整体布局
混合使用示例Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center){Column(modifierModifier.width(
dp),horizontalAlignmentAlignment.CenterHorizontally,// 控制 Column 中所有子元素的水平对齐verticalArrangementArrangement.SpaceEvenly// 控制 Column 中子元素的垂直分布){Box(modifierModifier.size(
dp).background(Color.Red))Box(modifierModifier.size(
dp).background(Color.Blue))// 这个绿色方块想要靠右对齐而不是继承 Column 的水平居中Box(modifierModifier.size(
dp).align(Alignment.End)// 覆盖 Column 的 horizontalAlignment.background(Color.Green))}}
你的 ScaleButton 中的 Arrangement在你的ScaleButton中Row(modifier...,horizontalArrangementArrangement.Center,// 控制图标、Spacer、文本的整体水平居中verticalAlignmentAlignment.CenterVertically,// 控制所有子元素的垂直居中contentcontent,)这里的Arrangement.Center会让 Row 中的三个元素Icon、Spacer、Text作为一个整体在 Row 中水平居中而不是让每个元素单独居中。
重要说明实际上Box 中并没有Modifier.align()而是通过BoxScope.align()扩展函数实现的StablefunModifier.align(alignment:Alignment):Modifier{// ...}所以正确的说法是Box 的子元素可以使用Modifier.align()在父 Box 中定位Row/Column 使用Arrangement和Alignment参数来控制子元素的排列结论简单来说Modifier.align()是 “我当前元素要在爸爸Box家里坐在哪个位置”Arrangement是 “妈妈Row/Column要把我们几个孩子怎么排列摆放”一个控制单个元素的位置一个控制多个元素的排列方式。
这是 Compose 布局系统中两个不同层级的概念。