MAUI怎么实现一个可折叠的列表项 MAUI Expander控件

在MAUI跨平台应用开发中，可折叠列表项能够有效节省页面空间，提升信息展示的层次感。MAUI自带的Expander控件是一个灵活的折叠容器，支持自定义头部和内容区域，非常适合用来实现可折叠列表项效果。

Expander控件基础用法

Expander控件的核心结构分为Header和Content两个区域，Header是始终显示的折叠触发区域，Content是点击头部后展开或收起的内容区域。基础使用示例代码如下：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiExpanderDemo.MainPage">
    <VerticalStackLayout Padding="20" Spacing="10">
        <!-- 基础Expander示例 -->
        <Expander>
            <Expander.Header>
                <HorizontalStackLayout Spacing="10">
                    <Label Text="基础折叠项" FontSize="16" FontAttributes="Bold" VerticalOptions="Center"/>
                    <Image Source="arrow_down.png" WidthRequest="16" HeightRequest="16" VerticalOptions="Center"/>
                </HorizontalStackLayout>
            </Expander.Header>
            <Expander.Content>
                <VerticalStackLayout Padding="10">
                    <Label Text="这是折叠区域的内容，默认情况下处于收起状态"/>
                    <Label Text="点击头部区域可以切换展开和收起状态"/>
                </VerticalStackLayout>
            </Expander.Content>
        </Expander>
    </VerticalStackLayout>
</ContentPage>

结合CollectionView实现动态可折叠列表

在实际开发中，可折叠列表项通常是动态生成的，我们可以结合CollectionView和DataTemplate来实现动态列表效果。首先需要定义数据模型：

// 可折叠项数据模型
public class CollapsibleItem
{
    public string Title { get; set; }
    public List<string> SubItems { get; set; }
    public bool IsExpanded { get; set; }
}

然后在页面中绑定数据源，使用ItemTemplate为每个列表项配置Expander：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiExpanderDemo.ListPage">
    <CollectionView x:Name="CollapsibleList">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Expander IsExpanded="{Binding IsExpanded}">
                    <Expander.Header>
                        <HorizontalStackLayout Padding="10" Spacing="10">
                            <Label Text="{Binding Title}" FontSize="16" FontAttributes="Bold" VerticalOptions="Center"/>
                            <Image Source="arrow_down.png" WidthRequest="16" HeightRequest="16" VerticalOptions="Center">
                                <Image.Triggers>
                                    <DataTrigger TargetType="Image" Binding="{Binding IsExpanded}" Value="True">
                                        <Setter Property="Rotation" Value="180"/>
                                    </DataTrigger>
                                </Image.Triggers>
                            </Image>
                        </HorizontalStackLayout>
                    </Expander.Header>
                    <Expander.Content>
                        <VerticalStackLayout Padding="20,10,10,10" Spacing="5">
                            <!-- 循环展示子项 -->
                            <CollectionView ItemsSource="{Binding SubItems}">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate>
                                        <Label Text="{Binding .}" FontSize="14" Padding="5"/>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
                        </VerticalStackLayout>
                    </Expander.Content>
                </Expander>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

在后台代码中初始化数据源：

public partial class ListPage : ContentPage
{
    public ListPage()
    {
        InitializeComponent();
        // 初始化测试数据
        List<CollapsibleItem> items = new List<CollapsibleItem>
        {
            new CollapsibleItem
            {
                Title = "前端开发技术",
                SubItems = new List<string> { "HTML", "CSS", "JavaScript", "TypeScript" },
                IsExpanded = false
            },
            new CollapsibleItem
            {
                Title = "后端开发技术",
                SubItems = new List<string> { "C#", "Java", "Python", "Go" },
                IsExpanded = false
            },
            new CollapsibleItem
            {
                Title = "移动开发技术",
                SubItems = new List<string> { "MAUI", "Flutter", "React Native", "Swift" },
                IsExpanded = false
            }
        };
        CollapsibleList.ItemsSource = items;
    }
}

自定义Expander样式

默认的Expander样式可能不符合应用的整体设计风格，我们可以通过修改属性来自定义样式。常用的自定义属性包括：

• CornerRadius：设置控件圆角
• BackgroundColor：设置控件背景色
• Padding：设置内边距
• ExpandAnimationLength：设置展开动画时长

自定义样式的示例代码如下：

<Expander CornerRadius="8" BackgroundColor="#F5F5F5" Padding="5" ExpandAnimationLength="200">
    <Expander.Header>
        <Label Text="自定义样式折叠项" FontSize="16" Padding="10"/>
    </Expander.Header>
    <Expander.Content>
        <Label Text="自定义背景色、圆角和动画时长的折叠内容" Padding="10,0,10,10"/>
    </Expander.Content>
</Expander>

控制Expander展开状态

Expander的IsExpanded属性是可读可写的，我们可以通过代码动态控制展开和收起状态。例如在按钮点击事件中切换指定项的展开状态：

private void ToggleExpander_Clicked(object sender, EventArgs e)
{
    // 获取第一个列表项并切换展开状态
    if (CollapsibleList.ItemsSource is List<CollapsibleItem> items && items.Count > 0)
    {
        items[0].IsExpanded = !items[0].IsExpanded;
        // 通知属性变更，更新UI
        CollapsibleList.ItemsSource = null;
        CollapsibleList.ItemsSource = items;
    }
}

注意事项

• Expander的内容区域高度默认是自适应的，如果内容过多建议内部嵌套可滚动容器
• 多个Expander同时存在时，默认不会自动收起其他项，需要手动实现互斥展开逻辑
• 在iOS平台上，Expander的动画效果可能需要额外调整以适配系统交互习惯

MAUIExpander可折叠列表ItemTemplate修改时间：2026-06-19 15:27:24