如何在Compose中创建一个显示电子邮件数字的图像。

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

How to create an image that displays email numbers on top in Compose

问题

以下是您要翻译的内容：

所以我正在尝试创建一个电子邮件显示图像，我的挑战是，在撰写邮件时，我不知道如何使电子邮件显示正确地显示在我的图像上。请查看我的代码如下。

这是我想要实现的效果。

我如何获得类似的形状。

@Composable
fun NumberedIcon(number: Int, iconRes: Int) {
Box(modifier = Modifier.size(48.dp), contentAlignment = Alignment.Center) {
Image(
painter = painterResource(id = iconRes),
contentDescription = null,
modifier = Modifier.size(32.dp),
contentScale = ContentScale.FillBounds,
alpha = 0.8f
)
Box(
modifier = Modifier
.graphicsLayer(alpha = 0.8f)
.size(24.dp)
.background(Color.White, shape = CircleShape),
contentAlignment = Alignment.Center
) {
Text(
text = number.toString(),
fontSize = 12.sp,
color = Color.Black
)
}
}
}

英文:

so I am trying to create an email display image, my challenge is, in compose I don't know how I can make the email display show correctly on my image. See my code below.

This is what I want to achieve

How can I get a similar shape.

  1. @Composable
  2. fun NumberedIcon(number: Int, iconRes: Int) {
  3.     Box(modifier = Modifier.size(48.dp), contentAlignment = Alignment.Center) {
  4.         Image(
  5.             painter = painterResource(id = iconRes),
  6.             contentDescription = null,
  7.             modifier = Modifier.size(32.dp),
  8.             contentScale = ContentScale.FillBounds,
  9.             alpha = 0.8f
  10.         )
  11.         Box(
  12.             modifier = Modifier
  13.                 .graphicsLayer(alpha = 0.8f)
  14.                 .size(24.dp)
  15.                 .background(Color.White, shape = CircleShape),
  16.             contentAlignment = Alignment.Center
  17.         ) {
  18.             Text(
  19.                 text = number.toString(),
  20.                 fontSize = 12.sp,
  21.                 color = Color.Black
  22.             )
  23.         }
  24.     }
  25. }

答案1

得分: 0

将Modifier.align(Alignment.TopEnd)分配给包含Text的Box将其放置在父Box的顶部朝末端位置。

  1. @Composable
  2. fun NumberedIcon(number: Int, iconRes: Int) {
  3.     Box(
  4.         modifier = Modifier
  5.             .size(48.dp),
  6.         contentAlignment = Alignment.Center
  7.     ) {
  9.         Image(
  10.             painter = painterResource(id = iconRes),
  11.             contentDescription = null,
  12.             modifier = Modifier
  13.                 .size(32.dp),
  14.             contentScale = ContentScale.FillBounds,
  15.             alpha = 0.8f
  16.         )
  18.         Box(
  19.             modifier = Modifier
  20.                 .align(Alignment.TopEnd)
  21.                 .graphicsLayer(alpha = 0.8f)
  22.                 .size(24.dp)
  23.                 .background(Color.White, shape = CircleShape),
  24.             contentAlignment = Alignment.Center
  25.         ) {
  26.             Text(
  27.                 text = number.toString(),
  28.                 fontSize = 12.sp,
  29.                 color = Color.Black
  30.             )
  31.         }
  32.     }
  33. }
英文:

Assigning Modifier.align(Alignment.TopEnd) to Box that contains Text will put it to top end of the parent Box

  1. @Composable
  2. fun NumberedIcon(number: Int, iconRes: Int) {
  3.     Box(
  4.         modifier = Modifier
  5.             .size(48.dp),
  6.         contentAlignment = Alignment.Center
  7.     ) {
  9.         Image(
  10.             painter = painterResource(id = iconRes),
  11.             contentDescription = null,
  12.             modifier = Modifier
  13.                 .size(32.dp),
  14.             contentScale = ContentScale.FillBounds,
  15.             alpha = 0.8f
  16.         )
  18.         Box(
  19.             modifier = Modifier
  20.                 .align(Alignment.TopEnd)
  21.                 .graphicsLayer(alpha = 0.8f)
  22.                 .size(24.dp)
  23.                 .background(Color.White, shape = CircleShape),
  24.             contentAlignment = Alignment.Center
  25.         ) {
  26.             Text(
  27.                 text = number.toString(),
  28.                 fontSize = 12.sp,
  29.                 color = Color.Black
  30.             )
  31.         }
  32.     }
  33. }

huangapple
  • 本文由 发表于 2023年5月10日 20:53:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/76218665.html
  • android
  • android-jetpack-compose
  • jetpack
匿名

发表评论

匿名网友

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

确定