You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Xamarin Form中:取消列表复选框时如何联动取消全选复选框?

Xamarin.Forms ListView CheckBox 联动取消全选实现

要实现列表内任意CheckBox取消时联动取消全选框,核心是监听列表中每个项的选中状态变化,实时检查是否所有项都处于选中状态,一旦有项未选中,就把全选框的状态置为未选中。下面是具体的实现步骤:

1. 数据模型实现通知接口

首先你的列表项模型需要实现INotifyPropertyChanged,这样当项的选中状态变化时,才能通知ViewModel做后续处理:

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class ListItem : INotifyPropertyChanged
{
    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged();
        }
    }

    // 自定义业务属性,比如选项名称
    public string ItemName { get; set; }

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

2. ViewModel 处理状态联动

在ViewModel中维护全选状态、列表集合,并且监听每个列表项的选中状态变化:

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;

public class MainViewModel : INotifyPropertyChanged
{
    private bool _isSelectAll;
    public bool IsSelectAll
    {
        get => _isSelectAll;
        set
        {
            _isSelectAll = value;
            OnPropertyChanged();
            // 全选/取消全选时同步所有列表项状态
            SyncAllItemsSelection(value);
        }
    }

    public ObservableCollection<ListItem> ItemList { get; set; }

    public MainViewModel()
    {
        // 初始化测试数据
        ItemList = new ObservableCollection<ListItem>
        {
            new ListItem { ItemName = "选项1" },
            new ListItem { ItemName = "选项2" },
            new ListItem { ItemName = "选项3" }
        };

        // 给每个列表项绑定状态变更监听
        foreach (var item in ItemList)
        {
            item.PropertyChanged += OnItemPropertyChanged;
        }
    }

    private void OnItemPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        // 仅处理IsSelected属性的变更
        if (e.PropertyName != nameof(ListItem.IsSelected)) return;

        // 检查是否所有项都处于选中状态
        var allSelected = ItemList.All(item => item.IsSelected);
        // 如果有项未选中且当前全选框是选中状态,就取消全选
        if (!allSelected && IsSelectAll)
        {
            IsSelectAll = false;
        }
    }

    private void SyncAllItemsSelection(bool isSelected)
    {
        foreach (var item in ItemList)
        {
            item.IsSelected = isSelected;
        }
    }

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

3. XAML 绑定设置

最后在XAML中完成全选CheckBox和ListView的绑定:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.MainPage"
             xmlns:local="clr-namespace:YourAppNamespace">
    <ContentPage.BindingContext>
        <local:MainViewModel />
    </ContentPage.BindingContext>

    <StackLayout Margin="20">
        <!-- 全选CheckBox -->
        <CheckBox IsChecked="{Binding IsSelectAll}" 
                  VerticalOptions="Center"
                  Margin="0,0,0,15" />

        <!-- 列表区域 -->
        <ListView ItemsSource="{Binding ItemList}"
                  HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" Padding="10" VerticalOptions="Center">
                            <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}" 
                                      VerticalOptions="Center" />
                            <Label Text="{Binding ItemName}" 
                                   VerticalOptions="Center" 
                                   Margin="10,0,0,0" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

核心逻辑说明

当用户手动取消列表中任意一个CheckBox时,对应ListItem的IsSelected属性变更,触发OnItemPropertyChanged方法。此时会遍历所有列表项检查选中状态,如果存在未选中项且当前全选框处于选中状态,就将IsSelectAll设为false,完成联动取消。

内容的提问来源于stack exchange,提问作者abani samal

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.01 09:55:31