Выровнять два поля вертикально в столбце ⇐ Android

[Anonymous]

Я пытаюсь создать подобный пользовательский интерфейс в Jetpack Compose:


Каждый раз, когда опция выбрана, она должна подчеркиваться в пользовательском интерфейсе, как показано выше. Однако, когда я пытаюсь упорядочить его в Jetpack Compose, я получаю очень странное поведение:
[img]https://i.sstatic. net/2nn95.png[/img]

Вот что я пробовал:

Код: Выделить всё

@Composable
fun PaymentsScreen(navController: NavController) {
var textState by remember { mutableStateOf("EA DUMPLING CARDS") }

TitleOptionBar(
options = listOf("EA DUMPLING CARDS", "OTHER PAYMENTS"),
selectedOption = textState,
onOptionSelected = {newOption -> textState = newOption}
)

}

@Composable
fun TitleOptionBar(
options: List,
selectedOption: String,
onOptionSelected: (String) -> Unit
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
options.forEach { option ->
// Create individual option views here
Box(
modifier = Modifier.weight(weight = 1F).clickable { onOptionSelected(option) },
contentAlignment = Alignment.Center
) {
Text(
text = option,
modifier = Modifier.padding(16.dp),
fontWeight = if (option == selectedOption) FontWeight.Bold else FontWeight.Light
)
}

if (option == selectedOption) {
Box(
modifier = Modifier
.height(5.dp)
.background(Color.Blue)
.weight(weight = 1F)
) {
// This line will appear under the selected box
}
}

}

}
}

Что мне следует изменить в коде?

Подробнее здесь: https://stackoverflow.com/questions/774 ... n-a-column