无法将图像绑定到 Xamarin 表单中的 ListView

Question

我知道有人就这个话题提出了几个问题，但我都没有找到解决方案。

“FileImageInfo”模型中的字段除了图片源之外都绑定好了。

我已经按照这方面的几个教程，我看不出我在做什么不同..

//code behind
var items = new List<FileImageInfo>();            
       
    for (int i = 0; i < images.Count; i++)
    {                
       items.Add(new FileImageInfo
         {
            FileType = "Jpeg",
            FileSize = 3.4,
            DateCreated = DateTime.Now,
            imageSource = "http://lorempixel.com/100/100/people/1" 
//ImageSource.FromStream(() => images[i].AsPNG().AsStream())
         });                 
    }                     
    Items.ItemsSource = items;  


//model
public class FileImageInfo
    {            
        public string FileType { get; set; }
        public double FileSize { get; set; }
        public DateTime DateCreated { get; set; }
        //public ImageSource imageSource { get; set; }
        public string imageSource;

        public FileImageInfo()
        {               
        }
    }

//Xaml

<StackLayout >
                <ListView BackgroundColor="White" x:Name="Items" HasUnevenRows="True">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>                            
                                <StackLayout Padding="5" Orientation="Horizontal">                                        
                                    <StackLayout HorizontalOptions="StartAndExpand">
                                        <StackLayout Orientation="Horizontal">                                                
                                            <Label Text="{Binding FileType}"></Label>
                                            <Label></Label>
                                            <Label Text="{Binding FileSize}"></Label>
                                        </StackLayout>
                                        <Label Text="{Binding DateCreated}"></Label>
                                        <Image Source="{Binding imageSource}" />
                                    </StackLayout>                               
                                    <Label Text="Status" VerticalOptions="Center"></Label>                          
                                </StackLayout>                            
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>

我已将问题缩小到本节。如果我在图像数组中硬编码一个值，例如 images[0] 它可以工作，但是当我使用迭代器变量 images[i] 时，什么都不会显示

for (int i = 0; i < images.Count; i++)
        {
            items.Add(new FileImageInfo
            {
                FileType = "Jpeg",
                FileSize = 3.4,
                DateCreated = DateTime.Now,
                imageSource = ImageSource.FromStream(() => 
images[i].AsPNG().AsStream())
        });                 
        }                     
        Items.ItemsSource = items;   

更新 - 正在发生，因为循环发生了一些奇怪的事情，我认为它与匿名方法有关

For example: if the for loop is: for(int i = 0; i < 1; i++) 

那么你会期望项目列表只包含一项 - 图片[0] 但奇怪的是它包含的项目是图像[1]。 就像 'i' 正在递增，然后在匿名方法中传递给 images[]

Answer 1

从FileImageInfo的共享代码，将imageSource的类型从string修改为ImageSource如下：

public class FileImageInfo
{
    public string FileType { get; set; }
    public double FileSize { get; set; }
    public DateTime DateCreated { get; set; }
    public ImageSource imageSource { get; set; }
    //public string imageSource { set; get; }

    public FileImageInfo()
    {
    }
}

然后为 ListView 添加ItemSource：

for (int i = 0; i < 5; i++)
{
    items.Add(new FileImageInfo
    {
        FileType = "Jpeg",
        FileSize = 3.4,
        DateCreated = DateTime.Now,
        imageSource = ImageSource.FromUri(new Uri("https://s1.ax1x.com/2020/07/31/aQhvss.png"))
    }) ;
}
Items.ItemsSource = items;

这里我将 shared uri 替换为 mine ，因为 shared uri 在 Image 中无效。它不会显示图像作为结果。建议使用https uri。错误日志如下：

ImageLoaderSourceHandler：无法检索图像或图像数据无效：Uri：http://lorempixel.com/100/100/people/1/

现在图像将显示：

注意：如果一定要使用http uri，可以使用FFImageLoading Nuget Pagckage显示图片，那么FileImageInfo类可以使用sting类型 imageSource.

public string imageSource { set; get; }

然后添加数据：

for (int i = 0; i < 5; i++)
{
    items.Add(new FileImageInfo
    {
        FileType = "Jpeg",
        FileSize = 3.4,
        DateCreated = DateTime.Now,
        imageSource = "https://s1.ax1x.com/2020/07/31/aQhvss.png"
    }) ;
}

在 Xaml 中使用：

xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"

<ffimageloading:CachedImage HorizontalOptions="Center"
                            VerticalOptions="Center"
                            DownsampleToViewSize="true"
                            Source="{Binding imageSource}"/>