将两个框垂直对齐一列

Question

我正在尝试在 Jetpack Compose 中设计这样的 UI：

每当选择一个选项时，它应该在 UI 中带有下划线，如上所示。然而，当我尝试在 Jetpack compose 中安排它时，我得到了一个非常奇怪的行为：

这是我尝试过的：

@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 ->
            // 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
                }
            }

        }

        }
    }

我应该在代码中更改什么？

Answer 1

你可以尝试这样的事情：

Row(
    modifier = Modifier
        .fillMaxWidth()
        .horizontalScroll(rememberScrollState()),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    options.forEach { option ->
        // Create individual option views here
        Box(
            modifier = Modifier
                .height(40.dp)
                .padding(horizontal = 16.dp)
                .width(IntrinsicSize.Max)
                .clickable {
                    onOptionSelected(option)
                }
        ) {
            Text(
                modifier = Modifier
                    .align(Alignment.Center)
                    .fillMaxWidth(),
                text = option,
                fontWeight = if (option == selectedOption) FontWeight.Bold else FontWeight.Light
            )
            androidx.compose.animation.AnimatedVisibility(
                visible = option == selectedOption,
                modifier = Modifier
                    .align(Alignment.BottomCenter)
            ) {
                Surface(
                    modifier = Modifier
                        .height(3.dp)
                        .fillMaxWidth(),
                    shape = RoundedCornerShape(3.dp),
                    color = Color.Blue
                ) {}
            }
        }


    }

}

此外，您还可以查看材料选项卡。