Jetpack Compose中ModalBottomSheet内TextField的TextToolbar不显示问题

导致TextToolbar无法显示的原因 #

• Material3的ModalBottomSheet默认contentWindowInsets仅适配导航栏，没有为悬浮在TextField上方的TextToolbar预留顶部空间，导致Toolbar被BottomSheet顶部边缘裁剪。
• 系统计算TextToolbar位置时，会将其纳入BottomSheet的布局边界内，而BottomSheet高度有限，Toolbar无法在可视区域内展示。
• 部分场景下，BottomSheet内部的Surface默认开启clipToBounds，超出边界的Toolbar会被自动裁剪隐藏。

解决方法 #

方法1：调整ModalBottomSheet的contentWindowInsets #

通过自定义contentWindowInsets为TextToolbar预留顶部空间：

ModalBottomSheet(
    onDismissRequest = { showBottomSheet = false },
    // 为顶部添加额外空间适配TextToolbar高度
    contentWindowInsets = WindowInsets.navigationBars.add(WindowInsets(top = 64.dp))
) {
    TextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier.padding(horizontal = 16.dp)
    )
}

方法2：关闭BottomSheet内容的裁剪限制 #

给BottomSheet内容添加clipToBounds(false)修饰符，允许内容超出BottomSheet边界：

ModalBottomSheet(
    onDismissRequest = { showBottomSheet = false }
) {
    TextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier
            .padding(horizontal = 16.dp)
            .clipToBounds(false)
    )
}

方法3：结合WindowInsetsPadding优化布局 #

通过Modifier.windowInsetsPadding为TextField所在布局添加顶部内边距：

ModalBottomSheet(
    onDismissRequest = { showBottomSheet = false }
) {
    Column(
        modifier = Modifier.windowInsetsPadding(
            WindowInsets.navigationBars.add(WindowInsets(top = 64.dp))
        )
    ) {
        TextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier.padding(horizontal = 16.dp)
        )
    }
}

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