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

Question

问题描述

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

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

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

但是也没用。

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

结果：

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

How to change the shape of a Row's border in Jetpack Compose?

android

android-jetpack-compose

问题描述

我的尝试失败了