How to change the shape of a Row
border in Jetpack Compose?
I'm creating a custom button in jetpack compose and for that I'm using a Row
to align the content horizontally. I need this custom button to have the following format:
However my code in compose renders the following element, without the rounded edges:
The code for this compose function is below:
@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)
}
I tried adding the clip
function call right after the border
call of the Modifier
like this:
@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)
}
But it didn't work either.
I didn't understand exactly why but when I added a .padding
after the Modifier.border
statement the problem was solved:
@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)
}
Result:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.