android - 如何在 Android Jetpack Compose 中向 Card 对象添加图像背景？

Question

我正在开发一个 Jetpack Compose 应用程序，该应用程序使用 LazyColumn 显示玩家列表，并且我正在尝试向每个 Card 添加图像背景(在代表玩家的可组合函数 ProfileCard)。

我使用 Box 对象来保存每个条目的内容，并声明一个 Image 对象作为其第一个元素。 根据我的理解， Box 对象中的所有元素都是“堆叠”的，以便稍后声明的元素(进一步向下)在视觉上显示在先前声明的元素(进一步向上)的顶部，所以我不确定为什么图像背景(首先声明)呈现在 Text 元素的顶部，该元素在 ProfileContent 可组合项的 Line#93 中进一步声明:

这是禁用深色蜂窝图像元素的屏幕截图:

在这里，启用了深色蜂窝图像元素:

不知何故，背景图像正确地呈现在播放器图标的后面，但它却呈现在Text元素的顶部 - 尽管两者都是图标和文本在同一个 Row 对象中声明。 有人知道如何解决此问题并强制将背景图像渲染在两个元素后面吗？

Answer 1

它不会在 TextField 顶部呈现，它看起来在它的顶部，因为 TextField 的 背景与它后面的 Image ，所以看起来像是与它们重叠。

我尝试实现您的代码并将 TextField backgroundColor 更改为 Color.LightGray。

 Card(
        modifier = Modifier
            .fillMaxWidth()
            .size(90.dp)
            .padding(top = 6.dp)
            .wrapContentHeight(align = Alignment.Top),
        shape = CutCornerShape(topEnd = 20.dp),
        elevation = 8.dp
    ) {

        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {

            Image(
                painter = painterResource(id = R.drawable.honeycomb),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.matchParentSize()
            )

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically
            ) {
                // ProfilePicture() composable
                Box(
                    modifier = Modifier
                        .size(80.dp)
                        .clip(CircleShape)
                        .background(Color.Red)
                )

                Spacer(modifier = Modifier.size(size = 16.dp))

                // ProfileContent() composable
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(end = 16.dp)
                ) {
                    TextField(
                        value = "Text",
                        onValueChange = {},
                        label = { Text("Player Name")},
                        colors = TextFieldDefaults.textFieldColors(
                            backgroundColor = Color.LightGray
                        )
                    )
                }
            }
        }
    }

编辑:将已发布的解决方案描述从 Text 重构并更正为 TextField