.NET MAUI实现可换行的分组复选框列表遇到的问题

1. 定义数据模型 #

先明确分组和单个复选框的数据结构，确保属性名称准确且支持双向绑定：

// 单个复选框项模型
public class CheckboxItem : INotifyPropertyChanged
{
    private bool _isChecked;
    public bool IsChecked
    {
        get => _isChecked;
        set
        {
            _isChecked = value;
            OnPropertyChanged();
        }
    }

    public string Label { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
    void OnPropertyChanged([CallerMemberName] string name = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}

// 分组模型，继承ObservableCollection支持集合变更通知
public class CheckboxGroup : ObservableCollection<CheckboxItem>
{
    public string GroupName { get; set; }
}

2. 准备ViewModel数据源 #

在ViewModel中构造分组后的复选框数据：

public class MainViewModel
{
    public ObservableCollection<CheckboxGroup> GroupedCheckboxItems { get; set; }

    public MainViewModel()
    {
        GroupedCheckboxItems = new ObservableCollection<CheckboxGroup>
        {
            new CheckboxGroup
            {
                GroupName = "水果",
                Items = {
                    new CheckboxItem { Label = "苹果", IsChecked = false },
                    new CheckboxItem { Label = "香蕉", IsChecked = true },
                    new CheckboxItem { Label = "橙子", IsChecked = false },
                    new CheckboxItem { Label = "葡萄", IsChecked = false }
                }
            },
            new CheckboxGroup
            {
                GroupName = "蔬菜",
                Items = {
                    new CheckboxItem { Label = "白菜", IsChecked = false },
                    new CheckboxItem { Label = "萝卜", IsChecked = false },
                    new CheckboxItem { Label = "西红柿", IsChecked = true }
                }
            }
        };
    }
}

3. XAML布局实现（解决分组+自动换行问题） #

用CollectionView分组功能，同时在每个分组内容中嵌套FlexLayout实现复选框横向自动换行：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.MainPage">
    <ContentPage.BindingContext>
        <local:MainViewModel />
    </ContentPage.BindingContext>

    <CollectionView ItemsSource="{Binding GroupedCheckboxItems}"
                    IsGrouped="True"
                    Margin="10">
        <!-- 分组头部模板 -->
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate>
                <Label Text="{Binding GroupName}"
                       FontSize="Headline"
                       FontAttributes="Bold"
                       Margin="0,10,0,5"/>
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>

        <!-- 分组内容模板：用FlexLayout实现横向换行 -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <FlexLayout Direction="Row"
                            Wrap="Wrap"
                            HorizontalOptions="Fill">
                    <BindableLayout.ItemsSource="{Binding Items}">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <CheckBox IsChecked="{Binding IsChecked}"
                                         Margin="5,0"
                                         HorizontalOptions="Start">
                                    <CheckBox.Content>
                                        <Label Text="{Binding Label}"
                                               Margin="5,0"/>
                                    </CheckBox.Content>
                                </CheckBox>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </BindableLayout.ItemsSource>
                </FlexLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

关键问题解决说明 #

• IsChecked/Label属性未找到错误：确保数据模型属性名称与XAML绑定路径完全一致，且模型实现INotifyPropertyChanged接口；CollectionView分组后，GroupHeaderTemplate绑定上下文是CheckboxGroup，ItemTemplate绑定上下文也是CheckboxGroup，内部BindableLayout绑定CheckboxGroup的Items集合后，单个复选框的绑定上下文才是CheckboxItem，避免绑定层级错误。
• 复选框无法横向换行：核心是给承载复选框的FlexLayout设置Direction="Row"和Wrap="Wrap"，同时设置HorizontalOptions="Fill"让FlexLayout占满父容器宽度，即可根据设备宽度自动换行。

内容的提问来源于stack exchange，提问作者Matt S.