MAUI Blazor App虚拟键盘覆盖输入框问题求助

方案一：配置原生平台窗口属性 #

这是最基础的系统级适配方式，让系统自动调整页面布局避开键盘：

• Android：打开Platforms/Android/AndroidManifest.xml，在<activity>标签中添加android:windowSoftInputMode="adjustResize"，示例代码：

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

  该属性会让Android系统在键盘弹出时自动压缩窗口高度，页面内容会随之滚动，确保输入框处于可视区域。

• iOS：打开Platforms/iOS/Info.plist，添加UIViewControllerBasedStatusBarAppearance并设置为YES，同时通过自定义页面处理器监听键盘事件调整内边距：
  先创建自定义处理器：

  public class CustomPageHandler : PageHandler
  {
      protected override void ConnectHandler(Maui.UIKit.UIViewController platformView)
      {
          base.ConnectHandler(platformView);
          NSNotificationCenter.DefaultCenter.AddObserver(UIKeyboard.WillShowNotification, OnKeyboardShow);
          NSNotificationCenter.DefaultCenter.AddObserver(UIKeyboard.WillHideNotification, OnKeyboardHide);
      }
  
      private void OnKeyboardShow(NSNotification notification)
      {
          if (notification.UserInfo.TryGetValue(UIKeyboard.FrameEndUserInfoKey, out var value) && value is NSValue frameValue)
          {
              var keyboardHeight = frameValue.CGRectValue.Height;
              (VirtualView as Microsoft.Maui.Controls.Page).Padding = new Thickness(0, 0, 0, keyboardHeight);
          }
      }
  
      private void OnKeyboardHide(NSNotification notification)
      {
          (VirtualView as Microsoft.Maui.Controls.Page).Padding = new Thickness(0);
      }
  }
  

  然后在Platforms/iOS/Program.cs中注册处理器：

  builder.ConfigureMauiHandlers(handlers =>
  {
      handlers.AddHandler<Microsoft.Maui.Controls.Page, CustomPageHandler>();
  });
  

方案二：Blazor端焦点触发滚动 #

如果原生配置未生效，可在Blazor组件中通过JS主动将输入框滚动到可视区域：

1. 在Blazor页面中给输入框绑定焦点事件和引用：

<input type="password" @ref="passwordInput" @onfocus="ScrollToInput" />

@code {
    private ElementReference passwordInput;
    [Inject] private IJSRuntime JSRuntime { get; set; }

    private async Task ScrollToInput()
    {
        await JSRuntime.InvokeVoidAsync("scrollToElement", passwordInput);
    }
}

2. 在wwwroot/js/app.js中添加滚动逻辑：

function scrollToElement(element) {
    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

当密码框获取焦点时，页面会平滑滚动至输入框居中显示。

方案三：全局监听键盘事件统一适配 #

通过跨平台服务监听键盘状态，统一调整页面布局：

1. 定义键盘服务接口：

public interface IKeyboardService
{
    event EventHandler<double> KeyboardHeightChanged;
}

2. 在Android和iOS分别实现该服务，监听键盘弹出/收起事件并传递高度值：
   • Android端通过ViewTreeObserver.IOnGlobalLayoutListener计算键盘高度
   • iOS端通过UIKeyboardWillShowNotification获取键盘高度
3. 在Blazor页面注入服务并订阅事件，通过JS调整页面容器内边距：

[Inject] private IKeyboardService KeyboardService { get; set; }
[Inject] private IJSRuntime JSRuntime { get; set; }

protected override void OnInitialized()
{
    base.OnInitialized();
    KeyboardService.KeyboardHeightChanged += (_, height) =>
    {
        JSRuntime.InvokeVoidAsync("setPageBottomPadding", height);
    };
}

对应的JS函数：

function setPageBottomPadding(height) {
    document.getElementById('main-container').style.paddingBottom = `${height}px`;
}

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