英文:
Vertical Divider between Two Columns in Jetpack Compose
问题
无法似乎在这种情况下使这个垂直分隔符工作：
<-- begin snippet: js hide: false console: true babel: false -->
<-- language: lang-js -->
Row(
modifier = modifier
.fillMaxWidth()
.background(Color.Blue),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Column (
modifier = modifier
.fillMaxWidth()
.weight(1F),
) {
Text(
modifier = modifier
.padding(5.dp),
style = MaterialTheme.typography.bodySmall,
text = "Testing one two three doo doo doo dood odoodo do dood od o doodood o dood oodo do od odoodo doo od odo od odoodo",
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Left
)
}
Box( //Vertical divider
modifier
.fillMaxHeight()
.width(5.dp)
.background(color = Color.Yellow)
)
Column (
modifier = modifier
.fillMaxWidth()
.weight(1F)
) {
Text(
modifier = modifier
.padding(5.dp),
style = MaterialTheme.typography.bodySmall,
text = "Testing one two three",
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Left
)
}
}
<-- end snippet -->
我尝试了以下内容：
<-- begin snippet: js hide: false console: true babel: false -->
<-- language: lang-js -->
Divider(
color = Color.Black,
modifier = Modifier
.height(IntrinsicSize.Max)
)
<-- end snippet -->
但当两边的文本增大时，它仍然不会填充父行的高度：
英文:
I can't seem to make this vertical divider work in this case:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
Row(
modifier = modifier
.fillMaxWidth()
.background(Color.Blue),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Column (
modifier = modifier
.fillMaxWidth()
.weight(1F),
) {
Text(
modifier = modifier
.padding(5.dp),
style = MaterialTheme.typography.bodySmall,
text = "Testing one two three doo doo doo dood odoodo do dood od o doodood o dood oodo do od odoodo doo od odo od odoodo",
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Left
)
}
Box( //Vertical divider
modifier
.fillMaxHeight()
.width(5.dp)
.background(color = Color.Yellow)
)
Column (
modifier = modifier
.fillMaxWidth()
.weight(1F)
) {
Text(
modifier = modifier
.padding(5.dp),
style = MaterialTheme.typography.bodySmall,
text = "Testing one two three",
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Left
)
}
}
<!-- end snippet -->
I have tried the following:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
Divider(
color = Color.Black,
modifier = Modifier
.height(IntrinsicSize.Max)
)
<!-- end snippet -->
But it still doesn't fill the height of the parent row when the text either side increases its size:
答案1
得分: 2
在 `Row` 上使用 `.height(IntrinsicSize.Min)`，并像这样定义 `Divider`，
Divider(
color = Color.Yellow,
modifier = Modifier
.fillMaxHeight()
.width(5.dp)
)
或者像这样在 `Box` 上，
Box(
modifier = Modifier
.background(Color.Yellow)
.fillMaxHeight()
.width(5.dp)
)
`Divider` 就是一个带有参数的 `Box`，可以轻松地将其用于垂直分隔线，因为它是一个常见的UI组件。
**完整代码**
Row(
modifier = Modifier
.fillMaxWidth()
.background(Color.Blue)
.height(IntrinsicSize.Min),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Column(
modifier = Modifier
.fillMaxWidth()
.weight(1F),
) {
Text(
modifier = Modifier
.padding(5.dp),
style = MaterialTheme.typography.bodySmall,
text = "Testing one two three doo doo doo dood odoodo do dood od o doodood o dood oodo do od odoodo doo od odo od odoodo",
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Left
)
}
Divider(
color = Color.Yellow,
modifier = Modifier
.fillMaxHeight()
.width(5.dp)
)
Column(
modifier = Modifier
.fillMaxWidth()
.weight(1F)
) {
Text(
modifier = Modifier
.padding(5.dp),
style = MaterialTheme.typography.bodySmall,
text = "Testing one two three",
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Left
)
}
}
**截图**
[![enter image description here][1]][1]
[Android 文档参考](https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements)
[1]: https://i.stack.imgur.com/LpZhG.png
英文:
Use .height(IntrinsicSize.Min) on the Row and define Divider like this,
Divider(
color = Color.Yellow,
modifier = Modifier
.fillMaxHeight()
.width(5.dp)
)
or Box like this,
Box(
modifier = Modifier
.background(Color.Yellow)
.fillMaxHeight()
.width(5.dp)
)
A Divider is a just Box with parameters to use it easily for Vertical divider use cases as it is a common UI component.
Complete Code
Row(
modifier = Modifier
.fillMaxWidth()
.background(Color.Blue)
.height(IntrinsicSize.Min),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Column(
modifier = Modifier
.fillMaxWidth()
.weight(1F),
) {
Text(
modifier = Modifier
.padding(5.dp),
style = MaterialTheme.typography.bodySmall,
text = "Testing one two three doo doo doo dood odoodo do dood od o doodood o dood oodo do od odoodo doo od odo od odoodo",
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Left
)
}
Divider(
color = Color.Yellow,
modifier = Modifier
.fillMaxHeight()
.width(5.dp)
)
Column(
modifier = Modifier
.fillMaxWidth()
.weight(1F)
) {
Text(
modifier = Modifier
.padding(5.dp),
style = MaterialTheme.typography.bodySmall,
text = "Testing one two three",
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Left
)
}
}
Screenshot
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论