Question

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

我可以看到有Modifier用Modifier.padding(...)进行填充，但是我似乎找不到边距还是盲目？

请有人指导我。

非常感谢您。

Answer 1

您可以将padding和margin视为同一事物（将其想象为“ spacing”）。填充可以在相同的可组合物中应用两次（或更多次），并获得与margin + padding相似的行为。例如：

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

将得到以下结果：

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

Answer 2

从 padding 和 margin 的角度考虑，您指的是我们习惯的所谓的 box model。 Compose 中没有盒子模型，而是一系列应用于给定组合的修饰符。诀窍是您可以多次应用相同的修饰符，如 padding 或 border 以及 order of these matters，例如：

@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 中有很好的解释：

<块引用>

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

Answer 3

因此，根据我在阅读文档后的理解，没有边距修饰符，例如 API 设计人员认为给出一些本质上做相同事情的不同名称是多余的。

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

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

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

Answer 4

通过将带有填充的内容放入不同的可合成内容（例如Box）中并使其外部可合成clickable，可以实现与边距相同的效果。通过这种方法，内部填充区域将包含在可点击的内容中。

Answer 5

我也在寻找可以让我直接选择在像 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 填充。希望有用。

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

5 个答案: