.NET Maui混合应用快速触摸导致触屏功能崩溃

问题概述 #

在.NET Maui Blazor混合应用启动加载阶段，快速反复触摸应用窗口区域会触发触屏功能失效，但鼠标操作仍正常的异常。复现步骤：

• 创建新的Maui Blazor项目
• 部署至平板设备
• 启动阶段快速反复触摸屏幕区域

解决方案 #

方案1：初始化完成前添加触屏拦截遮层 #

在Blazor的布局组件中添加全屏遮层，拦截所有触屏/点击事件，直到应用初始化完成：

@inherits LayoutComponentBase

@if (!isInitialized)
{
    <!-- 全屏遮层，拦截所有触摸和点击事件 -->
    <div style="position: fixed; inset: 0; background: rgba(245,245,245,0.8); z-index: 9999; display: flex; align-items: center; justify-content: center;"
         @onclick:preventDefault 
         @ontouchstart:preventDefault 
         @onmousedown:preventDefault>
        <p>加载中...</p>
    </div>
}

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>
        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code {
    private bool isInitialized;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 等待核心初始化完成，可替换为实际的初始化完成信号（如服务加载、数据准备）
            await Task.Delay(600); 
            isInitialized = true;
            StateHasChanged();
        }
    }
}

原理：通过遮层在初始化阶段拦截所有输入事件，避免触发未就绪的Blazor/Maui事件处理逻辑，防止事件队列混乱导致后续触屏失效。

方案2：原生平台级触摸拦截 #

针对Android/iOS平台，通过原生代码拦截启动阶段的触摸事件：

Android平台修改（MainActivity.cs）

using Android.Views;

namespace YourAppName.Platforms.Android;

[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true)]
public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Bundle? savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        // 设置触摸拦截器
        Window.DecorView.SetOnTouchListener(new StartupTouchInterceptor());
    }

    private class StartupTouchInterceptor : Java.Lang.Object, View.IOnTouchListener
    {
        public bool OnTouch(View? v, MotionEvent? e)
        {
            // 初始化完成前拦截所有触摸事件
            return !App.IsAppInitialized;
        }
    }
}

App.xaml.cs添加初始化标记

public partial class App : Application
{
    public static bool IsAppInitialized { get; private set; }

    public App()
    {
        InitializeComponent();
        MainPage = new MainPage();
    }

    protected override async void OnStart()
    {
        base.OnStart();
        // 执行应用核心初始化逻辑
        await InitializeCoreServicesAsync();
        IsAppInitialized = true;
    }

    private async Task InitializeCoreServicesAsync()
    {
        // 替换为实际的初始化操作（如配置加载、依赖注入初始化）
        await Task.Delay(1000);
    }
}

原理：利用原生平台的触摸事件拦截能力，从底层阻止启动阶段的无效触摸事件进入Maui/Blazor事件系统，从根源避免事件冲突。

方案3：确保初始化逻辑异步非阻塞 #

检查应用启动时的初始化代码，避免在UI线程执行同步阻塞操作：

• 将所有耗时初始化操作放入async方法，使用await执行
• 避免在OnInitialized/OnInitializedAsync中注册依赖UI就绪的触屏事件，改用OnAfterRenderAsync

验证方法 #

按照复现步骤测试：启动应用时快速反复触摸屏幕，初始化完成前遮层/拦截器会阻止事件传递，初始化完成后触屏功能正常，无失效现象。

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