问题描述
我想在 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
)