.NET MAUI Shell如何实现可交互的自定义FlyoutContent？

自定义FlyoutContent后无法点击切换页面不属于框架Bug。
官方文档给出的Label示例仅用于演示「替换默认Flyout内容容器」的基础能力，没有内置任何导航交互、选中态同步逻辑，所有交互行为都需要开发者自行实现。

1. 替换FlyoutContent为可交互控件 #

不要使用静态Label作为内容，使用支持列表选择、点击识别的控件承载Flyout菜单项，以下是最小可运行示例：

<!-- 放在AppShell.xaml的Shell节点下 -->
<Shell.FlyoutContent>
    <VerticalStackLayout Spacing="0">
        <!-- 自定义Flyout头部 -->
        <Grid HeightRequest="120" BackgroundColor="#2196F3" Padding="16">
            <Label Text="自定义菜单" TextColor="White" FontSize="20" VerticalOptions="End"/>
        </Grid>
        <!-- 菜单项列表 -->
        <CollectionView x:Name="FlyoutMenuList"
                        ItemsSource="{Binding FlyoutItems, Source={RelativeSource AncestorType={x:Type Shell}}}"
                        SelectionMode="Single"
                        Margin="0,8">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="FlyoutItem">
                    <Grid Padding="20,14" BackgroundColor="Transparent">
                        <Label Text="{Binding Title}" FontSize="16"/>
                        <Grid.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnFlyoutItemTapped"/>
                        </Grid.GestureRecognizers>
                        <!-- 自定义选中态视觉 -->
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Property="BackgroundColor" Value="#E3F2FD"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Normal">
                                    <VisualState.Setters>
                                        <Setter Property="BackgroundColor" Value="Transparent"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</Shell.FlyoutContent>

2. 实现点击导航逻辑 #

在AppShell.xaml.cs的代码隐藏类中添加点击事件处理，完成导航和Flyout自动关闭：

private void OnFlyoutItemTapped(object sender, TappedEventArgs e)
{
    if (sender is VisualElement element && element.BindingContext is FlyoutItem targetItem)
    {
        // 切换当前显示页面
        CurrentItem = targetItem;
        // 导航完成后关闭Flyout面板
        FlyoutIsPresented = false;
    }
}

3. 同步页面切换时的菜单选中态 #

注册Shell的导航事件，保证代码跳转页面、底部Tab切换时，Flyout菜单的选中状态和当前页面对应：

public AppShell()
{
    InitializeComponent();
    // 注册导航完成事件
    Navigated += OnAppShellNavigated;
}

private void OnAppShellNavigated(object sender, ShellNavigatedEventArgs e)
{
    // 匹配当前页面对应的FlyoutItem，同步列表选中状态
    foreach (FlyoutItem item in FlyoutItems)
    {
        if (CurrentItem == item)
        {
            FlyoutMenuList.SelectedItem = item;
            break;
        }
    }
}

• 默认Flyout的公开Style属性仅支持调整字号、基础颜色等简单属性，无法实现布局结构级别的自定义，直接替换FlyoutContent是官方推荐的高自由度定制方案
• 自定义FlyoutContent支持任意XAML布局，你可以根据需要添加头像、设置入口、版本号等额外内容，不受默认Flyout结构限制
• 如果需要实现菜单项图标、分组、滑动等效果，直接按照普通.NET MAUI控件的实现逻辑开发即可，没有特殊限制

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