You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Jetpack Compose中使用.imePadding()时,底部搜索栏唤起键盘出现大量空白区域的问题求助

Jetpack Compose中使用.imePadding()时,底部搜索栏唤起键盘出现大量空白区域的问题求助

我正在用Jetpack Compose开发一个启动器UI,最近碰到了个头疼的布局问题:当搜索栏设置在屏幕底部时,唤起软键盘会导致屏幕中间出现一大块空白区域,只有启用底部搜索栏的时候才会触发这个问题,顶部搜索栏的情况完全正常。

以下是相关布局的简化版本:

Box(
    Modifier
        .fillMaxSize()
        .imePadding()
) {
    LazyColumn(
        state = homeScreenModel.appsListScrollState,
        modifier = Modifier
            .fillMaxSize()
            .padding(30.dp, 0.dp),
        horizontalAlignment = getAppsAlignment(mainAppModel.getContext()),
    ) {
        item { AppsListHeader() }

        // 顶部搜索栏(完全正常)
        item {
            if (showSearchBox && !bottomSearch) {
                Spacer(Modifier.height(15.dp))
                AnimatedPillSearchBar(...)
                Spacer(Modifier.height(15.dp))
            }
        }

        items(homeScreenModel.filteredApps, key = { it.packageName }) {
            HomeScreenItem(...)
        }

        item { Spacer(Modifier.height(90.dp)) }
        item { SettingsSpacer() }
    }

    // 底部搜索栏(唤起键盘时会产生大量空白区域)
    Column(
        modifier = Modifier
            .align(Alignment.BottomCenter)
            .padding(30.dp, 10.dp)
            .fillMaxWidth(),
        horizontalAlignment = getAppsAlignment(mainAppModel.getContext())
    ) {
        if (showSearchBox && bottomSearch) {
            Spacer(Modifier.height(15.dp))
            AnimatedPillSearchBar(...)
            SettingsSpacer()
        }
    }
}

预期效果

软键盘弹出时,应该只把底部搜索栏和应用列表向上推到刚好适配键盘高度的位置,界面元素之间不会出现多余的空白。

实际出现的问题

当启用底部搜索栏并唤起键盘后,LazyColumn会突然向上偏移,在应用列表、底部搜索栏和软键盘之间出现一大块明显的空白区域,整个布局的排版完全乱了。

我已经尝试过的解决方法,但都没效果

  • 移除.imePadding():空白区域消失了,但底部搜索栏和部分列表项会被软键盘完全挡住,不符合需求
  • 尝试将底部搜索栏包裹在不同的容器(比如Box、ConstraintLayout)中,问题依旧存在
  • 移除了布局中所有额外的Spacerpadding,还是会出现空白
  • 尝试把底部搜索栏移到LazyColumn内部:不行,因为设计要求它必须悬浮在应用列表的上方

有没有大佬遇到过类似的问题?是不是.imePadding()和底部固定布局的组合有什么我没注意到的细节?或者有没有其他正确处理软键盘与底部布局交互的方式?麻烦帮忙支个招,感谢!

火山引擎 最新活动