如何使行内的图像大小相同？

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

How do I get Images inside of rows to be the same size?

问题

我想在Jetpack Compose中在文本上方显示两个图像。为此，我创建了一个包含OnePlayer Composable的行。

这是OnePlayer Composable的代码

我希望两个图像都具有相同的大小，并且下方有文本。当我只在第二列中使用文本时，两个文本的大小都与我想要的一样。但是，一旦我添加了图像，左边的图像就比右边的大（请参见附图）。我该如何修复这个问题？

非常感谢！

这是预期的外观

这是当前的外观

英文:

I want to display two images above text in Jetpack Compose. To do this I create a row which has OnePlayer Composable inside of it.

  1.     Box(
  2.         modifier.fillMaxSize()
  3.     ){
  5.         Box(
  6.             modifier
  7.                 .clip(RoundedCornerShape(10.dp))
  8.                 .fillMaxWidth(0.95f)
  9.                 .fillMaxHeight(0.15f)
  10.                 .background(Color.DarkGray)
  11.                 .align(Alignment.Center)
  12.         ) {
  14.             Row(
  15.                 horizontalArrangement = Arrangement.SpaceEvenly,
  16.                 modifier = Modifier.fillMaxSize()
  17.             ) {
  19.                 OnePlayer(name = "Gabriel Clemens", id = R.drawable.gabriel_clemens)
  20.                 OnePlayer(name = "Martin Schindler", id = R.drawable._8111069
  21.                 )
  23.             }
  24.         }
  25.     }

This is the OnePlayer Composable code

  1. @Composable
  2. fun OnePlayer(
  3.     modifier: Modifier = Modifier,
  4.     name: String,
  5.     id: Int
  6. ) {
  8.     Column(){
  10.         Image(
  11.             painter = painterResource(id = id),
  12.             contentDescription = null,
  13.             contentScale = ContentScale.FillWidth,
  14.             modifier = Modifier.fillMaxWidth(0.5f)
  15.         )
  17.         Text(
  18.             text = name,
  19.         )
  20.     }
  22. }  }
  23. }

I want both images to be the same size and have a text below. When I use just text inside the second column I have both texts in the same size just like I want it to be. As soon as I add images the left image is bigger than the right one (see the image attatched). How do I fix this?

Thanks a lot

This is what its supposed to look like

This is what it looks like currently

答案1

得分: 0

您需要将Modifier传递给您的OnePlayer组合，并使用权重进行调整，

  1. @Composable
  2. fun OnePlayer(
  3.     name: String,
  4.     id: Int,
  5.     modifier: Modifier = Modifier,
  6. ) {
  7.     Column(
  8.         modifier = modifier,
  9.         horizontalAlignment = Alignment.CenterHorizontally,
  10.     ) {
  12.         Image(
  13.             painter = painterResource(id = id),
  14.             contentDescription = null,
  15.             contentScale = ContentScale.Crop,
  16.             modifier = Modifier.fillMaxWidth().weight(1f),
  17.         )
  18.         Text(
  19.             text = name,
  20.             maxLines = 1,
  21.         )
  22.     }
  23. }
  25. @Preview
  26. @Composable
  27. fun PreviewResult() {
  28.     SampleTheme {
  29.         Surface(
  30.             color = MaterialTheme.colorScheme.background
  31.         ) {
  32.             Box(
  33.                 modifier = Modifier.fillMaxSize()
  34.             ) {
  36.                 Box(
  37.                     Modifier
  38.                         .clip(RoundedCornerShape(10.dp))
  39.                         .fillMaxWidth(0.95f)
  40.                         .fillMaxHeight(0.15f)
  41.                         .background(Color.DarkGray)
  42.                         .align(Alignment.Center)
  43.                 ) {
  44.                     Row(
  45.                         horizontalArrangement = Arrangement.SpaceEvenly,
  46.                         modifier = Modifier.fillMaxSize()
  47.                     ) {
  48.                         OnePlayer(
  49.                             name = "Gabriel Clemens",
  50.                             id = R.drawable.ic_foggy,
  51.                             modifier = Modifier.weight(1f),
  52.                         )
  53.                         OnePlayer(
  54.                             name = "Martin Schindler",
  55.                             id = R.drawable.ic_heavy_rain,
  56.                             modifier = Modifier.weight(1f),
  57.                         )
  58.                     }
  59.                 }
  60.             }
  61.         }
  62.     }
  63. }

[![Result][1]][1]

  2. <details>
  3. <summary>英文:</summary>
  5. You have to pass the `Modifier` to your `OnePlayer` composable and play with weights,
  7.     @Composable
  8.     fun OnePlayer(
  9.         name: String,
  10.         id: Int,
  11.         modifier: Modifier = Modifier,
  12.     ) {
  13.         Column(
  14.             modifier = modifier,
  15.             horizontalAlignment = Alignment.CenterHorizontally,
  16.         ) {
  18.             Image(
  19.                 painter = painterResource(id = id),
  20.                 contentDescription = null,
  21.                 contentScale = ContentScale.Crop,
  22.                 modifier = Modifier.fillMaxWidth().weight(1f),
  23.             )
  24.             Text(
  25.                 text = name,
  26.                 maxLines = 1,
  27.             )
  28.         }
  29.     }
  31.     @Preview
  32.     @Composable
  33.     fun PreviewResult() {
  34.         SampleTheme {
  35.             Surface(
  36.                 color = MaterialTheme.colorScheme.background
  37.             ) {
  38.                 Box(
  39.                     modifier = Modifier.fillMaxSize()
  40.                 ) {
  42.                     Box(
  43.                         Modifier
  44.                             .clip(RoundedCornerShape(10.dp))
  45.                             .fillMaxWidth(0.95f)
  46.                             .fillMaxHeight(0.15f)
  47.                             .background(Color.DarkGray)
  48.                             .align(Alignment.Center)
  49.                     ) {
  50.                         Row(
  51.                             horizontalArrangement = Arrangement.SpaceEvenly,
  52.                             modifier = Modifier.fillMaxSize()
  53.                         ) {
  54.                             OnePlayer(
  55.                                 name = &quot;Gabriel Clemens&quot;,
  56.                                 id = R.drawable.ic_foggy,
  57.                                 modifier = Modifier.weight(1f),
  58.                             )
  59.                             OnePlayer(
  60.                                 name = &quot;Martin Schindler&quot;,
  61.                                 id = R.drawable.ic_heavy_rain,
  62.                                 modifier = Modifier.weight(1f),
  63.                             )
  64.                         }
  65.                     }
  66.                 }
  67.             }
  68.         }
  69.     }
  71. [![Result][1]][1]
  74.   [1]: https://i.stack.imgur.com/pcFGV.png
  76. </details>

huangapple
  • 本文由 发表于 2023年7月23日 23:48:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/76749125.html
  • android
  • android-jetpack-compose
  • image
  • row
匿名

发表评论

匿名网友

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

确定