[英]How to properly handle loading initials as place holders in Jetpack Compose
I am trying to show initials when the user does not upload an icon, or set an icon, my only problem is our code uses jetpack compose and I have not found a better way to display this.当用户没有上传图标或设置图标时,我试图显示缩写,我唯一的问题是我们的代码使用 jetpack compose,我还没有找到更好的显示方式。 My code is below but what this code does is it draws the name not in the card.我的代码在下面,但这段代码的作用是绘制不在卡片中的名字。
I have the ProfileCard, which has an Image and two text see image我有 ProfileCard,它有一个图像和两个文本(参见图像)
my challenge now is how do I center the initials, and have a color in the background.我现在面临的挑战是如何将首字母居中,并在背景中添加颜色。 I think draw Text is not working.我认为绘制文本不起作用。 In short I am wondering why it is not drawing on my Image in the card.简而言之,我想知道为什么它没有在卡片上绘制我的图像。
How to make initials icons using Coil in Jetpack Compose 如何在 Jetpack Compose 中使用 Coil 制作首字母图标
I want to achieve something like this with text on the side我想用侧面的文字实现这样的效果
My code.我的代码。
val painter = rememberAsyncImagePainter(model = getProfileAvatar(e.id))
val errorState = painter.state is AsyncImagePainter.State.Error
val emptyState = painter.state is AsyncImagePainter.State.Empty
val isErrorState = painter.state is AsyncImagePainter.State.Error
val textMeasure = rememberTextMeasurer()
val textLayoutResult = textMeasure.measure(text = buildAnnotatedString { append(personName) },
style = TextStyle(color = Color.White,
fontSize = 16.sp))
// the composable Profile Card that has the image and text. Hence the painter is what I //am trying to draw to.
ProfileCard( modifier = Modifier.drawBehind
{ if (errorState || emptyState)
{ drawText(textLayoutResult = textLayout) }
},
painter = painter,
onCardClick = {
})
// My Coil Loader // 我的线圈装载机
private fun getProfileAvatar(id: String) : ImageRequest {
val url = ServiceAPI.photoUrl(id)
return ImageRequest.Builder(requireContext())
.data(url)
.addHeader() )
.build() }
This is how it looks drawing at the back.这就是它在背面绘制的样子。
Put in your Card
a Row
with a Alignment.CenterVertically
.使用Alignment.CenterVertically
将您的Card
排成一Row
。
Something like:就像是:
Card(
modifier = Modifier.fillMaxWidth().height(100.dp),
elevation = 2.dp
){
Row(
modifier = Modifier.padding(16.dp),
verticalAlignment = Alignment.CenterVertically
){
Text(
modifier = Modifier
.padding(16.dp)
.drawBehind {
drawCircle(
color = Teal200,
radius = this.size.maxDimension
)
},
text = "NG",
style = TextStyle(color = Color.White, fontSize = 20.sp)
)
Column(
Modifier.padding(start = 20.dp),
verticalArrangement = Arrangement.spacedBy(4.dp, CenterVertically),
){
Text("Name Surname",style = TextStyle(fontSize = 14.sp))
Text("Active Now",style = TextStyle(fontSize = 14.sp))
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.