Jetpack Compose中两列之间的垂直分隔线

huangapple go评论94阅读模式
英文:

Vertical Divider between Two Columns in Jetpack Compose

问题

无法似乎在这种情况下使这个垂直分隔符工作:

  1. <-- begin snippet: js hide: false console: true babel: false -->
  2. <-- language: lang-js -->
  1. Row(
  2. modifier = modifier
  3. .fillMaxWidth()
  4. .background(Color.Blue),
  5. horizontalArrangement = Arrangement.SpaceEvenly
  6. ) {
  7. Column (
  8. modifier = modifier
  9. .fillMaxWidth()
  10. .weight(1F),
  11. ) {
  12. Text(
  13. modifier = modifier
  14. .padding(5.dp),
  15. style = MaterialTheme.typography.bodySmall,
  16. text = &quot;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&quot;,
  17. overflow = TextOverflow.Ellipsis,
  18. textAlign = TextAlign.Left
  19. )
  20. }
  21. Box( //Vertical divider
  22. modifier
  23. .fillMaxHeight()
  24. .width(5.dp)
  25. .background(color = Color.Yellow)
  26. )
  27. Column (
  28. modifier = modifier
  29. .fillMaxWidth()
  30. .weight(1F)
  31. ) {
  32. Text(
  33. modifier = modifier
  34. .padding(5.dp),
  35. style = MaterialTheme.typography.bodySmall,
  36. text = &quot;Testing one two three&quot;,
  37. overflow = TextOverflow.Ellipsis,
  38. textAlign = TextAlign.Left
  39. )
  40. }
  41. }
  42. <-- end snippet -->

我尝试了以下内容:

  1. <-- begin snippet: js hide: false console: true babel: false -->
  2. <-- language: lang-js -->
  1. Divider(
  2. color = Color.Black,
  3. modifier = Modifier
  4. .height(IntrinsicSize.Max)
  5. )
  6. <-- end snippet -->

但当两边的文本增大时,它仍然不会填充父行的高度:

Jetpack Compose中两列之间的垂直分隔线

英文:

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 -->

  1. Row(
  2. modifier = modifier
  3. .fillMaxWidth()
  4. .background(Color.Blue),
  5. horizontalArrangement = Arrangement.SpaceEvenly
  6. ) {
  7. Column (
  8. modifier = modifier
  9. .fillMaxWidth()
  10. .weight(1F),
  11. ) {
  12. Text(
  13. modifier = modifier
  14. .padding(5.dp),
  15. style = MaterialTheme.typography.bodySmall,
  16. text = &quot;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&quot;,
  17. overflow = TextOverflow.Ellipsis,
  18. textAlign = TextAlign.Left
  19. )
  20. }
  21. Box( //Vertical divider
  22. modifier
  23. .fillMaxHeight()
  24. .width(5.dp)
  25. .background(color = Color.Yellow)
  26. )
  27. Column (
  28. modifier = modifier
  29. .fillMaxWidth()
  30. .weight(1F)
  31. ) {
  32. Text(
  33. modifier = modifier
  34. .padding(5.dp),
  35. style = MaterialTheme.typography.bodySmall,
  36. text = &quot;Testing one two three&quot;,
  37. overflow = TextOverflow.Ellipsis,
  38. textAlign = TextAlign.Left
  39. )
  40. }
  41. }

<!-- end snippet -->

I have tried the following:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. Divider(
  2. color = Color.Black,
  3. modifier = Modifier
  4. .height(IntrinsicSize.Max)
  5. )

<!-- end snippet -->

But it still doesn't fill the height of the parent row when the text either side increases its size:

Jetpack Compose中两列之间的垂直分隔线

答案1

得分: 2

  1. `Row` 上使用 `.height(IntrinsicSize.Min)`并像这样定义 `Divider`
  2. Divider(
  3. color = Color.Yellow,
  4. modifier = Modifier
  5. .fillMaxHeight()
  6. .width(5.dp)
  7. )
  8. 或者像这样在 `Box`
  9. Box(
  10. modifier = Modifier
  11. .background(Color.Yellow)
  12. .fillMaxHeight()
  13. .width(5.dp)
  14. )
  15. `Divider` 就是一个带有参数的 `Box`可以轻松地将其用于垂直分隔线因为它是一个常见的UI组件
  16. **完整代码**
  17. Row(
  18. modifier = Modifier
  19. .fillMaxWidth()
  20. .background(Color.Blue)
  21. .height(IntrinsicSize.Min),
  22. horizontalArrangement = Arrangement.SpaceEvenly
  23. ) {
  24. Column(
  25. modifier = Modifier
  26. .fillMaxWidth()
  27. .weight(1F),
  28. ) {
  29. Text(
  30. modifier = Modifier
  31. .padding(5.dp),
  32. style = MaterialTheme.typography.bodySmall,
  33. text = &quot;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&quot;,
  34. overflow = TextOverflow.Ellipsis,
  35. textAlign = TextAlign.Left
  36. )
  37. }
  38. Divider(
  39. color = Color.Yellow,
  40. modifier = Modifier
  41. .fillMaxHeight()
  42. .width(5.dp)
  43. )
  44. Column(
  45. modifier = Modifier
  46. .fillMaxWidth()
  47. .weight(1F)
  48. ) {
  49. Text(
  50. modifier = Modifier
  51. .padding(5.dp),
  52. style = MaterialTheme.typography.bodySmall,
  53. text = &quot;Testing one two three&quot;,
  54. overflow = TextOverflow.Ellipsis,
  55. textAlign = TextAlign.Left
  56. )
  57. }
  58. }
  59. **截图**
  60. [![enter image description here][1]][1]
  61. [Android 文档参考](https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements)
  62. [1]: https://i.stack.imgur.com/LpZhG.png
英文:

Use .height(IntrinsicSize.Min) on the Row and define Divider like this,

  1. Divider(
  2. color = Color.Yellow,
  3. modifier = Modifier
  4. .fillMaxHeight()
  5. .width(5.dp)
  6. )

or Box like this,

  1. Box(
  2. modifier = Modifier
  3. .background(Color.Yellow)
  4. .fillMaxHeight()
  5. .width(5.dp)
  6. )

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

  1. Row(
  2. modifier = Modifier
  3. .fillMaxWidth()
  4. .background(Color.Blue)
  5. .height(IntrinsicSize.Min),
  6. horizontalArrangement = Arrangement.SpaceEvenly
  7. ) {
  8. Column(
  9. modifier = Modifier
  10. .fillMaxWidth()
  11. .weight(1F),
  12. ) {
  13. Text(
  14. modifier = Modifier
  15. .padding(5.dp),
  16. style = MaterialTheme.typography.bodySmall,
  17. text = &quot;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&quot;,
  18. overflow = TextOverflow.Ellipsis,
  19. textAlign = TextAlign.Left
  20. )
  21. }
  22. Divider(
  23. color = Color.Yellow,
  24. modifier = Modifier
  25. .fillMaxHeight()
  26. .width(5.dp)
  27. )
  28. Column(
  29. modifier = Modifier
  30. .fillMaxWidth()
  31. .weight(1F)
  32. ) {
  33. Text(
  34. modifier = Modifier
  35. .padding(5.dp),
  36. style = MaterialTheme.typography.bodySmall,
  37. text = &quot;Testing one two three&quot;,
  38. overflow = TextOverflow.Ellipsis,
  39. textAlign = TextAlign.Left
  40. )
  41. }
  42. }

Screenshot

Jetpack Compose中两列之间的垂直分隔线

Android Docs for Reference

huangapple
  • 本文由 发表于 2023年7月23日 17:10:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/76747442.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定