我想添加一條垂直線來分隔我的 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 { }
)
}
}
uj5u.com熱心網友回復：
只需添加這modifier = Modifier.height(IntrinsicSize.Min) 在Row以獲取最小空間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 { }
)
}
}
uj5u.com熱心網友回復：
您在 Row{} 塊中有文本分隔符和文本。
你需要做的是像這樣構造它
Column{
Row{
Text()
Divider()
Text()
}
Divider()
Row{
Text()
Divider()
Text()
}
}
@Composable
fun OptionButtons() {
Coloumn {
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
)
)
)
}
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/401989.html
標籤：安卓 科特林 android-jetpack-compose