在 Jetpack Compose 中实现垂直网格视图

Question

我的代码:::

@Composable
fun VerticalImageCards(toolsList: List<HealthTool>) {
    val domainName = stringResource(id = R.string.media_url)

    FlowRow(mainAxisSpacing = 8.dp,
        crossAxisSpacing = 16.dp,
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 16.dp),
        mainAxisSize = SizeMode.Wrap) {
        for (i in toolsList) {
            val imgUrl = "$domainName${i.url}"
            ToolsCardLayout(cardTitle = i.title, imgUrl = imgUrl)
        }
    }
}

@Composable
fun ToolsCardLayout(
    imgUrl: String,
    cardTitle: String,
) {
    Box(modifier = Modifier.clickable {}) {
        AsyncImage(model = imgUrl,
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxWidth())
        Box(modifier = Modifier
            .size(32.dp)
            .align(Alignment.TopEnd)) {
            Image(painter = painterResource(id = R.drawable.schedule),
                contentDescription = null,
                modifier = Modifier
                    .fillMaxSize()
                    .padding(top = 8.dp, end = 8.dp),
                contentScale = ContentScale.Fit)
        }
    }
    Card(modifier = Modifier
        .height(44.dp)
        .fillMaxWidth()) {
        Text(text = cardTitle,
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .padding(horizontal = 16.dp, vertical = 8.dp)
                .clip(RoundedCornerShape(bottomStart = 8.dp, bottomEnd = 8.dp)))
    }
}

代码说明:::

我从服务器获取了一份工具详细信息列表，其中包含工具图像、标题、描述。

imgURl -> 图像的 url

cardTitle -> 工具名称

问题::: 卡占据了整个宽度。早些时候，当数据被硬编码时，我使用了权重（1f），并且我不必从后端检索它。另外，我将在主屏幕上使用它，因此网格不应该是可滚动的。

请访问此驱动器链接了解更多详细信息，我添加了代码片段和图像+屏幕录制以便更好地理解

Answer 1

您可以使用官方的LazyVerticalGrid

@Composable
fun VerticalImageCards(toolsList: List<HealthTool>) {
    val domainName = stringResource(id = R.string.media_url) {

     LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = modifier,
            state = rememberLazyGridState()
        ) {
       
         items(toolsList) { 
           val imgUrl = "$domainName${it.url}"
           ToolsCardLayout(cardTitle = it.title, imgUrl = imageUrl)
        }
    }
}