c# - 如何在 MAUI 应用程序中创建自定义 TabBar？

Question

我想在 MAUI 应用程序(Android 和 Windows)中创建自定义 TabBar。我希望上边缘是圆形的并添加一些其他定制。我尝试过的:

• shell 的 TabBar 控件根本不可自定义...我是 尝试使用 shell 自定义渲染器，但我不太确定 我如何在 MAUI 中实现自定义外观以及如何实现它。
• 我没有使用 shell 的 TabBar，而是创建了一个派生自 ContentView 类的自定义 TabBar，并使用 TapGestureRecogniser 在单击图像时导航到新页面。我在底部的每个页面中都使用了这个自定义控件。但当我导航到不同的页面时，它导致了闪烁的转换。 TabBar 在导航过程中闪烁看起来很奇怪。

还有哪些其他方法可以实现自定义外观？或者我在之前的尝试中错过了什么？

Answer 1

要添加功能或改变行为需要进行一些研究，但这是非常有值(value)的。这就是我们所做的，让代码服从我们的意愿。唯一需要考虑的是它是可维护和可测试的。否则就发疯，做出令人惊奇的事情。

通常，您为此使用处理程序，这始终是您的第一选择，但在 TabBar 的情况下，没有处理程序，因此您需要使用渲染，这是 Xamarin.Forms 的旧方法。我将在代码中为您提供一些入门指南，以便您可以测试并找到解决方法。

首先您需要了解一些关于 renderers 的信息。因此，我们需要为此使用 ShellRenderer，因为您可以在这里找到 TabBar

所以让我们从 ShellRenderer 派生。如果我们查看ShellRenderer内部，我们会发现有一个看起来像什么的方法 我们想要并且可以覆盖:

protected virtual IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem);

因此，让我们通过向 Android 平台添加一个新文件来制作新的渲染器并从那里开始(您需要在每个平台上制作此类文件)。

partial class ShellHandlerEx : ShellRenderer
{
    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new ShellBottomNavViewAppearanceTrackerEx(this, shellItem.CurrentItem);
    }
}

正如您从代码和返回类型中看到的，我们需要添加另一个文件来对 TabBar 进行实际更改，并且该文件派生自 IShellBottomNavViewAppearanceTracker:

class ShellBottomNavViewAppearanceTrackerEx : ShellBottomNavViewAppearanceTracker
{
    private readonly IShellContext shellContext;

    public ShellBottomNavViewAppearanceTrackerEx(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem)
    {
        this.shellContext = shellContext;
    }

    public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
    {
        base.SetAppearance(bottomView, appearance);
        var backgroundDrawable = new GradientDrawable();
        backgroundDrawable.SetShape(ShapeType.Rectangle);
        backgroundDrawable.SetCornerRadii(new float[] { 30, 30, 30, 30, 0, 0, 0, 0 });
        bottomView.SetBackground(backgroundDrawable); 
    }
}

如果我们查看ShellBottomNavViewAppearanceTracker，我们会发现有一个可以重写的方法，称为SetAppearance。在这里，我们得到了 BottomNavigationView，当查看该 View 时，我们发现 SetBackground，它需要一个 Drawable。因此，我们了解了 Android 上的可绘制对象，并制作了可绘制对象并修复了角，这样您就拥有了顶部具有漂亮圆角的 TabBar。

我们需要做的最后一件事就是在我们的应用程序中注册它。与往常一样，我们在 Builder 的 MauiProgram.cs 中执行此操作。

var builder = MauiApp.CreateBuilder();
builder.UseMauiApp<App>()
    .UseMauiCommunityToolkit()
    .ConfigureMauiHandlers(handlers =>
    {
         handlers.AddHandler<Shell, ShellHandlerEx>();
    });

现在您需要在您希望其支持的所有平台上执行此操作。您仍然需要为那些您不支持的平台制作一个虚拟对象。

我希望本教程对您有所帮助。