如何在 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)
        .drawBorder(2.dp, MaterialTheme.colors.secondary, shape)
        .drawBackground(MaterialTheme.colors.primary, shape)
        .padding(16.dp)
)

将导致：

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

Answer 2

关于填充和边距的思考，您指的是我们习惯的所谓的框 model 。 Compose 中没有框 model 而是一系列应用于给定可组合项的修饰符。 诀窍是您可以多次应用相同的修饰符（如填充或边框）以及这些事项的顺序，例如：

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

结果你会得到这个可组合的：

这个设计在 修改器文档中有很好的解释：

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

Answer 3

您还可以使用Spacer ：

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

它表示一个空白空间布局，其大小可以使用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)

Answer 4

边距与填充不同，边距是小部件外部的空间，其中填充是小部件内部的距离，在旧的 XML 中，您可以明确决定使用哪一个，但是新的组合方式不同。

如何撰写处理填充和边距？

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

填充示例：

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

保证金示例

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

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

Answer 5

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

Answer 6

我也在寻找可以让我直接选择在 TextView 之类的视图上设置边距的东西。 但不幸的是，我们在 Jetpack compose 中没有边距支持。 但好消息是我们仍然可以通过使用像 Box 这样的布局容器来实现它，这允许我们添加像 TextView、ImageView 等这样的视图。所以你可以通过使用 padding 修饰符给父级添加边距（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 7

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

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

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

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

Answer 8

您可以通过使用带填充的嵌套Surface元素来实现边距效果，例如

@Composable
fun MainScreen() {
    Surface(color=Color.Yellow, modifier=Modifier.padding(10.dp)){
        Surface(color=Color.Magenta, modifier=Modifier.padding(30.dp)) {
            Surface(
               color = Color.Green, 
               modifier = Modifier.padding(10.dp).wrapContentSize()) {
               Text(text = "My Dummy Text", color = Color.Black)
            }
        }
    }
}