如何设置Scaffold元素非固定高度并让顶栏与内容区各占半屏？

一、设置非固定高度 #

给Scaffold内的元素设置非固定高度，可通过两种常用方式实现：

• 使用Modifier.fillMaxHeight(fraction)：传入0-1之间的浮点数，定义元素占父布局高度的比例，比如fillMaxHeight(0.3f)代表占据30%的父布局高度。
• 使用Modifier.weight()：将元素放入Column这类支持权重分配的容器中，通过权重值分配剩余空间，适合多元素按比例划分高度的场景。

二、让topBar与content各占屏幕一半高度 #

你原代码中Modifier.height(1f)是错误用法，该参数接收的是DP单位值，1f仅代表1dp，无法实现占比效果。正确实现方式如下：

修改后的代码示例 #

Scaffold(
    topBar = {
        MyLargeTopAppBar(modifier = Modifier.fillMaxHeight(0.5f))
    },
    content = { padding ->
        // 移除topBar自动添加的顶部内边距，再设置高度为屏幕的一半
        LazyColumn(
            modifier = Modifier
                .padding(padding.copy(top = 0.dp))
                .fillMaxHeight(0.5f)
        ) {
            // 列表内容逻辑
        }
    },
    containerColor = MaterialTheme.colorScheme.background
)

精准高度控制补充 #

如果需要排除状态栏等系统UI的影响，获取精确的可用空间高度，可以使用BoxWithConstraints：

BoxWithConstraints {
    val halfHeight = maxHeight / 2
    Scaffold(
        topBar = {
            MyLargeTopAppBar(modifier = Modifier.height(halfHeight))
        },
        content = { padding ->
            LazyColumn(
                modifier = Modifier
                    .padding(padding.copy(top = 0.dp))
                    .height(halfHeight)
            ) {
                // 列表内容逻辑
            }
        }
    )
}

Arthur Kasparian的建议示意图 #

内容的提问来源于stack exchange，提问作者wbk727