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

Question

问题描述

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

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

但是，我在 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)
}

我的尝试失败了

我尝试clip在调用后立即添加函数调用，border如下所示Modifier：

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

但它也不起作用。

Answer 1

我不明白为什么，但是当我在声明.padding后添加一个时Modifier.border，问题就解决了：

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

结果：