如何在MAUI中使用平台特定控件实现全局底部导航栏

嘿，我完全get你的需求——之前想做全局自定义导航栏，发现没法像NavigationPage的TitleView那样全局复用，转而想用平台原生的底部导航控件，还在纠结Handlers是不是正确方向对吧？其实Handlers确实是MAUI里实现这类平台特定需求的最佳实践之一，我给你一步步拆解具体怎么做：

整体思路 #

我们要做的是：在跨平台层定义一个「全局底部导航页面」的抽象类，然后在iOS和Android平台分别用Handlers把这个抽象类映射到原生的UITabBarController（iOS）和BottomNavigationView（Android），最后把这个页面作为App的根页面，就能实现全局可见的原生底部导航了。

第一步：编写跨平台共享代码 #

先在共享项目里定义两个核心类：一个是承载全局导航的页面类，另一个是导航项的实体类。

// 全局底部导航页面类
public class GlobalBottomNavPage : ContentPage
{
    // 选中的导航项索引绑定属性
    public static readonly BindableProperty SelectedTabIndexProperty =
        BindableProperty.Create(nameof(SelectedTabIndex), typeof(int), typeof(GlobalBottomNavPage), 0, 
                               propertyChanged: OnSelectedTabIndexChanged);

    // 导航项集合绑定属性
    public static readonly BindableProperty TabItemsProperty =
        BindableProperty.Create(nameof(TabItems), typeof(List<TabItem>), typeof(GlobalBottomNavPage), new List<TabItem>());

    public int SelectedTabIndex
    {
        get => (int)GetValue(SelectedTabIndexProperty);
        set => SetValue(SelectedTabIndexProperty, value);
    }

    public List<TabItem> TabItems
    {
        get => (List<TabItem>)GetValue(TabItemsProperty);
        set => SetValue(TabItemsProperty, value);
    }

    // 选中索引变化时切换页面内容
    private static void OnSelectedTabIndexChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is GlobalBottomNavPage page && newValue is int index)
        {
            var selectedItem = page.TabItems[index];
            page.Content = selectedItem.Page;
        }
    }
}

// 导航项实体类，用来配置每个tab的标题、图标和对应页面
public class TabItem
{
    public string Title { get; set; }
    public string Icon { get; set; }
    public Page Page { get; set; }
}

第二步：实现Android平台Handler #

在Platforms/Android/Handlers目录下创建Android平台的Handler，把GlobalBottomNavPage映射到Android原生的BottomNavigationView：

using Android.Content;
using Android.Widget;
using AndroidX.AppCompat.Widget;
using Microsoft.Maui.Handlers;
using YourAppNamespace; // 替换成你的项目命名空间

namespace YourAppNamespace.Platforms.Android.Handlers;

public class GlobalBottomNavPageHandler : ViewHandler<GlobalBottomNavPage, LinearLayout>
{
    private BottomNavigationView _bottomNav;
    private FrameLayout _contentFrame;

    protected override LinearLayout CreatePlatformView()
    {
        var context = Context;
        // 构建垂直布局：上面是内容区域，下面是底部导航
        var linearLayout = new LinearLayout(context)
        {
            Orientation = Orientation.Vertical
        };

        // 创建内容容器，用来加载选中的页面
        _contentFrame = new FrameLayout(context);
        linearLayout.AddView(_contentFrame, new LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.MatchParent, 0, 1));

        // 创建底部导航控件
        _bottomNav = new BottomNavigationView(context);
        var menu = _bottomNav.Menu;
        menu.Clear();

        // 把共享层的TabItems转换成Android菜单
        foreach (var tabItem in VirtualView.TabItems)
        {
            var menuItem = menu.Add(0, VirtualView.TabItems.IndexOf(tabItem), Menu.None, tabItem.Title);
            // 这里可以设置图标，比如 menuItem.SetIcon(Resource.Drawable.ic_home);
            // 注意Android图标要放在Resources/Drawable目录，命名全小写
        }

        // 绑定导航选中事件，同步到共享层的SelectedTabIndex
        _bottomNav.NavigationItemSelected += (s, e) =>
        {
            VirtualView.SelectedTabIndex = e.Item.ItemId;
        };

        linearLayout.AddView(_bottomNav, new LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent));

        return linearLayout;
    }

    protected override void ConnectHandler(LinearLayout platformView)
    {
        base.ConnectHandler(platformView);
        // 初始化加载第一个页面
        UpdateContent();
    }

    protected override void DisconnectHandler(LinearLayout platformView)
    {
        _bottomNav.NavigationItemSelected -= (s, e) => VirtualView.SelectedTabIndex = e.Item.ItemId;
        base.DisconnectHandler(platformView);
    }

    // 更新共享层属性时同步到原生控件
    public override void UpdateValue(string propertyName)
    {
        base.UpdateValue(propertyName);
        if (propertyName == GlobalBottomNavPage.SelectedTabIndexProperty.PropertyName)
        {
            UpdateContent();
            _bottomNav.SelectedItemId = VirtualView.SelectedTabIndex;
        }
        else if (propertyName == GlobalBottomNavPage.TabItemsProperty.PropertyName)
        {
            // 导航项变化时重新构建菜单
            var menu = _bottomNav.Menu;
            menu.Clear();
            foreach (var tabItem in VirtualView.TabItems)
            {
                var menuItem = menu.Add(0, VirtualView.TabItems.IndexOf(tabItem), Menu.None, tabItem.Title);
                // 重新设置图标
            }
        }
    }

    // 更新内容区域的页面
    private void UpdateContent()
    {
        _contentFrame.RemoveAllViews();
        var selectedPage = VirtualView.TabItems[VirtualView.SelectedTabIndex].Page;
        var pageHandler = selectedPage.ToHandler(MauiContext);
        _contentFrame.AddView(pageHandler.PlatformView);
    }
}

