.NET MAUI Shell应用如何为iOS和Android导航栏添加渐变？

下面是亲测有效的iOS端实现方案，基于MAUI自定义Handler修改原生导航栏，解决你之前尝试多种方法未成功的问题：

实现步骤 #

1. 封装渐变层工具类 #

先写个辅助类封装渐变逻辑，方便后续复用：

using CoreAnimation;
using CoreGraphics;
using UIKit;

namespace YourAppName.iOS.Handlers;

public static class GradientHelper
{
    public static CAGradientLayer CreateGradientLayer(CGRect frame, UIColor startColor, UIColor endColor)
    {
        var gradientLayer = new CAGradientLayer
        {
            Frame = frame,
            Colors = new CGColor[] { startColor.CGColor, endColor.CGColor },
            StartPoint = new CGPoint(0, 0),
            EndPoint = new CGPoint(1, 0) // 水平渐变，可按需调整为垂直(0,0)-(0,1)
        };
        return gradientLayer;
    }
}

2. 自定义Shell导航栏Handler #

在iOS项目中创建自定义Handler，替换默认导航栏背景：

using Microsoft.Maui.Handlers;
using UIKit;
using CoreAnimation;

namespace YourAppName.iOS.Handlers;

public class CustomShellHandler : ShellHandler
{
    protected override void ConnectHandler(UIViewController platformView)
    {
        base.ConnectHandler(platformView);
        
        if (platformView.NavigationController?.NavigationBar is UINavigationBar navBar)
        {
            // 清除原生默认背景和阴影
            navBar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
            navBar.ShadowImage = new UIImage();
            
            // 创建并添加渐变层
            var gradientLayer = GradientHelper.CreateGradientLayer(navBar.Bounds, 
                UIColor.FromRGB(255, 107, 107), // 渐变起始色
                UIColor.FromRGB(255, 195, 113)); // 渐变结束色
            
            navBar.Layer.InsertSublayer(gradientLayer, 0);
            
            // 监听导航栏边界变化，适配屏幕旋转
            navBar.ObserveValueForKeyPath("bounds", null, NSKeyValueObservingOptions.New, IntPtr.Zero);
        }
    }

    protected override void DisconnectHandler(UIViewController platformView)
    {
        if (platformView.NavigationController?.NavigationBar is UINavigationBar navBar)
        {
            navBar.RemoveObserver(this, "bounds");
            // 清理渐变层
            foreach (var layer in navBar.Layer.Sublayers)
            {
                if (layer is CAGradientLayer)
                {
                    layer.RemoveFromSuperLayer();
                    break;
                }
            }
        }
        base.DisconnectHandler(platformView);
    }

    public override void ObserveValueForKeyPath(string? keyPath, NSObject? ofObject, NSKeyValueObservingOptions change, IntPtr context)
    {
        if (keyPath == "bounds" && ofObject is UINavigationBar navBar)
        {
            // 更新渐变层尺寸
            foreach (var layer in navBar.Layer.Sublayers)
            {
                if (layer is CAGradientLayer gradientLayer)
                {
                    gradientLayer.Frame = navBar.Bounds;
                    break;
                }
            }
        }
        base.ObserveValueForKeyPath(keyPath, ofObject, change, context);
    }
}

3. 注册自定义Handler #

在iOS项目的Program.cs中注册这个Handler：

using Microsoft.Maui.Hosting;
using YourAppName.iOS.Handlers;

namespace YourAppName.iOS;

public class Program
{
    static void Main(string[] args)
    {
        MauiProgram.CreateMauiApp().Run(args);
    }
}

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        // 注册自定义Shell Handler
        builder.ConfigureMauiHandlers(handlers =>
        {
#if IOS
            handlers.AddHandler<Shell, CustomShellHandler>();
#endif
        });

        return builder.Build();
    }
}

4. 调整Shell样式 #

在App.xaml中设置Shell导航栏为透明，避免覆盖渐变效果：

<Shell
    x:Class="YourAppName.App"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Shell.BackgroundColor="Transparent"
    Shell.NavBarIsVisible="True">

    <!-- 你的Shell页面结构 -->

</Shell>

额外说明 #

• 如果需要动态修改渐变颜色，可以在CustomShellHandler中添加方法，通过MessagingCenter或绑定属性触发更新
• 测试屏幕旋转时，渐变层会自动适配尺寸变化
• 若需要给TabBar加渐变，逻辑和导航栏一致，只需修改对应的原生控件处理

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