MAUI Blazor安卓平板软键盘弹出后页面内容压缩的解决方案咨询

方案1：动态计算可用高度（MAUI+JS互操作） #

安卓软键盘弹出时，系统调整视口高度但vh仍基于原始视口计算，导致布局压缩。通过监听软键盘状态，动态传递可用高度给Blazor，用自定义CSS变量替代vh：

1. 在Android项目的MainActivity中添加监听：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    Window.SetSoftInputMode(SoftInput.AdjustResize);
    
    ViewTreeObserver.GlobalLayout += (s, e) =>
    {
        Rect visibleFrame = new Rect();
        Window.DecorView.GetWindowVisibleDisplayFrame(visibleFrame);
        int screenHeight = Window.DecorView.RootView.Height;
        int availableHeight = screenHeight - (screenHeight - visibleFrame.Bottom);
        
        if (App.Current?.MainPage is BlazorWebView blazorWebView)
        {
            blazorWebView.WebView.EvaluateJavaScriptAsync($"updateAvailableHeight({availableHeight})");
        }
    };
}

2. 在wwwroot/index.html中添加JS函数：

function updateAvailableHeight(height) {
    document.documentElement.style.setProperty('--available-height', `${height}px`);
}

3. 组件中使用自定义变量替代vh：
   将原来的height: 70vh改为：

.your-component {
    height: calc(var(--available-height) * 0.7);
}

方案2：使用Flex布局自适应空间 #

放弃固定比例的vh，改用Flex布局让容器自动填充剩余空间，软键盘弹出时会自动挤压内容区域：

.page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.main-content {
    flex: 1;
    overflow-y: auto; /* 内容超出时可滚动 */
}

.input-section {
    /* 输入框区域固定高度或自适应 */
    min-height: 60px;
}

这种方式无需额外代码，依赖CSS布局特性适配不同屏幕和软键盘状态，同时保持平板尺寸的适配性。

方案3：纯JS监听视口变化 #

通过JS监听窗口resize事件，实时更新可用高度变量，无需MAUI原生代码：

在wwwroot/index.html中添加：

window.addEventListener('resize', () => {
    document.documentElement.style.setProperty('--available-height', `${window.innerHeight}px`);
});
// 初始化时设置一次
updateAvailableHeight(window.innerHeight);

组件中同样使用calc(var(--available-height) * 0.X)替代vh单位。

方案4：调整安卓窗口软键盘模式 #

在AndroidManifest.xml中修改窗口软键盘行为，避免视口高度突变：

<activity android:name=".MainActivity"
          android:windowSoftInputMode="adjustPan">

adjustPan会让页面整体上移而非压缩视口，但可能导致顶部内容被遮挡，需结合布局调整（如设置顶部安全区）使用。

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