maui中实现可折叠列表项最直接方式是使用expander控件配合collectionview,通过为每个数据项添加isexpanded属性并绑定,实现独立展开/收起;需确保模型实现inotifypropertychanged,xaml正确绑定,注意ios早期版本布局问题。

MAUI 中实现可折叠的列表项,最直接的方式是使用内置的 Expander 控件,配合 CollectionView 或 ListView 使用。它本身不支持直接放在 ItemTemplate 里“自动展开/收起”,但通过绑定 + 数据模型控制,完全可以做到每个列表项独立折叠。
Expander 基础用法(单个)
Expander 是一个容器控件,包含 Header(点击区域)和 Content(折叠内容)。默认点击 header 切换展开状态:
<Expander>
<Expander.Header>
<Label Text="点击展开详情" />
</Expander.Header>
<Expander.Content>
<StackLayout Padding="10">
<Label Text="这里是隐藏的详细信息..." />
<Button Text="操作按钮" />
</StackLayout>
</Expander.Content>
</Expander>
在 CollectionView 中为每个项添加独立折叠能力
关键点:每个数据项需自带一个 IsExpanded 属性,并绑定到 Expander 的 IsExpanded 属性。这样每条数据控制自己的展开状态,互不影响。
- 定义数据模型(例如
ListItem):public class ListItem : INotifyPropertyChanged { private bool _isExpanded; public string Title { get; set; } public string Detail { get; set; } public bool IsExpanded { get => _isExpanded; set { if (_isExpanded != value) { _isExpanded = value; OnPropertyChanged(); } } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } - 在 XAML 的
CollectionView.ItemTemplate中使用 Expander:<CollectionView ItemsSource="{Binding Items}"> <CollectionView.ItemTemplate> <DataTemplate x:DataType="model:ListItem"> <Expander IsExpanded="{Binding IsExpanded}"> <Expander.Header> <Label Text="{Binding Title}" FontSize="16" Margin="10,5" /> </Expander.Header> <Expander.Content> <StackLayout Padding="10,0,10,10"> <Label Text="{Binding Detail}" /> <Button Text="编辑" Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MainPageViewModel}}, Path=EditCommand}" CommandParameter="{Binding}" /> </StackLayout> </Expander.Content> </Expander> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView>
优化体验的小技巧
-
默认全部收起:初始化时确保每个
ListItem.IsExpanded = false -
点击 header 外区域不触发:Expander 默认只响应 header 点击,无需额外处理;若想点击整行展开,可把整个
StackLayout或Grid设为 header,或用TapGestureRecognizer手动切换IsExpanded -
动画更自然:MAUI 5.0+ 默认已有淡入/高度变化动画;如需自定义,可通过
Expander.AnimatedExpandCollapse(部分平台支持),或用VisualStateManager配合ScaleTo/FadeTo -
避免嵌套滚动冲突:Expander 内容若含 ScrollView,在 iOS 上可能滑动卡顿;建议限制内容高度、禁用内部滚动,或改用
HeightRequest+ 动画控制
注意事项
Expander 在 Android 和 Windows 上表现稳定;iOS 上早期版本(.NET MAUI 6.0~7.0)有轻微布局重绘问题,升级到 .NET MAUI 8.0+ 已基本修复。若遇到内容不显示,检查是否遗漏 x:DataType 或绑定路径错误,以及 INotifyPropertyChanged 是否正确触发。
基本上就这些 —— Expander 不复杂但容易忽略绑定细节,只要模型可通知、XAML 绑定写对,每个列表项就能独立、流畅地折叠展开。










