是否可以在 Jetpack 中使行的边缘变圆？

Question

这就是我要实现的目标：

所以我连续创建了 2 个圆形按钮，并根据它们是否被选中提供了不同的背景颜色。目标是创造一种 tab/toggle.

的错觉

未选中的按钮将与行的背景颜色相同。不幸的是，由于一行是矩形，所以在角落处有一个残留物 space，仍然显示背景颜色。

这是我的按钮代码

val cornerRadius = 20.dp

var selectedIndex by remember { mutableStateOf(0)}

val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp

val items = listOf(

    OutlinedButton(onClick = { /*TODO*/ }) {

    },

    OutlinedButton(onClick = { /*TODO*/ }) {

})

Row(
    modifier = Modifier

        .padding(top = 8.dp)
        .wrapContentHeight()

        .width(screenWidth).background(color = Color.Gray).clip(shape = RoundedCornerShape(20.dp))
) {
  //  Spacer(modifier = Modifier.weight(1f))

        items.forEachIndexed { index, item ->

            OutlinedButton(modifier = Modifier
                .wrapContentHeight()
                .width(screenWidth/2),


                shape = when (index) {
                    // left outer button
                    0 -> (if (selectedIndex == index) {
                        RoundedCornerShape(
                            topStart = cornerRadius,
                            topEnd = cornerRadius,
                            bottomStart = cornerRadius,
                            bottomEnd = cornerRadius
                        )
                    } else {
                        RoundedCornerShape(
                            topStart = cornerRadius,
                            topEnd = cornerRadius,
                            bottomStart = cornerRadius,
                            bottomEnd = cornerRadius
                        )
                    })

                    //rightouterbutton

                    else -> (if (selectedIndex == index) {
                        RoundedCornerShape(
                            topStart = cornerRadius,
                            topEnd = cornerRadius,
                            bottomStart = cornerRadius,
                            bottomEnd = cornerRadius
                        )
                    }
                            else{RoundedCornerShape(
                        topStart = 0.dp,
                        topEnd = cornerRadius,
                        bottomStart = 0.dp,
                        bottomEnd = cornerRadius
                    )})
                },
                border = BorderStroke(
                    1.dp, if (selectedIndex == index) {
                      Color.Transparent
                    } else {
                        Color.Transparent
                    }
                ),
                colors = if (selectedIndex == index) {
                    // colors when selected
                    ButtonDefaults.outlinedButtonColors(
                        backgroundColor = Color.Yellow,
                        contentColor = Color.Black
                    )
                } else {
                    // colors when not selected
                    ButtonDefaults.outlinedButtonColors(
                        backgroundColor = Color.Gray,
                        contentColor = Color.Black
                    )
                },

                onClick = { selectedIndex = index },

                ) {
                if (index == 0) {

                    Text(
                        text = "In progress",
                        color = if (selectedIndex == index) {
                            Color.Black
                        } else {
                            Color.DarkGray.copy(alpha = 0.9f)
                        },
                        modifier = Modifier.padding(horizontal = 8.dp)
                    )
                } else {


                    Text(
                        text = "Completed",
                        color = if (selectedIndex == index) {
                            MaterialTheme.colors.primary
                        } else {
                            Color.DarkGray.copy(alpha = 0.9f)
                        },
                        modifier = Modifier.padding(horizontal = 8.dp)
                    )
                }
            }
        }
    }

Answer 1

Modifier.clip后应用的Modifier.background对你的情况没有影响，需要倒序。在

中详细了解为什么修饰符的顺序很重要

.clip(shape = RoundedCornerShape(20.dp))
.background(color = Color.Gray)

Modifier.background 的另一个选项是您可以将形状专门应用于背景颜色。请注意，此解决方案不会像 Modifier.clip 那样将其他视图内容剪裁成形状，但在您的情况下它适合。

.background(color = Color.Gray, shape = RoundedCornerShape(20.dp))

是否可以在 Jetpack 中使行的边缘变圆？

Is it possible to round the edges of a row in jetpack?

user-interface

row

button

android-jetpack-compose