Как выровнять составные элементы Text и IconButton в сетке ⇐ Android

[Anonymous]

Используя Jetpack Compose на Android, я пытаюсь разместить большое количество IconButton в сетке с текстовыми заголовками в столбцах и строках. Я использую Modifier.weight. Как вы можете видеть из этого примера, компоненты Text и Switch выровнены, но IconButton кажется расположенным справа. Есть ли причина, по которой модификатор веса не работает с IconButton? Есть ли лучший способ сделать это?
Результат:


и вот мой код:
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)
)
}
}
}
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... -in-a-grid