Xamarin Forms - 实现嵌套列表

Question

我有一个详细信息列表（篮子），每个详细信息中都有另一个列表（水果）。我想显示这些细节，我首先想到的是 ListView 中的 ListView。但是在查看建议时，给了我诸如 this 和 this 这样的结果，这主要表明在 Xamarin Forms 中实现并不是一个好主意。

目前，我使用 FreshMvvM 作为我的 MvvM 框架。至于我要显示的数据，我有一组篮子，每个篮子都有几个水果。我希望也显示那些属于特定篮子的水果的图像。请参考图片。

我想知道这个或其他方面是否有改进，关于如何实现我的列表或任何其他方式来实现上述行为的布局的任何其他想法。谢谢。

到目前为止我的代码：
XAML：

<ListView ItemsSource="{Binding Baskets}" HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="{Binding BasketID}" />
                    <ImageCell 
                        Text="{Binding FruitID}" 
                        Detail="{Binding FruitName}" 
                        ImageSource="{Binding ImageURL}">
                    </ImageCell>
                </StackLayout>
             </ViewCell>
         </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

类：

public class Basket
{
    public string BasketID{ get; set; }
    public string BasketName{ get; set; }
}

public class Fruit
{
    public string FruitID{ get; set; }
    public string FruitName{ get; set; }
    public string ImageURL{ get; set; }
}

Answer 1

您可以使用ListView 来遍历购物篮集合，同时使用像ItemsControl 这样的自定义控件来遍历水果集合。

它基本上是一个自定义控件，允许您通过ItemsSource 和ItemTemplate 属性将动态子支持添加到StackLayout。您可以按原样使用控件 - 除非您需要在其 StackLayout 上的 line 上将 Orientation 属性设置为 Horizontal。

示例用法：

<ListView ItemsSource="{Binding Baskets}" HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="{Binding BasketID}" />

                    <local:ItemsControl ItemsSource="{Binding Fruits}">
                        <local:ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Image Source="{Binding ImageURL}" />
                            </DataTemplate>
                        </local:ItemsControl.ItemTemplate>
                    </local:ItemsControl>
                </StackLayout>
             </ViewCell>
         </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

注意：ItemsControl 适合仅用于小型集合，因为虚拟化/回收支持不是很复杂。我假设，由于布局是水平的，Fruits 集合中的项目数量会相对较少。