如何在图像上显示文字和图标。喷气背包组成

Question

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(0.35f),

        ) {
            IconButton(onClick = {}) {
                Icon(
                    modifier = Modifier.size(50.dp).background(Color.White),
                    imageVector = Icons.Default.ArrowBack, contentDescription = null)

            }
                Text("Hello", style = TextStyle(Color.White, fontSize = 10.sp))
            Image(
                modifier = Modifier.background(Color.white)
                painter = rememberAsyncImagePainter(null),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                        modifier = Modifier // Adjust the size of the image as needed
                        .fillMaxSize()
            )

        }

我希望在图像和图标上看到文本。如果这两个可见，那么它们当前不可见

Answer 1

您没有为可组合项指定任何定位信息，因此它们都放置在其父项的右上角。它们将按照出现的顺序绘制：首先绘制

IconButton

，然后在其之上绘制

Text

，然后所有内容都隐藏在您设置的填充整个可用空间的

Image

下方。结果，只能看到图像。

我不完全确定您想要实现什么，但如果您将

Image

移至顶部，则所有三个可组合项都可见。如果您不希望它们被绘制在另一个之上，则应该将

Box

更改为

Column

或类似的内容：

Column

布置其子级，使它们不会重叠，从而垂直展开它们。

Answer 2

将图像放在文本和图标之前：

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(0.35f),

        ) {
            Image(
                modifier = Modifier.background(Color.white)
                painter = rememberAsyncImagePainter(null),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                        modifier = Modifier // Adjust the size of the image as needed
                        .fillMaxSize()
            )

            IconButton(onClick = {}) {
                Icon(
                    modifier = Modifier.size(50.dp).background(Color.White),
                    imageVector = Icons.Default.ArrowBack, contentDescription = null)

            }
            Text("Hello", style = TextStyle(Color.White, fontSize = 10.sp))

        }

调整修改器以将其放置在正确的位置。

希望是您所需要的。