Xamarin如何实现左右双Flyout Page（飞出页面）？

Xamarin.Forms原生的FlyoutPage仅支持单侧飞出菜单，要实现左右双侧的Flyout功能，需要通过自定义布局结合动画来实现，以下是具体步骤和代码示例：

核心思路 #

以原生FlyoutPage实现左侧菜单，在主内容页中嵌入自定义的右侧菜单容器，通过控制容器的TranslationX属性实现滑入滑出动画，同时处理交互逻辑。

具体实现代码 #

1. XAML布局 #

<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DoubleFlyoutDemo.MainPage"
             FlyoutWidth="280">

    <!-- 左侧原生Flyout菜单 -->
    <FlyoutPage.Flyout>
        <ContentPage Title="左侧菜单" BackgroundColor="#f5f5f5">
            <StackLayout Padding="20">
                <Label Text="首页" FontSize="Medium" Margin="0 10"/>
                <Label Text="我的收藏" FontSize="Medium" Margin="0 10"/>
                <Label Text="设置" FontSize="Medium" Margin="0 10"/>
            </StackLayout>
        </ContentPage>
    </FlyoutPage.Flyout>

    <!-- 主内容页（包含右侧自定义菜单） -->
    <FlyoutPage.Detail>
        <ContentPage>
            <Grid>
                <!-- 主内容区域 -->
                <StackLayout>
                    <Button Text="☰" Clicked="ToggleLeftMenuClicked" HorizontalOptions="Start" Margin="10"/>
                    <Button Text="☰" Clicked="ToggleRightMenuClicked" HorizontalOptions="End" Margin="10"/>
                    <Label Text="应用主内容" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
                </StackLayout>

                <!-- 右侧菜单遮罩层 -->
                <BoxView x:Name="RightMenuMask" 
                         BackgroundColor="#80000000" 
                         IsVisible="false"
                         InputTransparent="False">
                    <BoxView.GestureRecognizers>
                        <TapGestureRecognizer Tapped="CloseRightMenu"/>
                    </BoxView.GestureRecognizers>
                </BoxView>

                <!-- 右侧自定义菜单 -->
                <ContentView x:Name="RightMenuView" 
                             BackgroundColor="#f5f5f5"
                             WidthRequest="280"
                             HorizontalOptions="End">
                    <StackLayout Padding="20">
                        <Button Text="×" Clicked="CloseRightMenu" HorizontalOptions="End" Margin="0 10"/>
                        <Label Text="消息中心" FontSize="Medium" Margin="0 10"/>
                        <Label Text="分享应用" FontSize="Medium" Margin="0 10"/>
                        <Label Text="帮助反馈" FontSize="Medium" Margin="0 10"/>
                    </StackLayout>
                </ContentView>
            </Grid>
        </ContentPage>
    </FlyoutPage.Detail>
</FlyoutPage>

2. 后台交互逻辑 #

using Xamarin.Forms;
using System.Threading.Tasks;

namespace DoubleFlyoutDemo
{
    public partial class MainPage : FlyoutPage
    {
        private double _screenWidth;

        public MainPage()
        {
            InitializeComponent();
            // 页面加载完成后获取屏幕宽度
            SizeChanged += (s, e) =>
            {
                _screenWidth = Width;
                RightMenuView.TranslationX = _screenWidth;
            };
        }

        // 切换左侧菜单显示
        private void ToggleLeftMenuClicked(object sender, EventArgs e)
        {
            IsPresented = !IsPresented;
        }

        // 切换右侧菜单显示
        private async void ToggleRightMenuClicked(object sender, EventArgs e)
        {
            if (RightMenuView.TranslationX == _screenWidth)
            {
                RightMenuMask.IsVisible = true;
                await RightMenuView.TranslateTo(_screenWidth - 280, 0, 250, Easing.CubicInOut);
            }
            else
            {
                await CloseRightMenu();
            }
        }

        // 关闭右侧菜单
        private async Task CloseRightMenu()
        {
            await RightMenuView.TranslateTo(_screenWidth, 0, 250, Easing.CubicInOut);
            RightMenuMask.IsVisible = false;
        }

        private async void CloseRightMenu(object sender, EventArgs e)
        {
            await CloseRightMenu();
        }
    }
}

优化建议 #

• 屏幕宽度适配：使用DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density获取精确的屏幕可用宽度，替代硬编码值。
• 手势支持：给右侧菜单添加PanGestureRecognizer，支持滑动手势打开/关闭菜单。
• 平台适配：针对iOS安全区域、Android导航栏高度调整菜单的内边距，避免内容被遮挡。
• 性能优化：使用VisualStateManager管理菜单的显示状态，简化动画逻辑。

备选方案 #

如果不想手动实现，可以使用第三方控件库（如SlideOverKit），这类库已经封装好了双侧滑出菜单的功能，可直接调用。

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