Jetpack Compose选项栏选中项下划线布局异常，如何修正代码？

问题根源 #

原代码中，选中状态的下划线Box被作为Row的直接子元素，与选项Box并列布局，导致Row将两者视为水平排列的独立元素，进而出现布局错乱，下划线无法正确显示在选项下方。

修改后的代码 #

@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<String>,
    selectedOption: String,
    onOptionSelected: (String) -> Unit
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        options.forEach { option ->
            // 将选项文本和下划线放在同一个Box内，确保下划线在选项下方
            Box(
                modifier = Modifier
                    .weight(1F)
                    .clickable { onOptionSelected(option) },
                contentAlignment = Alignment.Center
            ) {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    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)
                                .fillMaxWidth()
                                .background(Color.Blue)
                        )
                    }
                }
            }
        }
    }
}

关键修改点 #

• 将下划线Box移入每个选项的Box内部，通过Column垂直排列文本和下划线，保证两者的从属关系
• 下划线使用fillMaxWidth()使其宽度与选项一致
• 移除原代码中独立于选项Box的下划线布局，避免Row的水平布局逻辑干扰

内容的提问来源于stack exchange，提问作者nikhilbalwani