MAUI中如何本地化Picker的确定与取消按钮？

你当前的实现存在几个适配MAUI的关键问题，以下是修复后的完整方案：

问题分析 #

1. 自定义类继承Picker属于过度封装，MAUI中附加属性+路由Effect的组合更灵活，无需继承控件
2. Android端直接拦截Control.Click会和MAUI原生Picker的弹窗逻辑冲突，需通过拦截原生对话框创建来修改按钮文本
3. iOS端在OnAttached时InputAccessoryView可能尚未初始化，且直接替换自定义视图的方式不稳定，应直接修改原生按钮标题
4. 附加属性的SetTintColor方法命名错误，应为SetDoneButtonText

1. 重构附加属性与路由Effect #

无需继承Picker，单独创建附加属性类：

public static class PickerLocalizationEffect
{
    public static readonly BindableProperty DoneButtonTextProperty =
        BindableProperty.CreateAttached(
            "DoneButtonText",
            typeof(string),
            typeof(PickerLocalizationEffect),
            string.Empty,
            propertyChanged: OnDoneButtonTextChanged);

    public static string GetDoneButtonText(BindableObject element)
    {
        return (string)element.GetValue(DoneButtonTextProperty);
    }

    public static void SetDoneButtonText(BindableObject element, string value)
    {
        element.SetValue(DoneButtonTextProperty, value);
    }

    private static void OnDoneButtonTextChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is View view && newValue is string text)
        {
            // 移除旧Effect
            var existingEffect = view.Effects.FirstOrDefault(e => e is PickerDoneButtonEffect);
            if (existingEffect != null)
                view.Effects.Remove(existingEffect);

            // 添加新Effect
            if (!string.IsNullOrEmpty(text))
                view.Effects.Add(new PickerDoneButtonEffect(text));
        }
    }

    public class PickerDoneButtonEffect : RoutingEffect
    {
        public string ButtonText { get; }

        public PickerDoneButtonEffect(string buttonText) 
            : base($"YourCompany.PickerDoneButtonEffect")
        {
            ButtonText = buttonText;
        }
    }
}

2. Android平台Effect修复 #

通过监听Picker的Focused事件拦截原生弹窗，替换为自定义本地化对话框：

[assembly: ResolutionGroupName("YourCompany")]
[assembly: ExportEffect(typeof(PickerLocalizationAndroidEffect), nameof(PickerLocalizationEffect.PickerDoneButtonEffect))]
namespace YourAppName.Platforms.Android.Effects;

public class PickerLocalizationAndroidEffect : PlatformEffect
{
    private AlertDialog? _customDialog;
    private PickerLocalizationEffect.PickerDoneButtonEffect? _effect;
    private bool _isHandlingDialog;

    protected override void OnAttached()
    {
        _effect = Element.Effects.FirstOrDefault(e => e is PickerLocalizationEffect.PickerDoneButtonEffect) 
            as PickerLocalizationEffect.PickerDoneButtonEffect;

        if (_effect != null && Element is Picker picker)
        {
            picker.Focused += OnPickerFocused;
        }
    }

    private void OnPickerFocused(object? sender, FocusEventArgs e)
    {
        if (_isHandlingDialog || sender is not Picker picker || string.IsNullOrEmpty(_effect?.ButtonText))
            return;

        _isHandlingDialog = true;
        e.Handled = true; // 阻止原生弹窗

        var activity = Platform.CurrentActivity;
        if (activity == null)
            return;

        using var builder = new AlertDialog.Builder(activity);

        // 保留原Picker标题样式
        if (!picker.IsSet(Picker.TitleColorProperty))
        {
            builder.SetTitle(picker.Title ?? string.Empty);
        }
        else
        {
            var titleSpan = new SpannableString(picker.Title ?? string.Empty);
            titleSpan.SetSpan(
                new ForegroundColorSpan(picker.TitleColor.ToAndroid()),
                0,
                titleSpan.Length(),
                SpanTypes.ExclusiveExclusive);
            builder.SetTitle(titleSpan);
        }

        // 设置选项列表
        var items = picker.Items.ToArray();
        builder.SetItems(items, (s, args) =>
        {
            picker.SelectedIndex = args.Which;
            _customDialog?.Dismiss();
        });

        // 设置本地化取消按钮
        builder.SetNegativeButton(_effect.ButtonText, (s, args) => _customDialog?.Dismiss());

        _customDialog = builder.Create();
        _customDialog.SetCanceledOnTouchOutside(true);
        _customDialog.DismissEvent += (s, args) =>
        {
            picker.Unfocus();
            _customDialog?.Dispose();
            _customDialog = null;
            _isHandlingDialog = false;
        };

        _customDialog.Show();
    }

    protected override void OnDetached()
    {
        if (Element is Picker picker)
        {
            picker.Focused -= OnPickerFocused;
        }
        _customDialog?.Dispose();
        _customDialog = null;
    }
}

3. iOS平台Effect修复 #

监听Picker激活事件，延迟获取输入工具栏并修改原生Done按钮标题：

[assembly: ResolutionGroupName("YourCompany")]
[assembly: ExportEffect(typeof(PickerLocalizationIOSEffect), nameof(PickerLocalizationEffect.PickerDoneButtonEffect))]
namespace YourAppName.Platforms.iOS.Effects;

public class PickerLocalizationIOSEffect : PlatformEffect
{
    private PickerLocalizationEffect.PickerDoneButtonEffect? _effect;

    protected override void OnAttached()
    {
        _effect = Element.Effects.FirstOrDefault(e => e is PickerLocalizationEffect.PickerDoneButtonEffect) 
            as PickerLocalizationEffect.PickerDoneButtonEffect;

        if (_effect != null && Element is Picker picker)
        {
            picker.Focused += OnPickerFocused;
        }
    }

    private void OnPickerFocused(object? sender, FocusEventArgs e)
    {
        if (Control is UITextField textField && !string.IsNullOrEmpty(_effect?.ButtonText))
        {
            // 延迟确保工具栏已初始化
            Task.Run(async () =>
            {
                await Task.Delay(100);
                MainThread.BeginInvokeOnMainThread(() =>
                {
                    if (textField.InputAccessoryView is UIToolbar toolbar)
                    {
                        // 找到Done按钮（通常是最后一个工具栏项）
                        if (toolbar.Items?.LastOrDefault() is UIBarButtonItem doneButton)
                        {
                            doneButton.Title = _effect.ButtonText;
                        }
                    }
                });
            });
        }
    }

    protected override void OnDetached()
    {
        if (Element is Picker picker)
        {
            picker.Focused -= OnPickerFocused;
        }
    }
}

4. 使用方式 #

在XAML中直接给原生Picker附加属性：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppName"
             x:Class="YourAppName.MainPage">

    <Picker Title="选择选项"
            local:PickerLocalizationEffect.DoneButtonText="确定"/>

</ContentPage>

关键注意事项 #

• 替换代码中的YourCompany和YourAppName为实际的公司名和项目命名空间
• Android端通过Focused事件拦截原生弹窗，避免与MAUI内部逻辑冲突
• iOS端延迟获取工具栏是因为输入附件视图在控件首次激活后才会创建

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