是否可以将喷气背包中的一排边缘倒圆？

Question

这就是我想要实现的目标：

因此，我连续创建了 2 个圆形按钮，并根据是否选择它们提供了不同的背景颜色。目标是创建一种选项卡/切换的错觉。

未选中的按钮将具有与该行的背景颜色相同的颜色。不幸的是，由于行是矩形形状，因此角落处有残留空间，但仍然显示背景颜色。

这是我的按钮代码

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

Answer 2

Modifier.background 比使用 Modifier.clip 方法更有效。