MAUI中全局自定义底部导航控件（非TabBar）实现咨询

MAUI没有直接提供完全匹配你需求的内置控件，但可以通过布局嵌套+自定义控件的方式轻松实现——核心思路是把导航容器和底部控件放在同一个根布局里，让底部控件脱离导航栈的页面层级，从而在页面跳转时保持固定不变。

实现步骤 #

1. 构建根布局结构 #

在App.xaml或主页面中，用Grid作为根布局，将NavigationPage（或你使用的其他导航容器）放在第一行占据主要空间，自定义底部导航控件放在第二行固定在底部：

<Grid>
    <!-- 导航容器，占据除底部外的所有区域 -->
    <NavigationPage x:Name="MainNav">
        <x:Arguments>
            <!-- 设置初始页面 -->
            <local:HomePage />
        </x:Arguments>
    </NavigationPage>

    <!-- 自定义底部导航控件 -->
    <ContentView Grid.Row="1" BackgroundColor="#f8f8f8" HeightRequest="60">
        <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" VerticalOptions="Center">
            <!-- 导航项示例 -->
            <Button Text="首页" Command="{Binding NavigateToHomeCommand}" Style="{StaticResource NavButtonStyle}" />
            <Button Text="消息" Command="{Binding NavigateToMessageCommand}" Style="{StaticResource NavButtonStyle}" />
            <Button Text="我的" Command="{Binding NavigateToProfileCommand}" Style="{StaticResource NavButtonStyle}" />
        </StackLayout>
    </ContentView>
</Grid>

2. 实现导航逻辑 #

在对应的ViewModel或页面后台代码中，直接操作NavigationPage的导航栈来实现页面跳转，同时避免重复推送页面：

public ICommand NavigateToHomeCommand => new Command(() =>
{
    // 回到首页并清空导航栈
    MainNav.Navigation.PopToRootAsync();
});

public ICommand NavigateToMessageCommand => new Command(async () =>
{
    // 检查是否已存在消息页面，避免重复创建
    var existingPage = MainNav.Navigation.NavigationStack.FirstOrDefault(p => p is MessagePage);
    if (existingPage != null)
    {
        MainNav.Navigation.RemovePage(existingPage);
    }
    await MainNav.Navigation.PushAsync(new MessagePage());
});

public ICommand NavigateToProfileCommand => new Command(async () =>
{
    var existingPage = MainNav.Navigation.NavigationStack.FirstOrDefault(p => p is ProfilePage);
    if (existingPage != null)
    {
        MainNav.Navigation.RemovePage(existingPage);
    }
    await MainNav.Navigation.PushAsync(new ProfilePage());
});

3. 优化交互体验 #

• 给当前选中的导航项添加高亮样式，比如改变文字颜色或背景色
• 在页面的OnAppearing方法中同步更新底部导航的选中状态，适配页面返回场景
• 将底部导航封装为独立自定义控件，提升代码复用性

替代方案：基于MAUI Shell实现 #

如果你的项目使用MAUI Shell，也可以通过自定义Shell.FlyoutFooter或直接在Shell布局中嵌入底部控件来实现固定导航，注意调整Shell的默认结构确保底部控件不随页面切换变化：

<Shell>
    <Shell.ItemTemplate>
        <!-- 页面模板定义 -->
    </Shell.ItemTemplate>

    <!-- 自定义底部导航区域 -->
    <Shell.FlyoutFooter>
        <ContentView HeightRequest="60" BackgroundColor="#f8f8f8">
            <!-- 导航项布局 -->
        </ContentView>
    </Shell.FlyoutFooter>
</Shell>

这种方式需要适配Shell的导航逻辑，可根据项目架构选择更合适的实现方案。

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