在jetpack compose中定位元素

Question

用户可以选择在 Firestore 中输入自己的数据。之后，从 ImageCard 的数据库中检索数据。每次用户添加新数据时，都会添加一个新的 ImageCard。我希望如图所示添加数据。如果只添加一个元素，则让它仅占据屏幕的 50%，作为图像中的第三个元素。如果添加另一个元素，我希望它位于第一个元素旁边。如果添加了第三个，则让它出现在第一个的下方，依此类推。这是图像：

上述内容是否可以在 Jetpack Compose 中实现？这是我当前代码的一部分。目前，这些元素是一个在另一个之下。

accountViewModel.retriveDataFromFirestore(db, userUid.toString()) { projects ->
                    projectsListState.value = projects
                }

                for (project in projectsListState.value) {
                    val imagePainter = rememberImagePainter(data = project.image)
                    val title = "${project.title ?: ""}"
                    Box (modifier = Modifier.fillMaxWidth(0.5f).padding(16.dp)) {
                        accountViewModel.ImageCard(painter = imagePainter, contentDescription = null, title = title)
                    }
                }

Answer 1

此代码将生成类似于您正在寻找的网格为 4 的内容：

        val imageSizeModifier = Modifier
            .height(175.dp)
            .width(150.dp)

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ) {
            Image(
                modifier = imageSizeModifier,
                painter = painterResource(id = R.drawable.mouse),
                contentDescription = "stringResource(id = R.string.content_description)"
            )
            Spacer(
                Modifier
                    .height(10.dp)
                    .width(25.dp)
            )
            Image(
                modifier = imageSizeModifier,
                painter = painterResource(id = R.drawable.otter),
                contentDescription = "stringResource(id = R.string.content_description)"
            )
        }
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ) {
            Image(
                modifier = imageSizeModifier,
                painter = painterResource(id = R.drawable.lynx),
                contentDescription = "stringResource(id = R.string.content_description)"
            )
            Spacer(
                Modifier
                    .height(10.dp)
                    .width(25.dp)
            )
            Image(
                modifier = imageSizeModifier,
                painter = painterResource(id = R.drawable.lion),
                contentDescription = "stringResource(id = R.string.content_description)"
            )
        }

结果：

在 for 循环中，您可以将每个画家保存到变量或数组中，然后在循环之外使用它们。