如何在Jetpack Compose中添加边距？

Question

如何在< code>Jetpack Compose中添加边距？

我看到有一个< code >修饰符用于填充< code >修饰符。padding(...)但是我好像找不到一个作边距还是我瞎了？

有人指导我吗？

非常感谢。

Answer 1

您也可以使用垫片:

Spacer(modifier = Modifier.width(10.dp))

它表示空白空间布局，其大小可以使用< code>Modifier.width 、< code>Modifier.height和< code>Modifier.size修饰符来定义。

假设你想在2个可组合物之间添加边距，那么你可以把它实现为

Text(
    text = stringResource(id = R.string.share_your_posters),
    fontSize = 16.sp,
    color = Color.Black
)

Spacer(modifier = Modifier.width(10.dp))

Image(painter = painterResource(id = R.drawable.ic_starts), contentDescription = null)

Answer 2

从填充和边距的角度考虑，您指的是我们习惯的所谓框模型。Comuse中没有框模型，而是应用于给定组合的一系列修饰符。诀窍是您可以多次应用相同的修饰符，如填充或边界以及这些事项的顺序，例如：

kotlin prettyprint-override">@Composable
fun PaddingExample() {
    Text(
        text = "Hello World!",
        color = Color.White,
        modifier = Modifier
            .padding(8.dp) // margin
            .border(2.dp, Color.White) // outer border
            .padding(8.dp) // space between the borders
            .border(2.dp, Color.Green) // inner border
            .padding(8.dp) // padding
    )
}

结果，您将得到这个可组合的:

此设计在修饰符留档中有很好的解释：

注意：显式顺序有助于您推断不同修饰符的交互方式。将其与基于视图的系统进行比较，在该系统中，您必须学习长方体模型，边距应用于元素的“外部”，但填充在元素的“内部”，并且背景元素的大小将相应调整。修改器设计使此类行为明确且可预测，并为您提供更多控制以实现所需的准确行为。

Answer 3

你可以把填充和边距看成一个东西(想象成“间距”)。填充可以在同一个composable中应用两次(或更多次),并实现与边距填充类似的行为。例如:

val shape = CircleShape
Text(
    text = "Text 1",
    style = TextStyle(
        color = Color.White,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center),
    modifier = Modifier.fillMaxWidth()
        .padding(16.dp)
        .border(2.dp, MaterialTheme.colors.secondary, shape)
        .background(MaterialTheme.colors.primary, shape)
        .padding(16.dp)
)

将导致：

如您所见，第一个填充是在组件与其边框之间添加一个空格。然后定义背景和边框。最后，设置一个新的填充以在边框和文本之间添加空间。