英文:
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.
Box(
modifier.fillMaxSize()
){
Box(
modifier
.clip(RoundedCornerShape(10.dp))
.fillMaxWidth(0.95f)
.fillMaxHeight(0.15f)
.background(Color.DarkGray)
.align(Alignment.Center)
) {
Row(
horizontalArrangement = Arrangement.SpaceEvenly,
modifier = Modifier.fillMaxSize()
) {
OnePlayer(name = "Gabriel Clemens", id = R.drawable.gabriel_clemens)
OnePlayer(name = "Martin Schindler", id = R.drawable._8111069
)
}
}
}
This is the OnePlayer Composable code
@Composable
fun OnePlayer(
modifier: Modifier = Modifier,
name: String,
id: Int
) {
Column(){
Image(
painter = painterResource(id = id),
contentDescription = null,
contentScale = ContentScale.FillWidth,
modifier = Modifier.fillMaxWidth(0.5f)
)
Text(
text = name,
)
}
} }
}
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
答案1
得分: 0
您需要将Modifier传递给您的OnePlayer组合，并使用权重进行调整，
@Composable
fun OnePlayer(
name: String,
id: Int,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Image(
painter = painterResource(id = id),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxWidth().weight(1f),
)
Text(
text = name,
maxLines = 1,
)
}
}
@Preview
@Composable
fun PreviewResult() {
SampleTheme {
Surface(
color = MaterialTheme.colorScheme.background
) {
Box(
modifier = Modifier.fillMaxSize()
) {
Box(
Modifier
.clip(RoundedCornerShape(10.dp))
.fillMaxWidth(0.95f)
.fillMaxHeight(0.15f)
.background(Color.DarkGray)
.align(Alignment.Center)
) {
Row(
horizontalArrangement = Arrangement.SpaceEvenly,
modifier = Modifier.fillMaxSize()
) {
OnePlayer(
name = "Gabriel Clemens",
id = R.drawable.ic_foggy,
modifier = Modifier.weight(1f),
)
OnePlayer(
name = "Martin Schindler",
id = R.drawable.ic_heavy_rain,
modifier = Modifier.weight(1f),
)
}
}
}
}
}
}
[![Result][1]][1]
<details>
<summary>英文:</summary>
You have to pass the `Modifier` to your `OnePlayer` composable and play with weights,
@Composable
fun OnePlayer(
name: String,
id: Int,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Image(
painter = painterResource(id = id),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxWidth().weight(1f),
)
Text(
text = name,
maxLines = 1,
)
}
}
@Preview
@Composable
fun PreviewResult() {
SampleTheme {
Surface(
color = MaterialTheme.colorScheme.background
) {
Box(
modifier = Modifier.fillMaxSize()
) {
Box(
Modifier
.clip(RoundedCornerShape(10.dp))
.fillMaxWidth(0.95f)
.fillMaxHeight(0.15f)
.background(Color.DarkGray)
.align(Alignment.Center)
) {
Row(
horizontalArrangement = Arrangement.SpaceEvenly,
modifier = Modifier.fillMaxSize()
) {
OnePlayer(
name = "Gabriel Clemens",
id = R.drawable.ic_foggy,
modifier = Modifier.weight(1f),
)
OnePlayer(
name = "Martin Schindler",
id = R.drawable.ic_heavy_rain,
modifier = Modifier.weight(1f),
)
}
}
}
}
}
}
[![Result][1]][1]
[1]: https://i.stack.imgur.com/pcFGV.png
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论