Jetpack Compose中如何移除Bottom Drawer占用的空白区域

问题核心在于你当前BottomDrawer的content区域用了fillMaxSize()，这会强制该区域占满剩余屏幕高度，导致下方的TextField被挤到屏幕外或产生大量空白。只需调整content的布局约束，让它仅包裹自身内容即可。

修改步骤： #

• 将BottomDrawer的content中Modifier.fillMaxSize()替换为Modifier.wrapContentHeight()，让内容区域高度自适应
• 可选：调整content内Column的垂直对齐为Alignment.Top，避免内容居中带来的额外空白

修改后的BottomDrawerSample代码： #

@Composable
@OptIn(ExperimentalMaterialApi::class)
fun BottomDrawerSample() {
    val (gesturesEnabled, toggleGesturesEnabled) = remember { mutableStateOf(true) }
    val scope = rememberCoroutineScope()
    Column {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .toggleable(
                    value = gesturesEnabled,
                    onValueChange = toggleGesturesEnabled
                )
        ) {
            Checkbox(gesturesEnabled, null)
            Text(text = if (gesturesEnabled) "Gestures Enabled" else "Gestures Disabled")
        }
        val drawerState = rememberBottomDrawerState(BottomDrawerValue.Closed)
        BottomDrawer(
            gesturesEnabled = gesturesEnabled,
            drawerState = drawerState,
            drawerContent = {
                Button(
                    modifier = Modifier
                        .align(Alignment.CenterHorizontally)
                        .padding(top = 16.dp),
                    onClick = { scope.launch { drawerState.close() } },
                    content = { Text("Close Drawer") }
                )
                LazyColumn {
                    items(25) {
                        ListItem(
                            text = { Text("Item $it") },
                            icon = {
                                Icon(
                                    Icons.Default.Favorite,
                                    contentDescription = "Localized description"
                                )
                            }
                        )
                    }
                }
            },
            content = {
                Column(
                    modifier = Modifier
                        .wrapContentHeight() // 替换fillMaxSize为wrapContentHeight
                        .padding(16.dp),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalAlignment = Alignment.Top // 可选，让内容顶部对齐
                ) {
                    val openText = if (gesturesEnabled) "▲▲▲ Pull up ▲▲▲" else "Click the button!"
                    Text(text = if (drawerState.isClosed) openText else "▼▼▼ Drag down ▼▼▼")
                    Spacer(Modifier.height(20.dp))
                    Button(onClick = { scope.launch { drawerState.open() } }) {
                        Text("Click to open")
                    }
                }
            }
        )
    }
}

修改后的主界面代码： #

Scaffold(scaffoldState = scaffoldState) { innerPadding ->
    Column(Modifier.padding(innerPadding).padding(16.dp)) { // 注意使用Scaffold的innerPadding避免被系统栏遮挡

        BottomDrawerSample()

        OutlinedTextField(value = text,
            onValueChange = { text = it },
            label = { Text(text = "Title") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth().padding(top = 8.dp)) // 可选添加顶部间距优化排版

        OutlinedTextField(value = text,
            onValueChange = { text = it },
            label = { Text(text = "Brand") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth().padding(top = 8.dp))
     }
   }

关键说明： #

• wrapContentHeight()让BottomDrawer的内容区域仅占用自身控件所需高度，不再强制撑满屏幕，下方的TextField就能紧贴按钮显示
• 主界面中使用Scaffold返回的innerPadding，避免内容被系统状态栏/导航栏遮挡
• 给TextField添加少量顶部间距，可让整体排版更舒适

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