Xamarin Forms：如何不硬编码根URL拼接图片地址并绑定到ListView

我来帮你搞定这个不用硬编码根URL的图片地址拼接需求，其实有两种实用的方案，你可以根据自己的业务场景来选：

方案一：在数据模型中添加计算属性（适合单Item可能有不同根URL的场景） #

首先，你需要给ListView绑定的Item模型类增加两个属性：一个用来存储第一个Web服务返回的根URL，另一个是自动拼接完整地址的计算属性。同时要确保模型实现INotifyPropertyChanged，这样属性变化时UI能自动更新。

示例代码如下：

public class ImageItemModel : INotifyPropertyChanged
{
    private string _rootUrl;
    public string RootUrl
    {
        get => _rootUrl;
        set
        {
            _rootUrl = value;
            OnPropertyChanged();
            // 根URL变化时，通知完整URL属性更新
            OnPropertyChanged(nameof(FullImageUrl));
        }
    }

    private string _remainingUrl;
    public string RemainingUrl
    {
        get => _remainingUrl;
        set
        {
            _remainingUrl = value;
            OnPropertyChanged();
            OnPropertyChanged(nameof(FullImageUrl));
        }
    }

    // 自动拼接的完整图片URL计算属性
    public string FullImageUrl => $"{RootUrl}{RemainingUrl}";

    // 实现INotifyPropertyChanged接口的标准代码
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

接下来，当你获取到第一个Web服务的根URL后，把它赋值给每个ImageItemModel实例的RootUrl属性；第二个Web服务返回的剩余部分则赋值给RemainingUrl。

最后修改XAML中的Image绑定，直接绑定到这个计算属性即可：

<Image Source="{Binding FullImageUrl}" 
       HorizontalOptions="Start" 
       VerticalOptions="Start" 
       WidthRequest="50" />

方案二：使用MultiBinding（适合所有Item共用同一个根URL的场景） #

如果所有图片的根URL都是同一个，不需要每个Item单独存储，那可以把根URL放在页面的ViewModel里，然后用MultiBinding来拼接地址。

首先在ViewModel中添加根URL属性：

public class YourPageViewModel : INotifyPropertyChanged
{
    private string _globalRootUrl;
    public string GlobalRootUrl
    {
        get => _globalRootUrl;
        set
        {
            _globalRootUrl = value;
            OnPropertyChanged();
        }
    }

    // 其他属性和INotifyPropertyChanged实现代码...
}

然后在XAML中，给页面设置x:Name，比如x:Name="MainPage"，接着用MultiBinding来绑定根URL和剩余URL：

<Image HorizontalOptions="Start" VerticalOptions="Start" WidthRequest="50">
    <Image.Source>
        <MultiBinding StringFormat="{}{0}{1}">
            <!-- 绑定到ViewModel的全局根URL -->
            <Binding Path="GlobalRootUrl" Source="{x:Reference MainPage}" />
            <!-- 绑定到Item的剩余URL -->
            <Binding Path="RemainingUrl" />
        </MultiBinding>
    </Image.Source>
</Image>

这样就完全摆脱了硬编码的根URL，不管根URL怎么变，只要从第一个Web服务获取后赋值对应的属性，图片就能正确加载啦~

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