Blazor Hybrid+.NET MAUI安卓应用：底部输入框被虚拟键盘遮挡的动态解决方法

以下是几个动态适配的解决方案，替代手动添加空白区域的方式：

方案1：配置安卓软键盘行为（最简单） #

直接在安卓项目中设置窗口的软键盘调整模式，让系统自动调整页面布局：

在Platforms/Android/MainActivity.cs的OnCreate方法中添加：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    // 让页面随键盘弹出自动调整大小
    Window.SetSoftInputMode(Android.Views.SoftInput.AdjustResize | Android.Views.SoftInput.StateHidden);
}

这个设置会让安卓系统在键盘弹出时，自动压缩页面布局高度，Blazor WebView会跟着适配，底部输入框会自动上移到键盘上方。

方案2：Blazor端监听焦点，调用JS滚动到元素 #

如果方案1不生效（比如WebView的布局限制），可以通过Blazor与JS交互，在输入框获得焦点时主动滚动到目标元素：

1. 在wwwroot下创建scroll-helper.js文件：

window.scrollToFocusedElement = function(elementId) {
    const target = document.getElementById(elementId);
    if (target) {
        // 平滑滚动到元素，确保元素在可视区域居中
        target.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
}

2. 在Blazor页面中注入IJSRuntime，并给输入组件绑定焦点事件：

@inject IJSRuntime JS

<!-- 给输入框设置唯一ID，并绑定焦点事件 -->
<input type="text" id="messageInput" 
       @onfocus="() => JS.InvokeVoidAsync("scrollToFocusedElement", "messageInput")" />

<textarea id="commentTextarea" 
          @onfocus="() => JS.InvokeVoidAsync("scrollToFocusedElement", "commentTextarea")"></textarea>

3. 在_Host.cshtml或index.html中引入JS文件：

<script src="scroll-helper.js"></script>

方案3：监听键盘高度变化，动态调整页面底部内边距 #

通过MAUI原生代码监听安卓键盘高度，传递给Blazor页面动态调整底部padding：

1. 在MAUI的主页面（比如MainPage.xaml.cs）中添加键盘监听逻辑：

using Android.Graphics;
using Android.Webkit;
using Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        // 先开启布局调整
        On<Android>().SetWindowSoftInputMode(SoftInput.AdjustResize);
        
        // 获取BlazorWebView的原生安卓WebView实例
        if (BlazorWebView.Handler?.PlatformView is WebView nativeWebView)
        {
            nativeWebView.ViewTreeObserver.GlobalLayout += OnGlobalLayout;
        }
    }

    private void OnGlobalLayout(object sender, EventArgs e)
    {
        if (sender is not WebView webView) return;
        
        Rect visibleFrame = new Rect();
        webView.GetWindowVisibleDisplayFrame(visibleFrame);
        int screenHeight = webView.RootView.Height;
        int keyboardHeight = screenHeight - visibleFrame.Bottom;

        // 判断键盘是否弹出（高度超过屏幕15%视为弹出）
        bool isKeyboardVisible = keyboardHeight > screenHeight * 0.15;
        
        // 传递键盘高度到Blazor页面
        _ = BlazorWebView.EvaluateJavaScriptAsync(
            $"window.updateBottomPadding({isKeyboardVisible ? keyboardHeight : 0})");
    }
}

2. 在Blazor的JS中添加调整padding的方法：

window.updateBottomPadding = function(padding) {
    // 给页面根容器设置底部内边距
    document.querySelector(".page-container").style.paddingBottom = `${padding}px`;
}

3. 确保Blazor页面的根容器有合适的滚动属性：

<div class="page-container" style="height: 100vh; overflow-y: auto;">
    <!-- 页面内容 -->
    <input type="text" class="bottom-input" />
</div>

注意事项 #

• 确保BlazorWebView的布局是填充整个屏幕的，不要设置固定高度
• 测试时注意不同安卓版本的兼容性，部分旧版本可能需要额外处理
• 如果使用方案2或3，尽量给输入组件设置唯一ID，避免JS找不到元素

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