.NET MAUI中是否有类似HTML <details>标签的详情视图实现方案？

.NET MAUI 提供了官方的 Expander 控件，完全匹配你需要的 HTML <details> 标签功能，用来实现可折叠的摘要-详情展示，比手动添加 Label 的生硬效果流畅得多。

一、使用官方 Expander 控件（推荐） #

Expander 是专门为折叠/展开场景设计的控件，默认点击头部区域切换状态，自带基础过渡动画，用法如下：

<Expander>
    <!-- 摘要区域，对应 HTML <summary> -->
    <Expander.Header>
        <Label Text="点击查看用户详情" FontAttributes="Bold" Margin="0,5" />
    </Expander.Header>
    <!-- 详情区域，对应 <details> 内的内容 -->
    <VerticalStackLayout Padding="10,5" Spacing="3">
        <Label Text="姓名：Roy Mustang" />
        <Label Text="职位：焰之炼金术师" />
        <Label Text="隶属：亚美斯多利斯军部" />
    </VerticalStackLayout>
</Expander>

你还可以通过绑定 IsExpanded 属性，在 ViewModel 中控制展开/收起状态：

<Expander IsExpanded="{Binding IsDetailsVisible}">
    <!-- 内容同上 -->
</Expander>

二、自定义带动画的折叠组件 #

如果需要更个性化的样式或动画效果，可以封装一个自定义 ContentView，通过动画过渡解决生硬问题：

1. 自定义组件的 XAML 代码 #

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Controls.CollapsibleDetails">
    <VerticalStackLayout>
        <!-- 可点击的摘要区域（用Label+手势替代按钮） -->
        <Label x:Name="SummaryLabel" 
               Text="查看详情" 
               FontAttributes="Bold"
               Margin="0,5">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="SummaryTapped" />
            </Label.GestureRecognizers>
        </Label>
        
        <!-- 详情区域，初始隐藏 -->
        <ContentView x:Name="DetailsContainer" 
                     IsVisible="False"
                     Opacity="0"
                     ScaleY="0">
            <VerticalStackLayout Padding="10,5" Spacing="3">
                <Label x:Name="DetailsLabel" />
            </VerticalStackLayout>
        </ContentView>
    </VerticalStackLayout>
</ContentView>

2. 后台逻辑（添加过渡动画） #

namespace YourApp.Controls;

public partial class CollapsibleDetails : ContentView
{
    // 定义绑定属性，方便外部传入内容
    public static readonly BindableProperty SummaryTextProperty =
        BindableProperty.Create(nameof(SummaryText), typeof(string), typeof(CollapsibleDetails), "查看详情");
    
    public static readonly BindableProperty DetailsTextProperty =
        BindableProperty.Create(nameof(DetailsText), typeof(string), typeof(CollapsibleDetails));

    public string SummaryText
    {
        get => (string)GetValue(SummaryTextProperty);
        set => SetValue(SummaryTextProperty, value);
    }

    public string DetailsText
    {
        get => (string)GetValue(DetailsTextProperty);
        set => SetValue(DetailsTextProperty, value);
    }

    public CollapsibleDetails()
    {
        InitializeComponent();
        SummaryLabel.Text = SummaryText;
        DetailsLabel.Text = DetailsText;
    }

    private async void SummaryTapped(object sender, EventArgs e)
    {
        if (DetailsContainer.IsVisible)
        {
            // 收起动画：淡入+缩高
            await DetailsContainer.FadeTo(0, 250);
            await DetailsContainer.ScaleYTo(0, 250);
            DetailsContainer.IsVisible = false;
            SummaryLabel.Text = "查看详情";
        }
        else
        {
            // 展开动画：显示后放大+淡入
            DetailsContainer.IsVisible = true;
            await DetailsContainer.ScaleYTo(1, 250);
            await DetailsContainer.FadeTo(1, 250);
            SummaryLabel.Text = "收起详情";
        }
    }
}

3. 使用自定义组件 #

在页面中引用自定义控件（记得先添加命名空间）：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:YourApp.Controls"
             x:Class="YourApp.Views.UserDetailPage">
    
    <controls:CollapsibleDetails 
        SummaryText="用户信息" 
        DetailsText="姓名：Roy Mustang&#x0a;职位：焰之炼金术师&#x0a;隶属：亚美斯多利斯军部" />

</ContentPage>

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