第三步：实现iOS平台Handler #

在Platforms/iOS/Handlers目录下创建iOS平台的Handler，映射到原生的UITabBarController：

using UIKit;
using Microsoft.Maui.Handlers;
using YourAppNamespace; // 替换成你的项目命名空间

namespace YourAppNamespace.Platforms.iOS.Handlers;

public class GlobalBottomNavPageHandler : ViewHandler<GlobalBottomNavPage, UIView>
{
    private UITabBarController _tabBarController;

    protected override UIView CreatePlatformView()
    {
        _tabBarController = new UITabBarController();
        var viewControllers = new List<UIViewController>();

        // 把共享层的TabItems转换成iOS的ViewController
        foreach (var tabItem in VirtualView.TabItems)
        {
            var pageViewController = tabItem.Page.ToHandler(MauiContext).PlatformView as UIViewController;
            pageViewController.TabBarItem = new UITabBarItem(
                tabItem.Title, 
                UIImage.FromBundle(tabItem.Icon), // 图标放在Resources/Images目录
                VirtualView.TabItems.IndexOf(tabItem)
            );
            viewControllers.Add(pageViewController);
        }

        _tabBarController.ViewControllers = viewControllers.ToArray();
        _tabBarController.SelectedIndex = VirtualView.SelectedTabIndex;

        // 绑定选中事件同步到共享层
        _tabBarController.SelectedIndexChanged += (s, e) =>
        {
            VirtualView.SelectedTabIndex = _tabBarController.SelectedIndex;
        };

        return _tabBarController.View;
    }

    protected override void DisconnectHandler(UIView platformView)
    {
        _tabBarController.SelectedIndexChanged -= (s, e) => VirtualView.SelectedTabIndex = _tabBarController.SelectedIndex;
        base.DisconnectHandler(platformView);
    }

    // 更新共享层属性时同步到原生控件
    public override void UpdateValue(string propertyName)
    {
        base.UpdateValue(propertyName);
        if (propertyName == GlobalBottomNavPage.SelectedTabIndexProperty.PropertyName)
        {
            _tabBarController.SelectedIndex = VirtualView.SelectedTabIndex;
        }
        else if (propertyName == GlobalBottomNavPage.TabItemsProperty.PropertyName)
        {
            var viewControllers = new List<UIViewController>();
            foreach (var tabItem in VirtualView.TabItems)
            {
                var pageViewController = tabItem.Page.ToHandler(MauiContext).PlatformView as UIViewController;
                pageViewController.TabBarItem = new UITabBarItem(tabItem.Title, UIImage.FromBundle(tabItem.Icon), VirtualView.TabItems.IndexOf(tabItem));
                viewControllers.Add(pageViewController);
            }
            _tabBarController.ViewControllers = viewControllers.ToArray();
        }
    }
}

第四步：注册Handler并使用 #

在MauiProgram.cs里注册我们写的两个平台Handler：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<GlobalBottomNavPage, Platforms.Android.Handlers.GlobalBottomNavPageHandler>();
#elif IOS
    handlers.AddHandler<GlobalBottomNavPage, Platforms.iOS.Handlers.GlobalBottomNavPageHandler>();
#endif
});

最后在App.xaml.cs里把GlobalBottomNavPage设为根页面，配置导航项：

public App()
{
    InitializeComponent();

    MainPage = new GlobalBottomNavPage
    {
        TabItems = new List<TabItem>
        {
            new TabItem { Title = "首页", Icon = "home.png", Page = new HomePage() },
            new TabItem { Title = "我的", Icon = "profile.png", Page = new ProfilePage() },
            // 可以添加更多tab
        }
    };
}

一些注意事项 #

• 图标处理：iOS图标放Resources/Images目录，Android放Resources/Drawable目录，Android图标命名必须全小写，不能有特殊字符。
• 嵌套导航：如果需要每个tab里支持页面跳转，可以把TabItem的Page设置为new NavigationPage(new HomePage())。
• 样式自定义：如果要修改底部导航的样式（比如背景色、文字颜色），直接在平台Handler里修改原生控件的属性即可，比如Android的_bottomNav.SetBackgroundColor()，iOS的_tabBarController.TabBar.BarTintColor。
• 生命周期：因为用的是原生控件，MAUI页面的生命周期事件（比如OnAppearing）会正常触发，和原生体验一致。

这样就能实现完全基于原生控件的全局底部导航栏了，不用在每个页面重复写代码，还能获得符合系统规范的交互体验~

备注：内容来源于stack exchange，提问作者Holunk