如何实现具有垂直组和水平项目的 .Net Maui CollectionView 布局

Question

我正在尝试在应用程序中实现某种外观，以分类方式显示项目。 据我所知，CollectionView 允许我们准确地做到这一点，并且我已经在各种布局中成功地使用了它。问题是，我正在尝试实现一种布局，但在任何地方都找不到描述，因此需要帮助/指导。

CollectionView 允许我们选择网格或线性布局，并允许我们对对象进行分组。我想要实现的是，一组项目显示为线性水平集合，而类别则以垂直方式一个接一个地放置。 （如附图所示）。

我已经尝试了 CollectionView 的所有可能组合（据我所知），但无法实现这一点，因此我在考虑此时我是否必须完全手动创建这个东西，或者只是为每个类别创建多个 CollectionView 实例.

如有任何帮助，我们将不胜感激。 P.S：对于 .Net maui 和移动开发来说还是个新手。但确实有xaml知识。

我尝试过使用 isgrouped=true 和 groupheaderlayout 来创建一个主集合视图。然后作为项目模板，我尝试创建另一个集合视图，它再次接受该组并作为普通的水平集合视图工作，但它不起作用。

Answer 1

我已经通过执行以下操作成功做到了：

1. 在 ItemsGroupModel 中声明相同对象类型的列表并用原始对象类型填充它。

public class AnimalsCategory : List<Animal>
{
    public string GroupName { get; set; }
    public List<Animal> Animals { get; set; }
    public AnimalsCategory(string groupName, List<Animal> animals, string) : base(animals)
    {
        Animals = new List<Animal>(animals);
    }
}

2. ViewModel 是安静的基本模型，并遵循推荐的 .Net Maui 风格 （注意：我使用 Mvvm Toolkit 来处理 ObservableProperty 并放置属性的值而不是字段！）

public partial class AnimalsViewModel
{
    [ObservableProperty]
    List<ShopItemsCategory> categories;
    
    public AnimalsViewModel(DataService ds)
    {
        Categories = ds.GetAnimalsInCategories();
    }
}

3. 我确保访问子列表内 XAML 中新定义的属性“Animals”。

<RefreshView Grid.Row="1">
  <ScrollView>
      <CollectionView ItemsSource="{Binding Categories}">
          <CollectionView.ItemTemplate>
              <DataTemplate x:DataType="model:AnimalsCategory ">
                  <StackLayout Orientation="Vertical">
                      <Label Text="{Binding GroupName}" FontAttributes="Bold" FontSize="28"/>
                      <CollectionView ItemsSource="{Binding Animals}" ItemsLayout="HorizontalList" Background="Transparent" Margin="5">
                          <CollectionView.ItemTemplate>
                              <DataTemplate x:DataType="model:Animal">
                                  <Frame CornerRadius="20"
                                                Margin="5,5,5,5"
                                                HasShadow="True"
                                                BackgroundColor="#FEF6FF"
                                                   WidthRequest="150"
                                                   HeightRequest="200">
                                      <StackLayout Orientation="Vertical" 
                                           Grid.Row="1" Margin="0,0,0,0">
                                          <Image Source="{Binding Image}" 
                                            Grid.Row="0" HeightRequest="60" 
                                             WidthRequest="60" 
                                             Margin="0,0,0,5"/>
                                          <Line Stroke="LightGray" X2="300" 
                                            StrokeThickness="2"/>
                                          <Label Text="{Binding Name}" > 
                                            Margin="0,5,0,0" 
                                             FontAttributes="Bold" 
                                              VerticalOptions="Center"
                                             HorizontalOptions="Center"/>
                                           <Label Text="{Binding > 
                                        Description}" Margin="0,10,0,0"/>
                                      </StackLayout>
                                  </Frame>
                              </DataTemplate>
                          </CollectionView.ItemTemplate>
                      </CollectionView>
                  </StackLayout>
              </DataTemplate>
          </CollectionView.ItemTemplate>
      </CollectionView>
  </ScrollView>
</RefreshView>