ListView中自定义HTML标签渲染器滚动后格式丢失问题求助

这个问题的核心原因是你使用了RecycleElement缓存策略——ListView会复用已经滚出屏幕的ViewCell，而你的自定义渲染器只在OnElementChanged方法中处理了一次HTML转换，当cell被复用时，绑定的Text属性更新但渲染器没有重新执行转换逻辑，导致原始HTML标签直接显示出来。

下面是具体的修复方案：

步骤1：修改iOS自定义渲染器 #

重写OnElementPropertyChanged方法，监听Label.TextProperty的变化，每次文本更新时重新生成富文本：

[assembly: ExportRenderer(typeof(LabelHtmlView), typeof(LabelHtmlCustomRenderer))]
namespace SgatMobileV2.iOS {
    public class LabelHtmlCustomRenderer : LabelRenderer {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e) {
            base.OnElementChanged(e);
            // 初始化时处理一次HTML转换
            UpdateHtmlText();
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) {
            base.OnElementPropertyChanged(sender, e);
            // 当Text属性发生变化时，重新执行HTML转换
            if (e.PropertyName == Label.TextProperty.PropertyName) {
                UpdateHtmlText();
            }
        }

        private void UpdateHtmlText() {
            var view = Element as LabelHtmlView;
            if (view == null || Control == null) return;

            var attributes = new NSAttributedStringDocumentAttributes();
            var nsError = new NSError();
            attributes.DocumentType = NSDocumentType.HTML;
            Control.AttributedText = new NSAttributedString(view.Text, attributes, ref nsError);
        }
    }
}

步骤2：Android端的对应修复 #

Android端的问题逻辑完全一致，同样需要监听Text属性变化，在属性更新时重新加载HTML内容。示例代码如下：

[assembly: ExportRenderer(typeof(LabelHtmlView), typeof(LabelHtmlCustomRenderer))]
namespace SgatMobileV2.Droid {
    public class LabelHtmlCustomRenderer : LabelRenderer {
        public LabelHtmlCustomRenderer(Context context) : base(context) { }

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

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == Label.TextProperty.PropertyName) {
                UpdateHtmlText();
            }
        }

        private void UpdateHtmlText() {
            var view = Element as LabelHtmlView;
            if (view == null || Control == null) return;

            // 适配不同Android版本的HTML解析逻辑
            if (Build.VERSION.SdkInt >= BuildVersionCodes.N) {
                Control.TextFormatted = Html.FromHtml(view.Text, FromHtmlOptions.ModeLegacy);
            } else {
                Control.TextFormatted = Html.FromHtml(view.Text);
            }
        }
    }
}

额外注意事项 #

• 确保你的LabelHtmlView继承自Label，这样TextProperty的监听逻辑才能正常触发。
• 如果你的HTML内容包含自定义样式，可能需要额外扩展NSAttributedString（iOS）或SpannableString（Android）的样式处理，但基础的HTML标签渲染问题已经可以通过上述代码解决。

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