如何获取顶部/内部带有文字的图像？ （Google课堂首页图片格式）

Question

我想制作一个顶部带有文本的图像，就像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)
                        }
                    }
                }
        }
    }
}

Answer 1

要在文本上方放置文本，可以使用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)
    }
  }
}

Answer 2

通过 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)
            }
        } 
    }