Xamarin.iOS中MvvmCross绑定图片URL为空时占位图不恢复问题

这个问题我之前也碰到过——默认的MvxImageViewLoader在绑定的URL为空值时，并不会自动触发占位图的恢复逻辑，因为它的默认逻辑只处理有效URL的加载，空值时就跳过了更新。下面给你几个实用的解决方案，按推荐程度排序：

方法一：使用值转换器（最符合MVVM原则） #

创建一个自定义值转换器，在URL为空时返回预设的占位图，正常URL时返回原地址。这样绑定逻辑会自动处理两种场景：

1. 定义转换器：

public class ImageUrlPlaceholderConverter : MvxValueConverter<string, object>
{
    // 这里可以把占位图作为参数传入，或者直接引用你的全局占位图
    protected override object Convert(string imageUrl, Type targetType, object parameter, CultureInfo culture)
    {
        if (string.IsNullOrWhiteSpace(imageUrl))
        {
            // 返回你的预设占位图对象
            return ImagePlaceHolder;
        }
        // URL有效时返回原地址
        return imageUrl;
    }
}

2. 在绑定的时候应用这个转换器：

var bindingSet = this.CreateBindingSet<YourView, YourViewModel>();
bindingSet.Bind(imageLoader)
          .To(vm => vm.YourImageUrlProperty)
          .WithConversion<ImageUrlPlaceholderConverter>();
bindingSet.Apply();

方法二：自定义MvxImageViewLoader #

如果你想直接修改加载逻辑，可以继承MvxImageViewLoader，重写LoadImage方法，在URL为空时手动设置占位图：

public class CustomImageViewLoader : MvxImageViewLoader
{
    private readonly MvxImageView _targetImageView;
    private readonly object _placeholderImage;

    public CustomImageViewLoader(Func<MvxImageView> imageViewAccessor, object placeholder) : base(imageViewAccessor)
    {
        _targetImageView = imageViewAccessor();
        _placeholderImage = placeholder;
    }

    public override void LoadImage(string url, MvxImageBundle bundle = null)
    {
        if (string.IsNullOrWhiteSpace(url))
        {
            // URL为空时直接设置占位图
            _targetImageView.Image = _placeholderImage;
            return;
        }
        // 正常URL走原加载逻辑
        base.LoadImage(url, bundle);
    }
}

然后替换原有的Loader初始化：

imageLoader = new CustomImageViewLoader(() => myImageView, ImagePlaceHolder);

方法三：ViewModel属性变更时手动触发（不推荐，耦合视图逻辑） #

如果上面两种方法不适合，也可以在ViewModel的URL属性变更时，通过消息通知视图重置占位图，但这种方式会让ViewModel和视图产生耦合，仅作为备选：

1. 在ViewModel中定义消息并发送：

public class ResetImagePlaceholderMessage : MvxMessage
{
    public ResetImagePlaceholderMessage(object sender) : base(sender) { }
}

private string _imageUrl;
public string ImageUrl
{
    get => _imageUrl;
    set
    {
        if (SetProperty(ref _imageUrl, value) && string.IsNullOrWhiteSpace(value))
        {
            // 发送重置占位图的消息
            Mvx.IoCProvider.Resolve<IMvxMessenger>().Publish(new ResetImagePlaceholderMessage(this));
        }
    }
}

2. 在视图中订阅消息并处理：

private IMvxSubscriptionToken _messageToken;

public override void ViewAppearing()
{
    base.ViewAppearing();
    _messageToken = Mvx.IoCProvider.Resolve<IMvxMessenger>()
        .Subscribe<ResetImagePlaceholderMessage>(_ => myImageView.Image = ImagePlaceHolder);
}

public override void ViewDisappearing()
{
    base.ViewDisappearing();
    Mvx.IoCProvider.Resolve<IMvxMessenger>().Unsubscribe<ResetImagePlaceholderMessage>(_messageToken);
}

推荐优先用方法一，它完全遵循MVVM的分离原则，代码也最简洁易维护。

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