how to align Text and IconButton composables in a grid

2 weeks ago 14
ARTICLE AD BOX

Using Jetpack Compose on Android, I am trying to layout a lot of IconButton in a grid with Text headers on the columns and rows. I'm using Modifier.weight. As you can see from this example, Text and Switch components align but the IconButton seem to be over on the right side. Is there a reason the weight modifier is not working with IconButton? Is there a better way to do this?

Result:

misaligned buttons

and here is my code:

var x by mutableStateOf(false) @Composable fun SimpleCommandDialog() { Dialog(onDismissRequest = { } ) { Surface(color = Color.White, modifier = Modifier .fillMaxWidth(0.9f) // Sets width to 90% of screen width // or Modifier.width(300.dp) for a fixed 300dp width .padding(16.dp) // Adds padding around the surface ) { Box(contentAlignment = Alignment.Center) { val w1=.2f Column() { Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { Text(text = "node", Modifier.weight(w1), textAlign= TextAlign.Center) Text(text = "Auto", Modifier.weight(w1), textAlign= TextAlign.Center) Text(text = "Hold", Modifier.weight(w1), textAlign= TextAlign.Center) } Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { Text(text = "node", Modifier.weight(w1), textAlign= TextAlign.Center) IconButton(onClick = { x=!x }) { Icon( imageVector = Icons.Filled.Adjust, contentDescription = "menu", modifier = Modifier.weight(w1) ) } IconButton(onClick = { x=!x }) { Icon( imageVector = Icons.Filled.Adjust, contentDescription = "menu", modifier = Modifier.weight(w1) ) } } Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { Text(text = "node", Modifier.weight(w1), textAlign= TextAlign.Center) Switch( checked = x, onCheckedChange = { x=!x }, Modifier.weight(w1) ) Switch( checked = x, onCheckedChange = { x=!x }, Modifier.weight(w1) ) } } } } } }
Read Entire Article