如何在一行中的两个元素之间设置间隔

ccd*_*ccd 37 android android-jetpack-compose android-jetpack-compose-layout

如何使用间隔填充一行中的两个元素,让一个元素位于行的开头,另一个元素位于行的末尾?

Row {
    Text("Start")
    Spacer(modifier = Modifier.SpaceBetween)  // How to set the modifier
    Text("End")
}
Run Code Online (Sandbox Code Playgroud)

Gab*_*tti 72

Modifier.SpaceBetween存在。

您可以在应用horizontalArrangement时使用该参数。此参数放置子项,使它们在主轴上均匀分布,第一个子项之前或最后一个子项之后没有可用空间。RowArrangement.SpaceBetween

Row( modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
    Text("Start")
    Text("End")
}
Run Code Online (Sandbox Code Playgroud)

作为替代方案,您可以weight(1f)将 应用于Spacer.
就像是:

Row (modifier = Modifier.fillMaxWidth()) {
    Text("Start")
    Spacer(Modifier.weight(1f))
    Text("End")
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

  • @Ali_Waris 在这种情况下,您可以使用“Arrangement.SpaceBetween”对第一个文本应用“weight”修饰符。 (5认同)

Sau*_*rat 18

你可以使用这个:

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text("Start")
    Text("End")
}
Run Code Online (Sandbox Code Playgroud)


Ebi*_*Joy 8

可能的水平布置如下。为了更清晰起见,我添加了 3 个元素。

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    TextButtons...
  }
Run Code Online (Sandbox Code Playgroud)

空间均匀

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    TextButtons...
  }
Run Code Online (Sandbox Code Playgroud)

间距

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceAround
) {
    TextButtons...
  }
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

  • 我们还可以使用 ```horizo​​ntalArrangement = Arrangement.spacedBy(4.dp)``` 设置自定义间距 (6认同)