英文:
I want my image to have the same width as height in Jetpack Compose
问题
我正在设计一个用于LazyColumn的界面，这是我的代码：
Card(
colors = CardDefaults.cardColors(containerColor = LightGray),
shape = RoundedCornerShape(10.dp),
modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Min)
.padding(horizontal = 10.dp, vertical = 5.dp)
) {
Row(modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Min)) {
AsyncImage(
model = monument.image,
contentDescription = stringResource(
id = R.string.home_monument_content_description
),
contentScale = ContentScale.Crop,
modifier = Modifier
.width(100.dp)
.fillMaxHeight()
.padding(10.dp)
.clip(RoundedCornerShape(10.dp))
)
Column(Modifier.padding(10.dp)) {
Text(
text = monument.name,
fontSize = 18.sp,
fontWeight = FontWeight.SemiBold
)
Text(
text = monument.description,
fontSize = 14.sp,
modifier = Modifier.padding(top = 10.dp),
overflow = TextOverflow.Ellipsis,
maxLines = 2,
lineHeight = 20.sp
)
Text(
text = monument.author,
fontSize = 12.sp,
modifier = Modifier.padding(top = 10.dp),
color = Color.LightGray,
)
}
}
}
我认为我可能在错误地使用内在大小（IntrinsicSize），因为我对它们不太了解。我想让我的AsyncImage的高度尽量增长，但保持相同的高度和宽度比例。也就是说，如果我在我的列中添加更多字段，我希望图像的大小会扩展到列增长到的尺寸。
到目前为止，我已经成功让它在高度上增长，但无法保持相同的宽度，使图像看起来是正方形而不是长方形。
英文:
I am making a design to use it in a LazyColum, it is a simple design but there is something I don't get, this is my code:
Card(
colors = CardDefaults.cardColors(containerColor = LightGray),
shape = RoundedCornerShape(10.dp),
modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Min)
.padding(horizontal = 10.dp, vertical = 5.dp)
) {
Row(modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Min)) {
AsyncImage(
model = monument.image,
contentDescription = stringResource(
id = R.string.home_monument_content_description
),
contentScale = ContentScale.Crop,
modifier = Modifier
.width(100.dp)
.fillMaxHeight()
.padding(10.dp)
.clip(RoundedCornerShape(10.dp))
)
Column(Modifier.padding(10.dp)) {
Text(
text = monument.name,
fontSize = 18.sp,
fontWeight = FontWeight.SemiBold
)
Text(
text = monument.description,
fontSize = 14.sp,
modifier = Modifier.padding(top = 10.dp),
overflow = TextOverflow.Ellipsis,
maxLines = 2,
lineHeight = 20.sp
)
Text(
text = monument.author,
fontSize = 12.sp,
modifier = Modifier.padding(top = 10.dp),
color = Color.LightGray,
)
}
}
}
I think I am misusing the intrinsic sizes as I don't understand them very well. I would like my AsyncImage to grow to as tall as it can but keep the same height and width proportions. That is, if I add more fields in my column, I want the image size to expand to whatever the column has been growing to.
So far I have managed to make it grow in height, but I can't keep the same width so that the image looks square and not rectangular.
答案1
得分: 1
为了始终使其成为正方形，您需要摆脱硬编码的 width 修饰符，并将 aspectRatio 设置为 1F，以确保它与新的高度匹配。
modifier = Modifier
.fillMaxHeight()
.aspectRatio(1F)
.padding(10.dp)
.clip(RoundedCornerShape(10.dp))
英文:
In order to make it square all the time, you need to get rid of hard coded width Modifier and set aspectRatio to 1F so it will make sure it matches with new height
modifier = Modifier
.fillMaxHeight()
.aspectRatio(1F)
.padding(10.dp)
.clip(RoundedCornerShape(10.dp))
答案2
得分: 1
使用Aspect Ratio 1F修改修饰符，这将使其变为正方形。
AsyncImage(
model = monument.image,
contentDescription = stringResource(
id = R.string.home_monument_content_description
),
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxHeight()
.aspectRatio(1f) // 这确保了正方形的纵横比
.padding(10.dp)
.clip(RoundedCornerShape(10.dp))
)
请记住，由于你正在使用ContentScale.Crop内容缩放，这种方法可能会导致图像在一个轴上被裁剪得比预期更多。如果你希望整个图像可见并且不介意它的大小潜在地小于行允许的最大大小，请考虑改用ContentScale.Fit。
英文:
Modify the modifier with Aspect Ratio 1F. This will make it square.
AsyncImage(
model = monument.image,
contentDescription = stringResource(
id = R.string.home_monument_content_description
),
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxHeight()
.aspectRatio(1f) // This ensures a square aspect ratio
.padding(10.dp)
.clip(RoundedCornerShape(10.dp))
)
Remember that this approach may lead to the image being cropped more than desired on one axis because of the ContentScale.Crop content scale you're using. If you want the whole image to be visible and don't mind it being potentially smaller than the maximum size allowed by the row, consider using ContentScale.Fit instead.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论