Compose ModalBottomSheet弹出键盘时底部贴合键盘的解决方法

当ModalBottomSheet处于显示状态时弹出键盘，会将该模态底部表单向上拉动，导致弹出BottomSheet的父视图暴露（即BottomSheet底部边框与键盘之间会显示父视图）。请问如何实现让BottomSheet底部刚好贴合在键盘上方？

用户提供的原始代码：

ModalBottomSheet(
    modifier = Modifier
        .background(Color.Transparent, shape = RectangleShape)
        .fillMaxHeight(1f),
    sheetState = state, dragHandle = { false },
    onDismissRequest = {
        onDismiss(false)
    },
    scrimColor = Color.Transparent,
    windowInsets = WindowInsets.ime
) {
    Column(
        modifier = Modifier
            .padding(top = 10.dp, bottom = 50.dp)
            .fillMaxWidth(),
        verticalArrangement = Arrangement.Center
    ) {
        Box(
            modifier = Modifier
                .padding(start = 25.dp, end = 25.dp, top = 25.dp)
                .weight(1f)
        ) {
            Column(
                horizontalAlignment = Alignment.Start,
                modifier = Modifier.align(Alignment.TopCenter)
            ) {
                Text(
                    text = title,
                    style = primaryCtaBtnTextStyle.copy(
                        fontSize = 24.sp,
                        color = fi_black_shade
                    )
                )
                Spacer(modifier = Modifier.height(15.dp))
                LazyColumn(
                    modifier = Modifier
                        .padding(top = 20.dp)
                ) {
                    itemsIndexed(items = items) { index, item ->
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(top = 5.dp)
                                .clickable(indication = null,
                                    interactionSource = remember { MutableInteractionSource() }) { 

 ////////////////////////////

            }

        }

        Spacer(modifier = Modifier.height(30.dp))

        if(showError.value) {
            Text(
                text = "Please select your occupation",
                modifier = Modifier.padding(start = 25.dp),
                style = needHelpTextStyle.copy(color = BlazeOrange))

        }

        Spacer(modifier = Modifier.height(40.dp))

        OutlinedTextField(value = "fdfdf", onValueChange = {

        })

        PrimaryCTABtn(
            onclick = {
                //selectedButtonState.value?.let { onSelected(it) }
            },
            modifier = Modifier
                .wrapContentSize()
                .padding(start = 40.dp, end = 40.dp)
            ,
            buttonText = "SELECT"
        )

    }
}

问题原因分析 #

你已经设置了windowInsets = WindowInsets.ime，但还是出现空白，主要是两个点：

1. 强制设置.fillMaxHeight(1f)让BottomSheet占满全屏，键盘弹出时系统调整位置，但底部无法自动贴合键盘高度
2. 内部布局的固定bottom padding和居中排列，导致内容没有顶到BottomSheet底部，出现空白区域

解决方案 #

按以下几点修改代码即可：

1. 调整ModalBottomSheet的高度配置
   去掉.fillMaxHeight(1f)，改用.wrapContentHeight()让BottomSheet根据内容自适应高度，这样键盘弹出时能自动调整整体高度。

2. 完善windowInsets配置
   不要只单独用WindowInsets.ime，合并系统栏Insets，避免BottomSheet被系统状态栏/导航栏挤压：

   windowInsets = WindowInsets.systemBars + WindowInsets.ime
   

3. 给内部布局添加IME适配padding
   在内部Column的Modifier中添加.windowInsetsPadding(WindowInsets.ime)，自动给底部添加和键盘高度一致的padding，确保内容不被遮挡，同时让BottomSheet底部贴合键盘。

4. 调整内部布局的排列方式
   把verticalArrangement = Arrangement.Center改成Arrangement.Top，避免内容居中导致底部出现空白；同时移除Column的固定bottom padding，改用IME padding来控制底部间距。

修改后的完整代码示例 #

ModalBottomSheet(
    modifier = Modifier
        .background(Color.Transparent, shape = RectangleShape)
        .wrapContentHeight(), // 替换fillMaxHeight(1f)，让BottomSheet自适应高度
    sheetState = state,
    dragHandle = { false },
    onDismissRequest = { onDismiss(false) },
    scrimColor = Color.Transparent,
    windowInsets = WindowInsets.systemBars + WindowInsets.ime // 合并系统栏和输入法Insets
) {
    Column(
        modifier = Modifier
            .padding(top = 10.dp, start = 25.dp, end = 25.dp) // 移除固定bottom padding
            .fillMaxWidth()
            .windowInsetsPadding(WindowInsets.ime), // 添加输入法适配padding
        verticalArrangement = Arrangement.Top // 改为顶部排列，避免居中空白
    ) {
        Box(
            modifier = Modifier
                .padding(top = 25.dp)
                .weight(1f, fill = true) // 保持weight让列表区域可滚动
        ) {
            Column(
                horizontalAlignment = Alignment.Start,
                modifier = Modifier.align(Alignment.TopCenter)
            ) {
                Text(
                    text = title,
                    style = primaryCtaBtnTextStyle.copy(
                        fontSize = 24.sp,
                        color = fi_black_shade
                    )
                )
                Spacer(modifier = Modifier.height(15.dp))
                LazyColumn(
                    modifier = Modifier
                        .padding(top = 20.dp)
                ) {
                    itemsIndexed(items = items) { index, item ->
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(top = 5.dp)
                                .clickable(indication = null,
                                    interactionSource = remember { MutableInteractionSource() }) { 
                                    // 你的点击逻辑
                                }
                        ) {
                            // Row内容
                        }
                    }
                }
            }
        }

        Spacer(modifier = Modifier.height(30.dp))

        if(showError.value) {
            Text(
                text = "Please select your occupation",
                style = needHelpTextStyle.copy(color = BlazeOrange)
            )
        }

        Spacer(modifier = Modifier.height(40.dp))

        OutlinedTextField(
            value = "fdfdf", 
            onValueChange = {},
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(20.dp)) // 给按钮和TextField加间距

        PrimaryCTABtn(
            onclick = {
                // 你的点击逻辑
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = 40.dp, end = 40.dp),
            buttonText = "SELECT"
        )

        Spacer(modifier = Modifier.height(16.dp)) // 底部小间距，避免贴边太生硬
    }
}

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