Jetpack Compose：如何让Scaffold内的IconList占满全屏

问题根源 #

你当前的代码存在两个核心问题：

• 手动计算Card高度时，直接使用了屏幕总高度，没有减去Scaffold顶部栏（TopBar）的高度和内边距，导致高度计算偏差。
• LazyVerticalGrid没有添加fillMaxHeight()修饰符，无法利用Scaffold提供的剩余可用空间。

修复方案 #

我们不需要手动计算每个Card的高度，只需让LazyVerticalGrid占满可用空间，并让Card自动填充Grid的item区域即可。如果需要均分高度，再基于可用空间计算：

修改后的完整代码

@Preview
@Composable
fun HomeScreenPrev() {
    TotalApplicationTheme {
        val functionalities = listOf(
            Functionality("搜索", "搜索功能", Icons.Default.ShoppingCart),
            Functionality("设置", "设置功能", Icons.Filled.Face),
            Functionality("点赞", "点赞功能", Icons.Default.ThumbUp),
            Functionality("警告", "警告功能", Icons.Default.Warning),
            Functionality("搜索", "搜索功能", Icons.Default.Search),
            Functionality("设置", "设置功能", Icons.Default.Settings),
        )
        HomeScreen(functionalities = functionalities)
    }
}

@Composable
fun HomeScreen(functionalities: List<Functionality>) {
    Scaffold(
        topBar = { MainTopBar() },
    ) { innerPadding ->
        // 将内边距传递给ActionPanel，并确保占满剩余空间
        ActionPanel(
            functionalities = functionalities,
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxSize()
        )
    }
}

@Composable
fun ActionPanel(functionalities: List<Functionality>, modifier: Modifier) {
    LazyVerticalGrid(
        modifier = modifier,
        columns = GridCells.Fixed(2),
        // 可根据需求调整行列间距
        verticalArrangement = Arrangement.spacedBy(0.dp),
        horizontalArrangement = Arrangement.spacedBy(0.dp)
    ) {
        items(functionalities) {
            // 让Card填充整个Grid Item的空间
            TaskCard(it, modifier = Modifier.fillMaxHeight())
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TaskCard(functionality: Functionality, modifier: Modifier = Modifier) {
    Card(
        modifier = modifier,
        shape = RectangleShape,
        border = BorderStroke(1.dp, Color.LightGray),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.tertiary,
            contentColor = Color.Black
        ),
        onClick = { /*TODO*/ }
    ) {
        // 让Column填充Card的高度，内容垂直居中分布
        Column(
            modifier = Modifier
                .padding(8.dp)
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Icon(
                imageVector = functionality.icon,
                contentDescription = null,
                modifier = Modifier.size(48.dp)
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(text = functionality.name, style = MaterialTheme.typography.titleSmall)
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = functionality.description, style = MaterialTheme.typography.bodyMedium)
        }
    }
}

关键修改说明 #

1. HomeScreen：移除了不必要的@SuppressLint，确保将Scaffold的innerPadding正确传递给ActionPanel，并给ActionPanel添加fillMaxSize()，让它占满Scaffold的剩余空间。
2. ActionPanel：删除了手动计算高度的冗余代码，给LazyVerticalGrid添加fillMaxSize()，让Grid直接占满可用区域。
3. TaskCard：给Card添加fillMaxHeight()，让它填充Grid Item的高度；同时让Column使用fillMaxSize()并设置垂直居中，保证Card内的元素合理分布。

如果确实需要手动计算每个Card的高度（比如固定均分），可以这样修改ActionPanel：

@Composable
fun ActionPanel(functionalities: List<Functionality>, modifier: Modifier) {
    val density = LocalDensity.current
    val configuration = LocalConfiguration.current
    // 获取顶部栏占用的高度（从Scaffold的内边距中提取）
    val topBarHeight = with(density) { modifier.layoutInfo?.minimumHeight?.toDp() ?: 0.dp }
    // 计算可用高度：屏幕总高度 - 顶部栏高度
    val availableHeight = configuration.screenHeightDp.dp - topBarHeight
    // 计算每个Card的高度：可用高度 ÷ 行数（总item数 ÷ 列数）
    val eachCardHeight = availableHeight / (functionalities.size / 2)

    LazyVerticalGrid(
        modifier = modifier.fillMaxHeight(),
        columns = GridCells.Fixed(2),
        verticalArrangement = Arrangement.spacedBy(0.dp),
        horizontalArrangement = Arrangement.spacedBy(0.dp)
    ) {
        items(functionalities) {
            TaskCard(it, modifier = Modifier.height(eachCardHeight))
        }
    }
}

内容的提问来源于stack exchange，提问作者Daniel Hernández