Android Jetpack组件中的材料按钮组件

我想在Jetpack Compose中实现。此组件如下所示（图像取自）：

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

请注意，垂直蓝色边框旁边的垂直灰色边框存在。在原稿中，一次显示彩色边框或灰色。为了使其更清晰，请查看这张带有超厚边框的图像：

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

val拐角半径=8.dp
划船(
修饰语=修饰语
.fillMaxWidth（）
.填充（8.dp）
) {
垫片（修改器=修改器重量（1f））
items.forachined{索引，项->
大纲按钮(
onClick={indexChanged（index）}，
形状=何时（索引）{
//左外按钮
0->圆角拐角形状（上起点=拐角半径，上终点=0.dp，下起点=拐角半径，下终点=0.dp）
//右外按钮
items.size-1->RoundedCornerShape（上止点=0.dp，上止点=拐角半径，下止点=0.dp，下止点=拐角半径）
//中间按钮
else->RoundedCornerShape（上止点=0.dp，上止点=0.dp，下止点=0.dp，下止点=0.dp）
},
border=BorderStroke（1.dp，如果（selectedIndex==index）{MaterialTheme.colors.primary}否则{Color.DarkGray.copy（alpha=0.75f）}），
颜色=如果（selectedIndex==索引）{
//选定颜色
ButtonDefaults.OutlinedButtonColor（backgroundColor=MaterialTheme.Color.primary.copy（alpha=0.1f），contentColor=MaterialTheme.Color.primary）
}否则{
//未选择的颜色
ButtonDefacts.OutlinedButtonColor（背景色=MaterialTheme.Color.surface，内容色=MaterialTheme.Color.primary）
},
) {
正文(
text=“一些文本”，
color=if（selectedIndex==index）{MaterialTheme.colors.primary}其他{color.DarkGray.copy（alpha=0.9f）}，
修饰符=修饰符.填充（水平=8.dp）
)
}
}
垫片（修改器=修改器重量（1f））
}

在中，为了防止双宽度笔划，除了第一个子笔划将相邻笔划直接绘制在彼此的顶部之外，所有笔划上都有一个负边距

使用相同的解决方案：

   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
   )

---

非常好用，非常感谢！我甚至不知道有一个

zIndex

修饰符。