Jetpack Compose中如何从底部向上布局计算器界面组件

你的问题核心是要让按钮区域根据自身内容确定高度，上方TextField自动填充剩余空间，用固定比例的fillMaxHeight(0.35f)确实会在不同屏幕尺寸下出现适配问题，以下是更合理的实现方式：

核心思路 #

• 使用Column的weight修饰符分配空间：给TextField设置weight(1f)，让它占据Column中除按钮区域外的所有剩余空间
• 按钮区域保持自适应高度，由内部的LazyVerticalGrid自动决定高度，避免固定比例带来的适配问题

优化后的代码 #

@Composable
fun Screen(
    modifier: Modifier = Modifier,
    keys: List<AppButtonProperties>
) {
    Column(
        modifier = modifier.fillMaxSize()
    ) {
        // TextField占据上方剩余所有空间
        TextField(
            value = "",
            onValueChange = {},
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .padding(bottom = 5.dp),
            colors = TextFieldDefaults.colors(unfocusedContainerColor = Color.Red) // 演示用颜色
        )
        // 按钮区域根据内容自动调整高度
        LazyVerticalGrid(
            columns = GridCells.Fixed(4),
            modifier = Modifier.fillMaxWidth()
        ) {
            items(keys) { key ->
                AppButton(modifier = Modifier.padding(2.dp), key)
            }
        }
    }
}

额外说明 #

• 移除了多余的Box嵌套，简化布局结构
• Column直接作为根布局，无需外层Box（除非有特殊对齐需求）
• weight修饰符会让子项在Column的剩余空间中按比例分配，这里TextField设为1f，按钮区域不设weight，将完全自适应自身内容高度

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