如何在MAUI中创建Radio Group实现员工单选功能？

MAUI 原生没有RadioGroup控件，但可以通过RadioButton的GroupName属性配合数据绑定实现单选组效果，完全符合官方方案要求，无需第三方库。以下是具体实现步骤：

1. 修正Employee类（适配数据绑定） #

原代码中的字段无法用于数据绑定，需改为带通知的公共属性：

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

public class Employee : INotifyPropertyChanged
{
    private int _employeeId;
    private string _employeeName;
    private bool _isSelected;

    public int EmployeeId
    {
        get => _employeeId;
        set { _employeeId = value; OnPropertyChanged(); }
    }

    public string EmployeeName
    {
        get => _employeeName;
        set { _employeeName = value; OnPropertyChanged(); }
    }

    public bool IsSelected
    {
        get => _isSelected;
        set { _isSelected = value; OnPropertyChanged(); }
    }

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

实现INotifyPropertyChanged是为了让属性变化能实时同步到UI。

2. 构建ViewModel（管理数据与选中状态） #

创建ViewModel来维护员工列表和选中项，采用MVVM模式：

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;

public class EmployeeViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Employee> _employees;
    private Employee _selectedEmployee;

    public ObservableCollection<Employee> Employees
    {
        get => _employees;
        set { _employees = value; OnPropertyChanged(); }
    }

    public Employee SelectedEmployee
    {
        get => _selectedEmployee;
        set
        {
            // 取消之前选中项的状态
            if (_selectedEmployee != null)
                _selectedEmployee.IsSelected = false;
            
            _selectedEmployee = value;
            // 设置新选中项的状态
            if (_selectedEmployee != null)
                _selectedEmployee.IsSelected = true;
            
            OnPropertyChanged();
        }
    }

    // 用于RadioButton选中触发的命令
    public ICommand SelectEmployeeCommand { get; }

    public EmployeeViewModel()
    {
        SelectEmployeeCommand = new Command<Employee>(employee => SelectedEmployee = employee);
        
        // 模拟加载员工数据
        Employees = new ObservableCollection<Employee>
        {
            new Employee { EmployeeId = 1, EmployeeName = "张三" },
            new Employee { EmployeeId = 2, EmployeeName = "李四" },
            new Employee { EmployeeId = 3, EmployeeName = "王五" }
        };
    }

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

3. XAML布局（动态生成单选按钮） #

用CollectionView动态渲染员工列表，通过GroupName确保单选：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:你的项目命名空间"
             x:Class="你的项目命名空间.EmployeeSelectionPage">
    <ContentPage.BindingContext>
        <vm:EmployeeViewModel />
    </ContentPage.BindingContext>

    <CollectionView ItemsSource="{Binding Employees}" Margin="20">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <RadioButton GroupName="EmployeeGroup" 
                             IsChecked="{Binding IsSelected, Mode=TwoWay}"
                             Content="{Binding EmployeeName}"
                             Command="{Binding Source={RelativeSource AncestorType={x:Type vm:EmployeeViewModel}}, Path=SelectEmployeeCommand}"
                             CommandParameter="{Binding .}"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

关键说明 #

• GroupName="EmployeeGroup"：所有该组名的RadioButton会自动互斥，同一时间只有一个能被选中，完全替代RadioGroup的功能。
• 数据绑定实现了UI与ViewModel的双向同步，选中状态会自动更新到SelectedEmployee属性，无需手动管理。

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