如何将MAUI菜单栏置于底部位置？适配安卓与iOS平台

核心思路 #

MAUI原生MenuBar仅针对桌面端（Windows/macOS）提供支持，移动端（安卓/iOS）默认不会渲染。要实现底部的旧版WM风格菜单栏，需要通过自定义布局+弹出层模拟菜单的下拉交互。

可行方案（基于CommunityToolkit.Maui） #

1. 引入依赖 #

安装CommunityToolkit.Maui NuGet包，它提供的Popup控件可快速实现下拉菜单的弹出效果。

2. 布局结构设计 #

在页面底部添加横向布局放置菜单按钮，点击按钮时弹出对应下拉菜单。

页面XAML示例

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="YourApp.MainPage">

    <!-- 主内容区域 -->
    <ScrollView>
        <VerticalStackLayout Padding="20">
            <Label Text="主内容区域" />
            <!-- 你的页面内容 -->
        </VerticalStackLayout>
    </ScrollView>

    <!-- 底部菜单栏 -->
    <VerticalStackLayout Position="Absolute" 
                         Bottom="{OnPlatform Android=0, iOS=SafeAreaInsets.Bottom}" 
                         WidthRequest="100%" 
                         BackgroundColor="LightGray">
        <HorizontalStackLayout Padding="10" Spacing="20">
            <Button Text="文件" Clicked="FileMenu_Clicked" />
            <Button Text="编辑" Clicked="EditMenu_Clicked" />
            <Button Text="视图" Clicked="ViewMenu_Clicked" />
        </HorizontalStackLayout>
    </VerticalStackLayout>

    <!-- 文件下拉菜单Popup -->
    <toolkit:Popup x:Name="FileMenuPopup" Size="200,300">
        <VerticalStackLayout BackgroundColor="White" Padding="5">
            <Button Text="新建" Clicked="NewFile_Clicked" Margin="5" />
            <Button Text="打开" Clicked="OpenFile_Clicked" Margin="5" />
            <Button Text="保存" Clicked="SaveFile_Clicked" Margin="5" />
            <Button Text="退出" Clicked="Exit_Clicked" Margin="5" />
        </VerticalStackLayout>
    </toolkit:Popup>

    <!-- 编辑下拉菜单Popup -->
    <toolkit:Popup x:Name="EditMenuPopup" Size="200,250">
        <VerticalStackLayout BackgroundColor="White" Padding="5">
            <Button Text="复制" Clicked="Copy_Clicked" Margin="5" />
            <Button Text="粘贴" Clicked="Paste_Clicked" Margin="5" />
            <Button Text="删除" Clicked="Delete_Clicked" Margin="5" />
        </VerticalStackLayout>
    </toolkit:Popup>
</ContentPage>

3. 后台代码实现交互逻辑 #

using CommunityToolkit.Maui.Views;

namespace YourApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void FileMenu_Clicked(object sender, EventArgs e)
    {
        FileMenuPopup.Show();
    }

    private void EditMenu_Clicked(object sender, EventArgs e)
    {
        EditMenuPopup.Show();
    }

    private void ViewMenu_Clicked(object sender, EventArgs e)
    {
        // 同理实现视图菜单的Popup弹出逻辑
    }

    // 菜单项点击事件示例
    private void NewFile_Clicked(object sender, EventArgs e)
    {
        // 执行新建文件逻辑
        FileMenuPopup.Close();
    }

    private void OpenFile_Clicked(object sender, EventArgs e)
    {
        // 执行打开文件逻辑
        FileMenuPopup.Close();
    }
}

4. 适配细节 #

• 安卓端：通过SafeArea属性避免布局被系统底部导航栏遮挡，可调整背景色和按钮样式匹配系统风格。
• iOS端：利用OnPlatform指令自动适配底部安全区域，弹出菜单可添加圆角、阴影优化视觉效果。
• 若需要更贴近Windows菜单的样式，可通过自定义Handler或渲染器修改Popup的边框、动画效果。

替代方案：Shell TabBar改造 #

如果仅需要简单的底部导航式菜单，可利用MAUI Shell的TabBar实现，将每个Tab作为菜单入口：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="YourApp.AppShell">

    <TabBar>
        <Tab Title="文件" Icon="file.png">
            <ShellContent ContentTemplate="{DataTemplate local:FileMenuPage}" />
        </Tab>
        <Tab Title="编辑" Icon="edit.png">
            <ShellContent ContentTemplate="{DataTemplate local:EditMenuPage}" />
        </Tab>
    </TabBar>
</Shell>

该方案适合导航场景，复杂下拉交互优先选择自定义布局+Popup方案。

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