Почему в Jetpack Compose текст не центрируется при перекомпоновке? ⇐ Android

[Anonymous]

В моем приложении для Android я пытаюсь создать составной объект, отображающий данные в виде таблицы.
Я хочу, чтобы каждый столбец был настолько широким, насколько ему нужно (с максимальной шириной), поэтому для этого: Мне нужно отобразить все и изменить ширину каждой строки в соответствии с самой широкой строкой.
Пока у меня есть это, и это работает довольно хорошо:

Проблема возникает, когда строка шире, чем предыдущие строки меняют ширину на правильную, но выравнивание текста не работает (я добавил цвет фона к текстам, чтобы мы могли видеть, что они становятся шире):


Как видите, они выровнены по на предыдущей ширине, и я не понимаю почему.
Вот код:
@Composable
fun TableCell(
text: String,
style: TextStyle = MaterialTheme.typography.bodySmall,
width: Dp = 0.dp,
onWidthSet: (Dp) -> Unit = {},
maxColumnWidth: Dp = 100.dp
) {
val density = LocalDensity.current
fun Int.asDp() = density.run {
this@asDp.toDp()
}

Text(
text = text,
style = style,
modifier = Modifier
.padding(4.dp)
.widthIn(width, maxColumnWidth)
.onSizeChanged { onWidthSet(it.width.asDp()) }
.background(MaterialTheme.colorScheme.secondary),
textAlign = TextAlign.Center
)
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun DataTable(
headers: List,
rows: List = emptyList(),
maxColumnWidth: Dp = 90.dp
) {
Card(
shape = RoundedCornerShape(8.dp),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surface,
),
elevation = CardDefaults.cardElevation(
defaultElevation = 6.dp
)
) {
val columnWidths = remember { mutableStateMapOf() }
val onWidthSet: (Int, Dp) -> Unit = { index, width ->
if (!columnWidths.containsKey(index)) {
columnWidths[index] = width
}
else if (columnWidths[index]!! < width) {
columnWidths[index] = width
}
}
LazyColumn {
stickyHeader {
Row(
modifier = Modifier.background(MaterialTheme.colorScheme.primary)
) {
headers.forEachIndexed { index, title ->
TableCell(
text = title,
style = MaterialTheme.typography.titleSmall.copy(
color = MaterialTheme.colorScheme.onPrimary
),
width = columnWidths[index] ?: 0.dp,
onWidthSet = { width ->
onWidthSet(index, width)
},
maxColumnWidth = maxColumnWidth
)
}
}
}
items(rows.size) { index ->
val row = rows[index]
Row {
for (i in headers.indices) {
TableCell(
text = if (i < row.size) row else "",
width = columnWidths ?: 0.dp,
onWidthSet = { width ->
onWidthSet(i, width)
},
maxColumnWidth = maxColumnWidth
)
}
}
}
}
}
}

@Preview(
apiLevel = 33,
showBackground = true,
device = Devices.TABLET
)
@Composable
private fun DataTablePreview() {
DataTable(
headers = listOf("Header 1", "Header 2", "Header 3", "Header 4"),
rows = listOf(
listOf("Row 1", "Row 1", "Row 1", ""),
listOf("Row 2", "-- Wider Row 2 --", "", ""),
listOf("Row 3", "Row 3", "Row 3", "")
),
maxColumnWidth = 200.dp
)
}


Подробнее здесь: https://stackoverflow.com/questions/781 ... omposition