如何在 Row 中显示垂直分隔线？

Question

我想添加一条垂直线来分隔我的 2 个按钮，但是当我这样做时，这条线一直到屏幕底部，我丢失了数据内容。但我希望该行紧跟在按钮帽之后（它们不是真正的按钮，它们是文本框）。

如何使垂直线到达我用红线标记的位置？

Scaffold(
        topBar = {
            TopAppBar( /* Config*/ )
        },

        content = {
            Box(modifier = Modifier.fillMaxSize()) {

                Column {

                    OptionButtons()
                    Divider()
                    Data( /* Component with a list with data */ )
                }
            }
        }
    )

@Composable
fun OptionButtons() {

    Row {

        Text(
            text = "Option1",
            color = OptionButtonText,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .weight(0.50f)
                .padding(
                    PaddingValues(
                        start = 20.dp,
                        top = 12.dp,
                        end = 20.dp,
                        bottom = 12.dp
                    )
                )
                .clickable { }
        )

        Divide()

        Text(
            text = "Option2",
            color = OptionButtonText,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .weight(0.50f)
                .padding(
                    PaddingValues(
                        start = 20.dp,
                        top = 12.dp,
                        end = 20.dp,
                        bottom = 12.dp
                    )
                )
                .clickable { }
        )
    }

}

Answer 1

只需在Row 中添加此modifier = Modifier.height(IntrinsicSize.Min) 即可获得Row 的最小空间：

@Composable
fun OptionButtons() {

    Row(
        modifier = Modifier
            .height(IntrinsicSize.Min),
        horizontalArrangement = Arrangement.SpaceAround
    ) {

        Text(
            text = "Option1",
            color = Color.Red,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .weight(0.50f)
                .padding(
                    PaddingValues(
                        start = 20.dp,
                        top = 12.dp,
                        end = 20.dp,
                        bottom = 12.dp
                    )
                )
                .clickable { }
        )
        Divider(
            modifier = Modifier
                .width(1.dp)
                .fillMaxHeight()
        )
        Text(
            text = "Option2",
            color = Color.Red,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .weight(0.50f)
                .padding(
                    PaddingValues(
                        start = 20.dp,
                        top = 12.dp,
                        end = 20.dp,
                        bottom = 12.dp
                    )
                )
                .clickable { }
        )
    }

}

Answer 2

您的文本分隔符和文本位于 Row{ } 块中。

你需要做的是像这样构造它

Column{
Row{
Text()
Divider()
Text()
}
Divider()
Row{
Text()
Divider()
Text()
}

}

@Composable
fun OptionButtons() {
    Column {
        Row {
            Text(
                text = "Option1",
                color = OptionButtonText,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .weight(0.50f)
                    .padding(
                        PaddingValues(
                            start = 20.dp,
                            top = 12.dp,
                            end = 20.dp,
                            bottom = 12.dp
                        )
                    )
                    .clickable { },
            )
            Divider(
                modifier = Modifier
                    .fillMaxHeight()
                    .width(1.dp)
            )
            Text(
                text = "Option2",
                color = OptionButtonText,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .weight(0.50f)
                    .padding(
                        PaddingValues(
                            start = 20.dp,
                            top = 12.dp,
                            end = 20.dp,
                            bottom = 12.dp
                        )
                    )
                    .clickable { },
            )
        }

        Divider(color = Color.Red, thickness = 1.dp)
        
        Row {
            Text(
                text = ""//whatever value you want to populate with 
                        textAlign = TextAlign . Center,
                modifier = Modifier
                    .weight(0.50f)
                    .padding(
                        PaddingValues(
                            start = 20.dp,
                            top = 12.dp,
                            end = 20.dp,
                            bottom = 12.dp
                        )
                    )

            )
            Divider(
                modifier = Modifier
                    .fillMaxHeight()
                    .width(1.dp)
            )

            Text(
                text = ""//whatever value you want to populate with 
                        textAlign = TextAlign . Center,
                modifier = Modifier
                    .weight(0.50f)
                    .padding(
                        PaddingValues(
                            start = 20.dp,
                            top = 12.dp,
                            end = 20.dp,
                            bottom = 12.dp
                        )
                    )

            )
        }


    }


}

}