如何在 Jetpack Compose 中添加边距？

Question

如何在 Jetpack Compose 中添加保证金？

我可以看到有一个 Modifier 用于填充 Modifier.padding(...) 但我似乎找不到一个用于边距的东西或者我是瞎子吗？

请高人指导。

非常感谢。

Answer 1

您可以将填充和边距视为同一事物（将其想象为“间距”）。可以在同一个可组合项中应用两次（或更多次）填充，并实现与使用边距+填充时类似的行为。例如：

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)
)

结果如下：

如您所见，第一个 padding 是在组件及其边框之间添加一个 space。然后定义背景和边框。最后，设置一个新的padding，在边框和文字之间添加space。

Answer 2

您可以通过将具有填充的内容放在 Box 等不同的可组合项中并使外部可组合项 clickable 实现与边距相同的效果。通过这种方法，内部填充区域将包含在可点击内容中。

Answer 3

考虑padding和margin你指的是所谓的box model that we are used to. There's no a box model in Compose but a sequence of modifiers which is applied to a given composable. The trick is that you can apply the same modifier like padding or border multiple times and the ，例如：

@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
    )
}

作为结果，您将获得此可组合项：

这个设计在Modifiers documentation中有很好的解释：

Note: The explicit order helps you to reason about how different modifiers will interact. Compare this to the view-based system where you had to learn the box model, that margins applied "outside" the element but padding "inside" it, and a background element would be sized accordingly. The modifier design makes this kind of behavior explicit and predictable, and gives you more control to achieve the exact behavior you want.

Answer 4

我也在寻找一些东西，它应该给我一个直接选项来设置像 TextView 这样的视图的边距。但不幸的是，我们在 Jetpack Compose 中没有边距支持。但好消息是我们仍然可以通过使用像 Box 这样的布局容器来实现它，它允许我们添加像 TextView、ImageView 等视图。因此，您可以通过对父级（Box）使用填充修饰符来为任何子级（TextView）添加边距。这是代码：

Box(Modifier.padding(10.dp)) {
    Surface(color = Color.LightGray) {
        Text(text = "Hello $text!", color = Color.Blue,
            modifier = Modifier.padding(16.dp))
    }
}

结果是：

这里我给方框添加了 10.dp 填充。希望有用。

Answer 5

所以据我阅读文档后的理解，没有边距修饰符，例如 API 设计师认为给一些本质上做同样事情的不同名称是多余的。

假设您想在用黄色背景为容器上色之前应用 8dp 的边距，并且您希望容器的内容填充为 4dp。

Column(modifier = Modifier.padding(all = 8.dp)
                          .background(color = Color.Yellow)
                          .padding(all=4.dp)) {
        Text(text = "Android")
        ...
    }

在上面的示例中，您可以看到我首先应用了填充，然后为容器添加了背景色，最后添加了最后一个填充。这就是它的样子。就像我们打算的那样。

Answer 6

margin 不同于 padding，margin 是 widget 外部的 space，padding 是 widget 内部的距离，在旧的 XML 你可以明确地决定使用哪个，但是新的撰写方式不同。

compose 如何处理填充和边距？

有一个对象可以设置为名为 Modifier 的可组合项的参数，您可以使用它来执行边距和填充。

填充示例：

    Text(
    text = "Test",
    modifier = Modifier
        .padding(16.dp)
        .clickable { }
)

保证金示例

    Text(
    text = "Test",
    modifier = Modifier
        .clickable { }
        .padding(16.dp)
)

正如您所见，这里的顺序在 compose 中有所不同，所有修饰符都是按顺序实现的。

Answer 7

你也可以使用Spacer:

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

它表示一个空的 space 布局，其大小可以使用 Modifier.width、Modifier.height 和 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)

如何在 Jetpack Compose 中添加边距？

How to add Margin in Jetpack Compose?

android

android-jetpack-compose