ListView顶部复选框点击全选列表项复选框的实现问题咨询

嘿，这个需求我之前做过好多次，其实核心逻辑很清晰，分几步就能搞定，不管你用的是WPF、Android还是其他UI框架，思路都是相通的：

1. 给列表项数据模型添加选中状态属性 #

首先，你的每个ListView项对应的数据模型类（比如叫ListItemModel）里，必须加一个布尔类型的属性（比如IsSelected），用来记录该项的选中状态。如果是MVVM模式，记得实现INotifyPropertyChanged接口，这样属性变化时UI能自动更新：

// 以C# WPF为例的模型类
public class ListItemModel : INotifyPropertyChanged
{
    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged(nameof(IsSelected));
        }
    }

    // 其他属性，比如显示文本
    public string ItemText { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 处理顶部全选复选框的状态同步 #

顶部的全选复选框需要和列表中所有项的选中状态双向同步：

• 当点击全选框时，遍历所有列表项，把它们的IsSelected设为全选框的当前状态（选中/取消）；
• 当列表中任意一项的选中状态变化时，要检查所有项是否都被选中，从而更新全选框的状态（避免出现“半选”状态）。

以MVVM模式为例（ViewModel层） #

在你的ViewModel里，添加：

• 一个ObservableCollection<ListItemModel>用来绑定ListView的数据源；
• 一个IsAllSelected属性绑定到顶部全选框，在它的setter里更新所有项的选中状态；
• 监听列表项的PropertyChanged事件，来同步全选框的状态。

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<ListItemModel> ItemList { get; set; }

    private bool _isAllSelected;
    public bool IsAllSelected
    {
        get => _isAllSelected;
        set
        {
            _isAllSelected = value;
            // 遍历所有项，设置选中状态
            foreach (var item in ItemList)
            {
                item.IsSelected = value;
            }
            OnPropertyChanged(nameof(IsAllSelected));
        }
    }

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

        // 给每个列表项绑定PropertyChanged事件，监听选中状态变化
        foreach (var item in ItemList)
        {
            item.PropertyChanged += Item_PropertyChanged;
        }
    }

    private void Item_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(ListItemModel.IsSelected))
        {
            // 检查所有项是否都被选中
            _isAllSelected = ItemList.All(item => item.IsSelected);
            OnPropertyChanged(nameof(IsAllSelected));
        }
    }

    // INotifyPropertyChanged实现
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

3. UI层绑定设置 #

最后在UI里把控件和对应的属性绑定起来：

• ListView的ItemsSource绑定到ViewModel的ItemList；
• ListView项模板里的复选框IsChecked绑定到IsSelected；
• 顶部的全选复选框IsChecked绑定到IsAllSelected。

WPF XAML示例 #

<!-- 顶部全选复选框 -->
<CheckBox Content="全选" IsChecked="{Binding IsAllSelected}" />

<!-- ListView -->
<ListView ItemsSource="{Binding ItemList}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <CheckBox IsChecked="{Binding IsSelected}" />
                <TextBlock Text="{Binding ItemText}" Margin="5,0" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

非MVVM模式的思路（比如Android原生） #

如果是用代码直接操作控件，思路类似：

• 给每个ListView的Item布局里的复选框设置标记，或者通过Adapter的getView方法跟踪每个项的选中状态；
• 顶部全选框设置OnCheckedChangeListener，在回调里遍历ListView的所有可见项，设置复选框状态，同时更新数据源里的选中状态；
• 每个列表项的复选框也设置OnCheckedChangeListener，当状态变化时，检查所有项的选中状态来更新全选框。

比如Android里的Adapter示例片段：

// 数据源列表，每个元素记录选中状态
private List<ItemBean> mItemList;
// 顶部全选框
private CheckBox mCbAllSelect;

// 全选框的监听
mCbAllSelect.setOnCheckedChangeListener((buttonView, isChecked) -> {
    for (ItemBean item : mItemList) {
        item.setSelected(isChecked);
    }
    notifyDataSetChanged();
});

// 列表项复选框的监听
holder.cbItem.setOnCheckedChangeListener((buttonView, isChecked) -> {
    mItemList.get(position).setSelected(isChecked);
    // 检查是否全选
    boolean isAllSelected = true;
    for (ItemBean item : mItemList) {
        if (!item.isSelected()) {
            isAllSelected = false;
            break;
        }
    }
    mCbAllSelect.setChecked(isAllSelected);
});

这样一套下来，就能完美实现全选和单个选中的同步啦～

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