MaterialButtonToggleGroup в Jetpack Compose

Я хочу реализовать MaterialButtonToggleGroup в Jetpack Compose. Этот компонент выглядит следующим образом (изображение взято из здесь):

Пока что я получил следующий результат:

Обратите внимание, что вертикальная серая граница рядом с вертикальной синей рамкой присутствует. В оригинале одновременно присутствует либо цветная рамка, либо серый цвет. Чтобы было понятнее, взгляните на это изображение с очень толстыми границами:

Как я могу добиться, чтобы вертикальные границы между двумя кнопками отсутствовали? Мой текущий код выглядит так:

    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, topEnd = 0.dp, bottomStart = 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))
    }

person LN-12    schedule 09.04.2021    source источник


Ответы (1)


В _ 1_ для предотвращения обводки двойной ширины существует отрицательный marginStart для всех, кроме первого дочернего элемента, рисующего соседние штрихи непосредственно друг над другом.

Используя то же решение:

   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
   )

введите описание изображения здесь  введите описание изображения здесь

person Gabriele Mariotti    schedule 10.04.2021
comment
Работает абсолютно нормально, большое спасибо! Я даже не знал, что есть модификатор zIndex. - person LN-12; 12.04.2021