如何在 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)
            }
        }
    }
}