如何解决.NET MAUI中Label控件HTML渲染跨平台异常问题？

.NET MAUI的Label控件TextType="Html"渲染依赖平台原生实现：Android基于TextView的HTML解析，iOS基于NSAttributedString的HTML解析，二者支持的标签集和解析逻辑有差异，以下是针对性修复方案：

1. 确认HTML标签兼容性 #

两端通用支持的基础标签包括：<b>（粗体）、<i>（斜体）、<u>（下划线）、<br>（换行）、<p>（段落）。避免使用复杂标签（如带内联样式的<span>、<div>）或未闭合标签，这类内容多数平台不会解析。同时确保绑定的texto是UTF-8编码的有效HTML片段，转义字符（如引号）处理正确。

2. iOS端修复HTML不渲染问题 #

iOS默认解析逻辑对纯HTML片段支持不足，可通过自定义渲染器强化解析能力：

步骤1：创建iOS自定义渲染器 #

在iOS平台项目中添加以下类：

using Microsoft.Maui.Controls.Platform.iOS;
using UIKit;
using Foundation;

namespace YourAppNamespace.Platforms.iOS;

public class HtmlLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);

        if (Control != null && Element != null && Element.TextType == TextType.Html)
        {
            var htmlContent = Element.Text;
            if (!string.IsNullOrEmpty(htmlContent))
            {
                var htmlData = NSData.FromString(htmlContent, NSStringEncoding.UTF8);
                var attributes = new NSAttributedStringDocumentAttributes { DocumentType = NSDocumentType.HTML };
                if (NSAttributedString.TryParse(htmlData, attributes, out var attributedText, out _))
                {
                    Control.AttributedText = attributedText;
                }
            }
        }
    }
}

步骤2：注册渲染器 #

在项目的MauiProgram.cs中添加渲染器注册代码：

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS
    handlers.AddHandler<Label, Platforms.iOS.HtmlLabelRenderer>();
#endif
});

3. Android端扩展HTML标签支持 #

Android默认HTML解析对标签支持有限，可通过HtmlCompat扩展支持范围：

步骤1：创建Android自定义渲染器 #

在Android平台项目中添加以下类：

using Microsoft.Maui.Controls.Platform.Android;
using Android.Text;
using AndroidX.Core.Text;

namespace YourAppNamespace.Platforms.Android;

public class HtmlLabelRenderer : LabelRenderer
{
    public HtmlLabelRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);

        if (Control != null && Element != null && Element.TextType == TextType.Html)
        {
            var htmlContent = Element.Text;
            if (!string.IsNullOrEmpty(htmlContent))
            {
                var formattedText = HtmlCompat.FromHtml(htmlContent, HtmlCompat.FromHtmlModeLegacy);
                Control.TextFormatted = formattedText;
            }
        }
    }
}

步骤2：注册渲染器 #

同样在MauiProgram.cs中添加注册代码：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<Label, Platforms.Android.HtmlLabelRenderer>();
#endif
});

4. 额外注意事项 #

• 不要在HTML中使用内联样式（如style="color: #ff0000"），平台原生解析不支持这类自定义样式，如需修改文本颜色、字体大小，直接通过Label的Style属性设置即可。
• 测试时先使用极简HTML片段（如<b>粗体测试</b><i>斜体测试</i>）验证渲染正常，再逐步添加复杂内容。

内容的提问来源于stack exchange，提问作者Isabelle Galvão