如何在Row中单独对子组件进行对齐？

Question

我是Jetpack Compose的新手，正在尝试做一件简单的事情，但却无法实现。

我想要的是在同一行中将一个组件（在这种情况下是Surface）与另一个组件（Column）分别对齐到行的开头和结尾。

我该如何实现呢？

我正在尝试以下内容，但它并没有起作用：

Row(Modifier.padding(top = 24.dp)
        .fillMaxWidth()) {
        Surface(
            modifier = Modifier.size(70.dp),
            shape = RectangleShape,
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
        ) {
            // Image goes here
        }

        Column(modifier = Modifier.size(70.dp)) {
            Text("Total",
                fontSize = 12.sp,
                color = AppGreyDark,
                modifier = Modifier.padding(end = 16.dp))

            Text("12,99 €",
                fontSize = 18.sp,
                color = AppBlackDark,
                modifier = Modifier.padding(top = 4.dp))
        }
    }

- S.P.

Answer 1

你可以在Row中应用Arrangement.SpaceBetween。

Row(
    modifier = Modifier
      .padding(top = 24.dp)
      .fillMaxWidth(),
    horizontalArrangement  =  Arrangement.SpaceBetween) {
       Surface()
       Column()
}

- Gabriele Mariotti

---

如果表面足够宽以至于可以到达并溢出该列，那么这个方法将无法工作。 - TheLibrarian

如果我保持Surface不变，Column会到起始位置。如何使Column不从End对齐方式移动？ - Mohd Qasim

如果表面宽度太大怎么办？（例如它是文本而不是表面并且有很长的文本），如何在不使用约束的情况下将其对齐到列之前？ - user924

@MohdQasim 你根据某个条件隐藏了Surface的左侧组件，对吗？使用相同的条件来设置horizontalArrangement属性的值horizontalArrangement = if (someCondition) Arrangement.SpaceBetween else Arrangement.End - undefined