如何解决如何获取顶部/内部带有文字的图像? Google课堂首页图片格式
我想制作一个顶部带有文本的图像,就像Google CLassroom一样。但是首先我要测试图像,然后再测试文本。相反,我得到的图像与文本重叠。 Image Overlapping text 然后我将图像代码移到文本后面。如何获得简单的G教室格式 Text then Image
@Composable
fun ClassImage(
// icon: VectorAsset,// label: String,// modifier: Modifier = Modifier
) {
val imageAlpha = 1f
Surface(
modifier = Modifier
.padding(start = 8.dp,top = 8.dp,end = 8.dp)
.fillMaxWidth(),color = colors.primary.copy(alpha = 0.12f)
) {
TextButton(
onClick = {},modifier = Modifier.fillMaxWidth()
) {
Row(
horizontalArrangement = Arrangement.Start,verticalAlignment = Alignment.CenterVertically,modifier = Modifier.fillMaxWidth())
{
Image(
imageResource(id = R.drawable.class1),alpha = imageAlpha
)
Column {
Text("Alfred Sisley",fontWeight = FontWeight.Bold)
ProvideEmphasis(emphasis = EmphasisAmbient.current.medium) {
Text("3 minutes ago",style = MaterialTheme.typography.body2)
}
}
}
}
}
}
解决方法
要在文本上方放置文本,可以使用Box,类似于旧的FrameLayout。
我不确定您是否想要实现,但是如果这样:
然后您可以通过以下方式进行操作:
Surface(
shape = RoundedCornerShape(8.dp),modifier = Modifier
.preferredHeight(128.dp)
.clickable(onClick = {})
) {
Box {
Image(
vectorResource(id = R.drawable.ic_launcher_background),alpha = imageAlpha,contentScale = ContentScale.Crop,modifier = Modifier.fillMaxSize()
)
Column(modifier = Modifier.padding(16.dp)) {
Text(
"Alfred Sisley",fontWeight = FontWeight.Bold,style = MaterialTheme.typography.h6)
ProvideEmphasis(emphasis = EmphasisAmbient.current.medium) {
Text("3 minutes ago",style = MaterialTheme.typography.body2)
}
Spacer(modifier = Modifier.weight(1f))
Text(text = "Footer",style = MaterialTheme.typography.body1)
}
}
}
,
通过 1.0.0-beta02
,您可以使用 Box
作为父容器。
类似的东西:
Box(modifier = Modifier.height(IntrinsicSize.Max))
{
Image(
painterResource(id = R.drawable.xx),"contentDescription",alpha = 0.8f,modifier = Modifier.requiredHeight(100.dp)
)
Column(
modifier = Modifier.fillMaxHeight(),verticalArrangement = Arrangement.Bottom) {
Text("Alfred Sisley",fontWeight = FontWeight.Bold)
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text("3 minutes ago",style = MaterialTheme.typography.body2)
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。