如何在Jetpack Compose中更改行边框的形状？

Question

问题描述

如何在 Jetpack Compose 中更改 Row 边框的形状？

我正在创建一个自定义按钮，在 Jetpack Compose 中，我使用 Row 来水平对齐内容。我需要此自定义按钮具有以下格式：

然而，我的 Jetpack Compose 代码呈现出以下元素，没有圆角：

下面是此 Compose 函数的代码：

@Composable
fun LargeQuantityButton(
    modifier: Modifier = Modifier,
    onPlusClick: () -> Unit,
    onMinusClick: () -> Unit,
    text: String,
) = Row(
    modifier = modifier
        .border(
            border = ButtonDefaults.outlinedBorder,
            shape = RoundedCornerShape(4.dp)
        ),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    RemoveIcon(action = onMinusClick)
    Text(
        text = text,
        fontWeight = FontWeight.W400
    )
    AddIcon(action = onPlusClick)
}

我的尝试失败了

我试着在Modifier的border调用之后立即添加clip函数调用，像这样：

@Composable
fun LargeQuantityButton(
    modifier: Modifier = Modifier,
    onPlusClick: () -> Unit,
    onMinusClick: () -> Unit,
    text: String,
) = Row(
    modifier = modifier
        .border(border = ButtonDefaults.outlinedBorder)
        .clip(shape = RoundedCornerShape(4.dp)),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    RemoveIcon(action = onMinusClick)
    Text(
        text = text,
        fontWeight = FontWeight.W400
    )
    AddIcon(action = onPlusClick)
}

但是它也没有起作用。

- Pierre Vieira

---

你的截图看起来像是第二个代码块的结果，它无法正常工作的原因可以在这个答案中找到。但对我来说，第一个代码块正确地圆角了边框。 - Phil Dukhov

Answer 1

我不太清楚原因，但是当我在 Modifier.border 语句后添加了 .padding 后，问题得到了解决：

@Composable
fun LargeQuantityButton(
    modifier: Modifier = Modifier,
    onPlusClick: () -> Unit,
    onMinusClick: () -> Unit,
    text: String,
) = Row(
    modifier = modifier
        .border(
            border = ButtonDefaults.outlinedBorder,
            shape = RoundedCornerShape(4.dp)
        )
        .padding(PaddingValues(horizontal = 8.dp)),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    RemoveIcon(action = onMinusClick)
    Text(
        text = text,
        fontWeight = FontWeight.W500
    )
    AddIcon(action = onPlusClick)
}

结果：

- Pierre Vieira