在 MAUI 中,
RadioButton本身不支持直接绑定到
CollectionView的每个项来实现“单选列表”,因为
RadioButton默认是按
GroupName分组的控件,而
CollectionView是动态生成模板的,每个项的
RadioButton若没统一管理,就无法互斥。但可以通过绑定 + ViewModel 逻辑 + 命令配合,模拟出“单选列表”的效果。
用绑定 + SelectedItem 实现逻辑单选(推荐)
不依赖
RadioButton的原生分组机制,而是用
CollectionView的
SelectedItem绑定 + 模板中显示选中状态,更简洁、可控、符合 MVVM。 ViewModel 中定义
public ObservableCollection<listitem> Items { get; }</listitem> 和 public ListItem? SelectedItem { get; set; }
CollectionView设置
SelectedItem="{Binding SelectedItem}",并启用 SelectionMode="Single"数据模板中用
RadioButton或
CheckBox(视觉上设为
IsChecked="{Binding IsSelected, Mode=TwoWay}"),但关键:它的 IsChecked绑定到一个计算属性(如
IsSelected => this == ViewModel.SelectedItem),点击时触发命令更新
SelectedItem为避免模板内逻辑复杂,建议在
ListItem类中加一个
bool IsSelected属性,并在
SelectedItem改变时同步刷新所有项的
IsSelected
用 RadioButton + GroupName + Command 手动控制(需注意坑)
如果坚持用原生
RadioButton,必须确保所有项的
GroupName相同(例如固定写死为
"ListSelection"),并在点击时手动清除其他项状态。 在
CollectionView的
DataTemplate中放
RadioButton,设置
GroupName="ListSelection"(不能绑定,必须静态字符串) 绑定
Command到
CheckedChanged或用
TapGestureRecognizer触发命令,传入当前项(
CommandParameter="{Binding}")
命令中:先清空所有项的选中状态(比如遍历 Items设
IsSelected = false),再设当前项
IsSelected = true,最后更新
SelectedItem⚠️ 注意:
RadioButton在
CollectionView中复用时可能残留状态,务必在
ListItem的
OnPropertyChanged中确保
IsSelected变化能正确刷新 UI
UI 层小技巧:让 RadioButton 看起来像列表项
默认
RadioButton样式较简陋,可嵌套在
HorizontalStackLayout或
Grid中,搭配
Label和间距优化体验: 用
VerticalOptions="Center"对齐文字 设置
Margin避免贴边,比如
Margin="12,8"若想点击整行都响应,把
RadioButton包在
Frame或
Border内,加
GestureRecognizers,再把命令绑定到容器上 选中状态可用
VisualStateManager定义不同背景色,提升反馈感
绑定示例片段(XAML)
简化版模板参考:
<CollectionView ItemsSource="{Binding Items}"
SelectionMode="Single"
SelectedItem="{Binding SelectedItem}">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:ListItem">
<HorizontalStackLayout Padding="12" Spacing="12" VerticalOptions="Center">
<RadioButton IsChecked="{Binding IsSelected, Mode=TwoWay}"
GroupName="ListSelection"
Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MainPageViewModel}}, Path=SelectItemCommand}"
CommandParameter="{Binding}" />
<Label Text="{Binding Name}" VerticalOptions="Center" />
</HorizontalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
基本上就这些。核心是别被
RadioButton的“原生单选”带偏——在动态列表里,用 ViewModel 管理选中状态才是稳定可靠的做法。
