Xamarin.Forms iOS单选按钮自定义渲染器实现问题：如何重写控件并独立修改背景色与选中态颜色

首先要明确：Xamarin.Forms 在 iOS 平台并没有提供现成的 RadioButtonRenderer 类，因为它底层是用原生 UIButton 来实现单选按钮的。不过我们可以通过继承 ViewRenderer<ExtendedRadioButton, UIButton> 来实现和你 Android 端等效的自定义渲染，完美解决背景色修改、选中状态图标可见性以及深色模式强制浅色的问题。

第一步：Forms 端自定义控件（如果你还没写的话） #

先确保你的共享项目里有这个自定义的 ExtendedRadioButton，用来承载自定义的 ButtonColor 属性：

using Xamarin.Forms;

namespace StorefrontRetail.Custom
{
    public class ExtendedRadioButton : RadioButton
    {
        public static readonly BindableProperty ButtonColorProperty =
            BindableProperty.Create(nameof(ButtonColor), typeof(Color), typeof(ExtendedRadioButton), Color.Default);

        public Color ButtonColor
        {
            get => (Color)GetValue(ButtonColorProperty);
            set => SetValue(ButtonColorProperty, value);
        }
    }
}

第二步：iOS 端自定义渲染器实现 #

这部分是核心，对应你 Android 端的渲染器逻辑，解决你遇到的所有问题：

using StorefrontRetail.Custom;
using StorefrontRetail.iOS.Custom;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(ExtendedRadioButton), typeof(ExtendedRadioButtonRenderer))]
namespace StorefrontRetail.iOS.Custom
{
    public class ExtendedRadioButtonRenderer : ViewRenderer<ExtendedRadioButton, UIButton>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ExtendedRadioButton> e)
        {
            base.OnElementChanged(e);

            // 清理旧控件的事件监听
            if (e.OldElement != null)
            {
                Control.TouchUpInside -= OnRadioButtonTapped;
            }

            if (e.NewElement != null)
            {
                if (Control == null)
                {
                    // 创建原生UIButton作为单选按钮的载体
                    var radioButton = new UIButton(UIButtonType.Custom);
                    SetNativeControl(radioButton);

                    // 初始化单选按钮的状态图标
                    UpdateRadioButtonImages();
                    // 设置初始背景色
                    UpdateBackgroundColor();
                    // 添加点击事件绑定
                    radioButton.TouchUpInside += OnRadioButtonTapped;
                }

                // 同步Forms控件的初始选中状态
                Control.Selected = Element.IsChecked;
                // 初始化按钮图标颜色
                UpdateButtonColor();
            }
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            // 监听选中状态变化
            if (e.PropertyName == ExtendedRadioButton.IsCheckedProperty.PropertyName)
            {
                Control.Selected = Element.IsChecked;
            }
            // 监听自定义按钮颜色变化
            else if (e.PropertyName == ExtendedRadioButton.ButtonColorProperty.PropertyName)
            {
                UpdateButtonColor();
            }
            // 监听背景色变化
            else if (e.PropertyName == VisualElement.BackgroundColorProperty.PropertyName)
            {
                UpdateBackgroundColor();
            }
        }

        public override void TraitCollectionDidChange(UITraitCollection previousTraitCollection)
        {
            base.TraitCollectionDidChange(previousTraitCollection);

            // 当系统主题（浅色/深色）切换时，重新更新图标，解决强制浅色模式下的显示异常
            if (TraitCollection.UserInterfaceStyle != previousTraitCollection?.UserInterfaceStyle)
            {
                UpdateRadioButtonImages();
            }
        }

        // 处理单选按钮的点击事件，同步到Forms控件
        private void OnRadioButtonTapped(object sender, System.EventArgs e)
        {
            Element.IsChecked = !Element.IsChecked;
        }

        // 更新单选按钮的选中/未选中图标
        private void UpdateRadioButtonImages()
        {
            // 使用iOS系统原生图标，确保主题兼容性
            var unselectedImage = UIImage.SystemImageNamed("circle");
            var selectedImage = UIImage.SystemImageNamed("circle.fill");

            // 设置图标为模板模式，这样可以通过TintColor修改颜色（和Android的ButtonTintList逻辑一致）
            unselectedImage = unselectedImage?.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
            selectedImage = selectedImage?.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);

            Control.SetImage(unselectedImage, UIControlState.Normal);
            Control.SetImage(selectedImage, UIControlState.Selected);

            // 调整图标和文本的间距（如果你的单选按钮带文本的话）
            Control.ImageEdgeInsets = new UIEdgeInsets(0, 0, 0, 8);
            Control.TitleEdgeInsets = new UIEdgeInsets(0, 8, 0, 0);
        }

        // 更新按钮图标的颜色（对应Android的ButtonTintList）
        private void UpdateButtonColor()
        {
            var buttonColor = Element.ButtonColor;
            Control.TintColor = buttonColor != Color.Default 
                ? buttonColor.ToUIColor() 
                : UIColor.SystemBlueColor; // 默认用系统蓝色
        }

        // 更新按钮背景色
        private void UpdateBackgroundColor()
        {
            var bgColor = Element.BackgroundColor;
            Control.BackgroundColor = bgColor != Color.Default 
                ? bgColor.ToUIColor() 
                : UIColor.Clear; // 默认透明背景
        }
    }
}

关键细节说明 #

1. 为什么用UIButton：Xamarin.Forms的RadioButton在iOS底层是基于UIButton实现的，用它做载体能保持和默认控件的兼容性，同时方便自定义。
2. 图标模板模式：通过ImageWithRenderingMode.AlwaysTemplate把系统图标变成可着色的模板，这样我们可以用TintColor统一控制选中/未选中图标的颜色，和Android的ButtonTintList效果完全一致。
3. 主题适配：重写TraitCollectionDidChange方法监听系统主题变化，确保在强制浅色模式时，图标颜色不会因为背景变白而不可见——我们的TintColor会强制设置图标颜色（比如蓝色），和白色背景形成对比。
4. 属性同步：通过监听Forms控件的属性变化，实时同步到原生UIButton，保证两端状态一致。

这样实现后，你的iOS单选按钮就能和Android端表现一致：修改背景色不影响选中图标颜色，强制浅色模式下选中图标也能清晰显示。

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