MAUI iOS中Label的InputTransparent属性失效问题及解决方案咨询

我在MAUI里采用Label叠在Button上方的布局，之前Xamarin.Forms中设置InputTransparent=true可实现点击穿透Label触发Button的点击事件，但该属性在MAUI iOS中失效，仅Android端功能正常。测试代码如下：

<Grid>
  <Button Text="test button" Clicked="Button_Clicked"/>
  <Label Text="test label"
         InputTransparent="True"/>
</Grid>

以下是可行的替代方案，以自定义LabelHack控件为例：

1. XAML使用方式 #

<Grid>
  <Button Text="test button" Clicked="Button_Clicked"/>
  <hacks:LabelHack Text="test label"
                   HackInputTransparent="True"/>
</Grid>

2. 实现自定义LabelHack控件 #

共享项目中创建LabelHack类 #

using Microsoft.Maui.Controls;

namespace YourAppNamespace.Hacks;

public class LabelHack : Label
{
    public static readonly BindableProperty HackInputTransparentProperty =
        BindableProperty.Create(nameof(HackInputTransparent), typeof(bool), typeof(LabelHack), false);

    public bool HackInputTransparent
    {
        get => (bool)GetValue(HackInputTransparentProperty);
        set => SetValue(HackInputTransparentProperty, value);
    }
}

iOS平台自定义Handler #

在Platforms/iOS/Handlers目录下创建LabelHackHandler.cs：

using YourAppNamespace.Hacks;
using Microsoft.Maui.Handlers;
using UIKit;

namespace YourAppNamespace.Platforms.iOS.Handlers;

public class LabelHackHandler : LabelHandler
{
    protected override void ConnectHandler(UILabel platformView)
    {
        base.ConnectHandler(platformView);
        UpdateInputTransparency();
        VirtualView.PropertyChanged += VirtualView_PropertyChanged;
    }

    protected override void DisconnectHandler(UILabel platformView)
    {
        VirtualView.PropertyChanged -= VirtualView_PropertyChanged;
        base.DisconnectHandler(platformView);
    }

    private void VirtualView_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(LabelHack.HackInputTransparent))
        {
            UpdateInputTransparency();
        }
    }

    private void UpdateInputTransparency()
    {
        if (VirtualView is LabelHack labelHack)
        {
            // 禁用Label的用户交互，让点击穿透到下方控件
            PlatformView.UserInteractionEnabled = !labelHack.HackInputTransparent;
            PlatformView.ExclusiveTouch = false;
        }
    }
}

注册Handler到MauiProgram #

在MauiProgram.cs中添加Handler注册：

using YourAppNamespace.Hacks;
using YourAppNamespace.Platforms.iOS.Handlers;
using Microsoft.Maui.Hosting;

namespace YourAppNamespace;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

#if IOS
        builder.ConfigureMauiHandlers(handlers =>
        {
            handlers.AddHandler(typeof(LabelHack), typeof(LabelHackHandler));
        });
#endif

        return builder.Build();
    }
}

原理说明 #

MAUI iOS中InputTransparent属性未正确映射到原生UILabel的交互控制逻辑，通过自定义Handler直接设置UserInteractionEnabled为false，可让Label不再拦截触摸事件，点击会自然穿透到下方的Button。

内容的提问来源于stack exchange，提问作者Борис Крит