I have this code and I m getting this weird bug you can see in the video The bug goes away when I remove the three `Text`s for R G and B values Here is the code ```val colors = remember mutableStateListOf mutableStateListOf Color Magenta Color Blue Color Yellow val activeRowIndex = remember mutableStateOf 0 val activeColumnIndex = remember mutableStateOf 0 Sliders colors activeRowIndex value activeColumnIndex value onColorChange = colors activeRowIndex value activeColumnIndex value = it ``` ``` Composable fun Sliders color Color onColorChange Color gt Unit Column Row verticalAlignment = Alignment CenterVertically Text text = R $ color red 255 Slider value = color red onValueChange = onColorChange color copy red = it Row verticalAlignment = Alignment CenterVertically Text text = G $ color green 255 Slider value = color green onValueChange = onColorChange color copy green = it Row verticalAlignment = Alignment CenterVertically Text text = B $ color blue 255 Slider value = color blue onValueChange = onColorChange color copy blue = it ```

I have this code and I'm getting this weird bug you can see in the video. The bug goes away when I remove the three `Text`s for R, G and B values. Here is the code:

Copy code

val colors = remember {
    mutableStateListOf(
        mutableStateListOf(Color.Magenta, Color.Blue, Color.Yellow)
    )
}
val activeRowIndex = remember { mutableStateOf(0) }
val activeColumnIndex = remember { mutableStateOf(0) }

...

Sliders(
    colors[activeRowIndex.value][activeColumnIndex.value],
    onColorChange = { colors[activeRowIndex.value][activeColumnIndex.value] = it }
)

Copy code

@Composable
fun Sliders(color: Color, onColorChange: (Color) -> Unit) {
    Column {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Text(text = "R - ${color.red * 255}")
            Slider(
                value = color.red,
                onValueChange = { onColorChange(color.copy(red = it)) }
            )
        }
        Row(verticalAlignment = Alignment.CenterVertically) {
            Text(text = "G - ${color.green * 255}")
            Slider(
                value = color.green,
                onValueChange = { onColorChange(color.copy(green = it)) }
            )
        }
        Row(verticalAlignment = Alignment.CenterVertically) {
            Text(text = "B - ${color.blue * 255}")
            Slider(
                value = color.blue,
                onValueChange = { onColorChange(color.copy(blue = it)) }
            )
        }
    }
}

SlidersBug.mp4

tylerwilson

12/30/2020, 2:24 PM

You should be specific about which issue you are talking about. If you are talking about the slider changing size based on the Text values, that makes sense, since the way it is described it will fill the whole width. What you could do is set the Sliders and/or the Text to be a percentage of the full width with fillMaxWidth(0.75) or similar to keep them a constant width…

Se7eN

12/30/2020, 3:53 PM

No I mean the onColorChange gets invoked when I change activeRowIndex or activeColumnIndex resulting in the change in RGB value of the now selected color to the previous selected color. Well it's hard for me to explain but you can see what I mean in the video.

Thomas

12/30/2020, 4:05 PM

Is this the issue you are talking about? https://issuetracker.google.com/issues/175943373

Se7eN

12/30/2020, 4:12 PM

I don't think that's my issue but it might be related

3 Views