在.net MAUI 中创建分组复选框列表

Question

我正在使用 .NET MAUI 并尝试创建一组复选框列表，将其放入 FlexLayout 中，以便它们能够换行。当我对数据进行硬编码时，它工作得很好。这是有效的硬编码解决方案：

<FlexLayout
    Grid.Row="5"
    Grid.Column="0"
    Grid.ColumnSpan="2"
    Direction="Row"
    Wrap="Wrap">                
    <VerticalStackLayout HeightRequest="200" WidthRequest="200">
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 1-1" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 1-2" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 1-3" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 1-4" />
        </HorizontalStackLayout>
    </VerticalStackLayout>
    <VerticalStackLayout HeightRequest="200" WidthRequest="200">
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 2-1" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 2-2" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 2-3" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 2-4" />
        </HorizontalStackLayout>
    </VerticalStackLayout>
    <VerticalStackLayout HeightRequest="200" WidthRequest="200">
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 3-1" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 3-2" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 3-3" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 3-4" />
        </HorizontalStackLayout>
    </VerticalStackLayout>
    <VerticalStackLayout HeightRequest="200" WidthRequest="200">
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 4-1" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 4-2" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 4-3" />
        </HorizontalStackLayout>
        <HorizontalStackLayout>
            <CheckBox IsChecked="False" />
            <Label Margin="5,15,0,0" Text="Label 4-4" />
        </HorizontalStackLayout>
    </VerticalStackLayout>
</FlexLayout>

经过一些包装后的结果如下所示：

我尝试使用 CollectionView 分组功能，但我总是遇到的一个问题是 GroupedCheckboxLists （列表的扩展）会导致我的 XAML 错误，即找不到 IsChecked 和 Label 属性。我尝试了所有的解决方案，但从未成功。

所以现在我正在尝试嵌套 CollectionViews 并且可以获得结果，但它垂直而不是并排显示所有复选框。这是我的视图模型：

public partial class CheckBoxViewModel : ObservableObject
{
    [ObservableProperty]
    string id;

    [ObservableProperty]
    string label;

    [ObservableProperty]
    bool isChecked;

    [ObservableProperty]
    int groupNumber;

    [ObservableProperty]
    int sortOrder;
}


public partial class CheckBoxGroupViewModel : ObservableObject
{

    [ObservableProperty]
    string group;

    [ObservableProperty]
    List<CheckBoxViewModel> checkBoxes;

    public CheckBoxGroupViewModel(string name,  List<CheckBoxViewModel> checkBoxes)
    {
        this.group = name;
        this.checkBoxes = checkBoxes;
    }

}

这是我的 XAML：

<FlexLayout
    Grid.Row="5"
    Grid.Column="0"
    Grid.ColumnSpan="2"
    Direction="Row"
    Wrap="Wrap">
    <CollectionView HorizontalOptions="FillAndExpand" ItemsSource="{Binding ProjectRooms}">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="vm:Common.CheckBoxGroupViewModel">
                <VerticalStackLayout HeightRequest="200" WidthRequest="200">
                    <CollectionView ItemsSource="{Binding CheckBoxes}">
                        <CollectionView.ItemTemplate>
                            <DataTemplate x:DataType="vm:Common.CheckBoxViewModel">
                                <HorizontalStackLayout>
                                    <CheckBox IsChecked="{Binding IsChecked}" />
                                    <Label Margin="5,15,0,0" Text="{Binding Label}" />
                                </HorizontalStackLayout>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                </VerticalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</FlexLayout>

显示如下：

有什么想法如何让它并排显示各组并换行吗？

Answer 1

您可以尝试将

BindableLayout

放在

CollectionView

内部来实现此目的。

根据您的代码，我创建了一个演示并实现了此功能。

您可以参考以下代码：

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiInnerListApp0201.MainPage"
             xmlns:vm="clr-namespace:MauiInnerListApp0201.Models" >
    <ContentPage.BindingContext>
        <vm:TestViewModel></vm:TestViewModel>
    </ContentPage.BindingContext>

    <CollectionView ItemsSource="{Binding Groups}"
                        ItemsLayout="VerticalGrid, 2">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <VerticalStackLayout>

                    <Label Text="{Binding Group}" />
                    <StackLayout BindableLayout.ItemsSource="{Binding CheckBoxes}"   Orientation="Vertical">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <HorizontalStackLayout>
                                    <CheckBox IsChecked="{Binding IsChecked}" />
                                    <Label Margin="5,15,0,0" Text="{Binding Label}" />
                                </HorizontalStackLayout>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </StackLayout>
                </VerticalStackLayout>

            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

TestViewModel.cs

public class TestViewModel
{
    public List<CheckBoxGroupViewModel> Groups { get; set; } = new List<CheckBoxGroupViewModel>();

    public TestViewModel()
    {
        List<CheckBoxViewModel> Items1 = new List<CheckBoxViewModel>();

        CheckBoxGroupViewModel group1;

        Items1.Add (new CheckBoxViewModel() {  GroupNumber = 1 ,  IsChecked= true, Id= "1", Label= "Label 1-1", SortOrder = 01});
        Items1.Add (new CheckBoxViewModel() {  GroupNumber = 1 ,  IsChecked= true, Id= "2", Label= "Label 1-1", SortOrder = 01});
        Items1.Add (new CheckBoxViewModel() {  GroupNumber = 1 ,  IsChecked= false, Id= "3", Label= "Label 1-1", SortOrder = 01});
        Items1.Add (new CheckBoxViewModel() {  GroupNumber = 1 ,  IsChecked= true, Id= "4", Label= "Label 1-1", SortOrder = 01});

        group1 = new CheckBoxGroupViewModel("group-1", Items1);

        List<CheckBoxViewModel> Items2 = new List<CheckBoxViewModel>();
        CheckBoxGroupViewModel group2;

        Items2.Add(new CheckBoxViewModel() { GroupNumber = 2, IsChecked = true, Id = "1", Label = "Label 2-1", SortOrder = 01 });
        Items2.Add(new CheckBoxViewModel() { GroupNumber = 2, IsChecked = true, Id = "2", Label = "Label 2-1", SortOrder = 01 });
        Items2.Add(new CheckBoxViewModel() { GroupNumber = 2, IsChecked = false, Id = "3", Label = "Label 2-1", SortOrder = 01 });
        Items2.Add(new CheckBoxViewModel() { GroupNumber = 2, IsChecked = true, Id = "4", Label = "Label 2-1", SortOrder = 01 });

        group2 = new CheckBoxGroupViewModel("group-2", Items2);

        List<CheckBoxViewModel> Items3 = new List<CheckBoxViewModel>();
        CheckBoxGroupViewModel group3;

        Items3.Add(new CheckBoxViewModel() { GroupNumber = 3, IsChecked = true, Id = "1", Label = "Label 3-1", SortOrder = 01 });
        Items3.Add(new CheckBoxViewModel() { GroupNumber = 3, IsChecked = true, Id = "2", Label = "Label 3-1", SortOrder = 01 });
        Items3.Add(new CheckBoxViewModel() { GroupNumber = 3, IsChecked = false, Id = "3", Label = "Label 3-1", SortOrder = 01 });
        Items3.Add(new CheckBoxViewModel() { GroupNumber = 3, IsChecked = true, Id = "4", Label = "Label 3-1", SortOrder = 01 });

        group3 = new CheckBoxGroupViewModel("group-3", Items3);

        Groups.Add(group1);
        Groups.Add(group2);
        Groups.Add(group3);
    }
}