如何实现.NET MAUI CollectionView垂直分组+水平项布局？

你需要的布局可以通过主CollectionView分组+组内嵌套横向CollectionView实现，之前没生效大概率是绑定或布局配置的细节问题，下面是完整可运行的实现步骤：

1. 定义分组数据源结构 #

先创建层级清晰的分组模型和子项模型，确保数据源结构正确：

// 子项模型
public class ItemModel
{
    public string Name { get; set; }
    public string Icon { get; set; } // 可选，用于展示图标类内容
}

// 分组模型，继承自List<ItemModel>便于直接绑定子项
public class GroupModel : List<ItemModel>
{
    public string GroupTitle { get; set; }

    public GroupModel(string title, List<ItemModel> items) : base(items)
    {
        GroupTitle = title;
    }
}

2. XAML布局实现 #

主CollectionView开启分组，组头显示分类标题，组的ItemTemplate里嵌套横向CollectionView承载水平排列的子项：

<CollectionView 
    IsGrouped="True"
    ItemsSource="{Binding GroupedItems}">
    <!-- 组头模板：显示分类标题 -->
    <CollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <Label 
                Text="{Binding GroupTitle}"
                FontSize="Title"
                FontAttributes="Bold"
                Margin="10,15,0,5"/>
        </DataTemplate>
    </CollectionView.GroupHeaderTemplate>

    <!-- 分组项模板：每个分组对应一个横向滚动的CollectionView -->
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <CollectionView 
                ItemsSource="{Binding}"
                HorizontalOptions="Fill"
                HeightRequest="120"> <!-- 根据子项高度设置合适值 -->
                <!-- 强制设置横向布局 -->
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"/>
                </CollectionView.ItemsLayout>

                <!-- 子项模板：自定义每个子项的外观 -->
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Frame 
                            WidthRequest="80"
                            CornerRadius="8"
                            Padding="5">
                            <VerticalStackLayout>
                                <!-- 替换为你的子项内容，比如图标+文字 -->
                                <Image Source="{Binding Icon}" HeightRequest="40"/>
                                <Label Text="{Binding Name}" HorizontalTextAlignment="Center"/>
                            </VerticalStackLayout>
                        </Frame>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

3. 后台绑定数据源 #

在ViewModel或页面代码中初始化分组数据源：

public ObservableCollection<GroupModel> GroupedItems { get; set; }

public MainPage()
{
    InitializeComponent();
    // 模拟测试数据
    var group1 = new GroupModel("分类1", new List<ItemModel>
    {
        new ItemModel { Name = "项1", Icon = "icon1.png" },
        new ItemModel { Name = "项2", Icon = "icon2.png" },
        new ItemModel { Name = "项3", Icon = "icon3.png" }
    });

    var group2 = new GroupModel("分类2", new List<ItemModel>
    {
        new ItemModel { Name = "项4", Icon = "icon4.png" },
        new ItemModel { Name = "项5", Icon = "icon5.png" }
    });

    GroupedItems = new ObservableCollection<GroupModel> { group1, group2 };
    BindingContext = this;
}

常见问题排查 #

• 确保嵌套的横向CollectionView的ItemsSource直接绑定当前分组对象（因为GroupModel继承自List，{Binding}会自动指向组内子项列表）
• 给横向CollectionView设置明确的HeightRequest，避免子项被压缩无法显示
• 确认LinearItemsLayout的Orientation属性已设为Horizontal

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