如何为Android和iOS的.NET MAUI底部导航TabBar添加顶部水平线？

你的现有代码存在几个问题：

• 类型判断错误：view是MAUI层面的TabbedView，不是Android原生的BottomNavigationView，得通过handler.PlatformView获取原生控件
• 水平线位置逻辑颠倒：当前代码把线放在了底部，而非顶部
• 仅实现了Android平台逻辑，缺少iOS端的处理

下面是修正后的完整双平台实现：

Android平台代码 #

Microsoft.Maui.Handlers.TabbedViewHandler.Mapper.AppendToMapping("TabBarTopLine", (handler, view) =>
{
#if __ANDROID__
    if (handler.PlatformView is AndroidX.AppCompat.Widget.BottomNavigationView bottomNav)
    {
        // 创建顶部水平线的Drawable
        var lineDrawable = new Android.Graphics.Drawables.ShapeDrawable();
        lineDrawable.Paint.Color = Android.Graphics.Color.Black;
        lineDrawable.Paint.SetStyle(Android.Graphics.Paint.Style.Fill);
        
        // 保留原有背景，与水平线组合成图层
        var drawables = new List<Android.Graphics.Drawables.Drawable>();
        if (bottomNav.Background != null)
        {
            drawables.Add(bottomNav.Background);
        }
        drawables.Add(lineDrawable);
        
        var layerDrawable = new Android.Graphics.Drawables.LayerDrawable(drawables.ToArray());
        // 线高设为1dp并转成像素，设置水平线在顶部位置
        int lineHeight = (int)Android.Content.Res.Resources.System.DisplayMetrics.Density;
        layerDrawable.SetLayerInset(drawables.Count - 1, 0, 0, 0, bottomNav.Height - lineHeight);
        
        bottomNav.SetBackground(layerDrawable);
    }
#endif
});

iOS平台代码 #

Microsoft.Maui.Handlers.TabbedViewHandler.Mapper.AppendToMapping("TabBarTopLine", (handler, view) =>
{
#if __IOS__
    if (handler.PlatformView is UIKit.UITabBar tabBar)
    {
        // 创建顶部线条，用UIVisualEffectView适配模糊背景，也可直接使用UIView
        var topLine = new UIKit.UIVisualEffectView(UIKit.UIBlurEffect.FromStyle(UIKit.UIBlurEffectStyle.Light))
        {
            Frame = new CoreGraphics.CGRect(0, 0, tabBar.Bounds.Width, 1),
            BackgroundColor = UIKit.UIColor.Black
        };
        // 通过标签避免重复添加线条
        foreach (var subview in tabBar.Subviews)
        {
            if (subview.Tag == 999)
            {
                subview.RemoveFromSuperview();
                break;
            }
        }
        topLine.Tag = 999;
        tabBar.AddSubview(topLine);
    }
#endif
});

关键说明 #

• 使用自定义的"TabBarTopLine"作为映射标识，避免和系统自带的Background映射冲突
• Android端保留了原有TabBar的背景样式，不会覆盖你之前设置的自定义背景
• iOS端通过标签判断防止重复创建线条，避免多次触发映射时出现控件冗余

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