Maui Blazor中如何实现键盘激活时自动增高高度避免内容被遮挡？

一、开启MAUI原生键盘布局调整 #

先通过平台配置让系统自动响应键盘弹出事件，这是基础适配：

• Android：在Platforms/Android/AndroidManifest.xml中，给MainActivity添加adjustResize属性，让系统自动调整布局高度：

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

• iOS：在Platforms/iOS/Info.plist中确保开启视图控制器的状态栏适配，iOS会自动处理键盘布局：

<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

二、Blazor全局布局动态适配 #

通过JS互操作监听键盘高度变化，动态调整页面最小高度，实现自动增高页面的需求：

1. 在wwwroot/js下新建keyboard-helper.js，添加键盘监听逻辑：

window.KeyboardHelper = {
    init: function (dotNetRef) {
        // iOS键盘显示事件
        window.addEventListener('keyboardDidShow', (e) => {
            const keyboardHeight = window.screen.height - e.keyboardFrameEnd.y;
            dotNetRef.invokeMethodAsync('OnKeyboardHeightChanged', keyboardHeight);
        });
        // iOS键盘隐藏事件
        window.addEventListener('keyboardDidHide', () => {
            dotNetRef.invokeMethodAsync('OnKeyboardHeightChanged', 0);
        });
        // Android 窗口 resize 事件（键盘弹出会触发）
        window.addEventListener('resize', () => {
            const keyboardHeight = window.screen.height - window.innerHeight;
            dotNetRef.invokeMethodAsync('OnKeyboardHeightChanged', keyboardHeight);
        });
    }
};

window.setElementStyle = function(element, prop, value) {
    element.style[prop] = value;
};

2. 在MainLayout.razor中引入脚本并实现动态高度调整：

@inject IJSRuntime JSRuntime
@implements IDisposable

<div class="page-container" style="min-height: @_minHeight">
    @Body
</div>

@code {
    private DotNetObjectReference<MainLayout>? _dotNetRef;
    private string _minHeight = "100vh";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("import", "./js/keyboard-helper.js");
            _dotNetRef = DotNetObjectReference.Create(this);
            await JSRuntime.InvokeVoidAsync("KeyboardHelper.init", _dotNetRef);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    [JSInvokable]
    public void OnKeyboardHeightChanged(int keyboardHeight)
    {
        _minHeight = keyboardHeight > 0 
            ? $"calc(100vh + {keyboardHeight}px)" 
            : "100vh";
        StateHasChanged();
    }

    public void Dispose()
    {
        _dotNetRef?.Dispose();
    }
}

三、MudBlazor弹窗/对话框适配 #

针对MudDialog中的输入框，通过监听键盘高度动态调整对话框位置：

@inject IJSRuntime JSRuntime
@implements IDisposable
@ref="DialogRef"

<MudDialog>
    <DialogContent>
        <MudTextField Label="请输入内容" @bind-Value="InputContent" />
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">取消</MudButton>
        <MudButton OnClick="Confirm" Color="Color.Primary">确认</MudButton>
    </DialogActions>
</MudDialog>

@code {
    private DotNetObjectReference<YourDialogComponent>? _dotNetRef;
    private ElementReference DialogRef;
    private string InputContent { get; set; } = string.Empty;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("import", "./js/keyboard-helper.js");
            _dotNetRef = DotNetObjectReference.Create(this);
            await JSRuntime.InvokeVoidAsync("KeyboardHelper.init", _dotNetRef);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    [JSInvokable]
    public async Task OnKeyboardHeightChanged(int keyboardHeight)
    {
        var bottomMargin = keyboardHeight > 0 ? $"{keyboardHeight + 20}px" : "20px";
        await JSRuntime.InvokeVoidAsync("setElementStyle", DialogRef, "marginBottom", bottomMargin);
    }

    private void Cancel() => MudDialog.Cancel();
    private void Confirm() => MudDialog.Close(DialogResult.Ok(InputContent));

    public void Dispose()
    {
        _dotNetRef?.Dispose();
    }
}

四、快速适配方案：使用MudScrollView #

如果页面内容可滚动，直接用MudScrollView包裹全部内容，键盘弹出时会自动滚动到输入框所在位置：

<MudScrollView Style="height: 100vh;">
    <!-- 页面所有内容 -->
    <div style="padding-bottom: 80px;">
        <!-- 其他组件 -->
    </div>
    <!-- 底部输入框 -->
    <MudTextField Label="底部输入" @bind-Value="BottomInput" />
</MudScrollView>

内容的提问来源于stack exchange，提问作者Zoltán