英文:
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.
@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
)
}
}
}
答案1
得分: 0
将Modifier.align(Alignment.TopEnd)分配给包含Text的Box将其放置在父Box的顶部朝末端位置。
@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
.align(Alignment.TopEnd)
.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
)
}
}
}
英文:
Assigning Modifier.align(Alignment.TopEnd) to Box that contains Text will put it to top end of the parent Box
@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
.align(Alignment.TopEnd)
.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
)
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论