Jetpack Compose 中的 MaterialButtonToggleGroup

如何解决Jetpack Compose 中的 MaterialButtonToggleGroup

我想在 Jetpack Compose 中实现 MaterialButtonToggleGroup。该组件如下所示（图片取自 here）：

到目前为止，我得到了以下结果：

请注意，存在垂直蓝色边框旁边的垂直灰色边框。在原件中，一次出现彩色边框或灰色。为了让它更清楚，看看这张带有额外粗边框的图片：

如何实现两个按钮之间的垂直边框不存在？我当前的代码如下所示：

    val cornerRadius = 8.dp

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
    ) {
        Spacer(modifier = Modifier.weight(1f))

        items.forEachIndexed { index,item ->
            OutlinedButton(
                onClick = { indexChanged(index) },shape = when (index) {
                    // left outer button
                    0 -> RoundedCornerShape(topStart = cornerRadius,topEnd = 0.dp,bottomStart = cornerRadius,bottomEnd = 0.dp)
                    // right outer button
                    items.size - 1 -> RoundedCornerShape(topStart = 0.dp,topEnd = cornerRadius,bottomStart = 0.dp,bottomEnd = cornerRadius)
                    // middle button
                    else -> RoundedCornerShape(topStart = 0.dp,bottomEnd = 0.dp)
                },border = Borderstroke(1.dp,if(selectedindex == index) { MaterialTheme.colors.primary } else { Color.DarkGray.copy(alpha = 0.75f)}),colors = if(selectedindex == index) {
                    // selected colors
                    ButtonDefaults.outlinedButtonColors(backgroundColor = MaterialTheme.colors.primary.copy(alpha = 0.1f),contentColor = MaterialTheme.colors.primary)
                } else {
                    // not selected colors
                    ButtonDefaults.outlinedButtonColors(backgroundColor = MaterialTheme.colors.surface,contentColor = MaterialTheme.colors.primary)
                },) {
                Text(
                    text = "Some text",color = if(selectedindex == index) { MaterialTheme.colors.primary } else { Color.DarkGray.copy(alpha = 0.9f) },modifier = Modifier.padding(horizontal = 8.dp)
                )
            }
        }

        Spacer(modifier = Modifier.weight(1f))
    }

解决方法

在 MaterialButtonToggleGroup 中，为了防止双宽笔画，除了第一个将相邻笔画直接重叠在一起之外，所有笔画都有一个负边距开始。

使用相同的解决方案：

   OutlinedButton(
                modifier = when (index){
                    0 -> {
                        if (selectedIndex == index) {
                            Modifier.offset(0.dp,0.dp).zIndex(1f)
                        } else {
                            Modifier.offset(0.dp,0.dp).zIndex(0f)
                        }
                    }
                    else -> {
                        val offset = -1 * index
                        if (selectedIndex == index) {
                            Modifier.offset(offset.dp,0.dp).zIndex(1f)
                        } else {
                            Modifier.offset(offset.dp,0.dp).zIndex(0f)
                        }
                    }
                },//.. your code
   )