如何在 MAUI 中制作自定义选项卡式页面？-解网

问：

我创建了一个选项卡式页面，我正在尝试实现这种底部选项卡栏。 enter image description here

我设法使用 TabbedViewHandler 在 Android 中执行此操作，但是自定义标签栏后面有一个不需要的白色层，我该如何删除它？而且我找不到适用于 iOS 的类似解决方案。

enter image description here

我在 Android 上尝试了这个：

using Microsoft.Maui.Handlers;
using Microsoft.Maui.Controls.Platform;
using System.Reflection;
#if ANDROID
using static Android.Views.ViewGroup;
using Android.Graphics.Drawables;
using Google.Android.Material.BottomNavigation;
using AndroidX.Core.View;
#endif

namespace Project.Views.Handlers
{
    public class AndroidTabbedPageHandler : TabbedViewHandler
    {
        public AndroidTabbedPageHandler()
        {
            Mapper.AppendToMapping(nameof(CustomTabbedPage), (handler, view) =>
            {
#if ANDROID
                if (view is CustomTabbedPage)
                {
                    FieldInfo tabbedPageManagerFieldInfo = typeof(TabbedPage).GetField("_tabbedPageManager", BindingFlags.NonPublic | BindingFlags.Instance);
                    object tabbedPageManager = tabbedPageManagerFieldInfo?.GetValue(view);

                    FieldInfo tabLayoutFieldInfo = tabbedPageManager?.GetType().GetField("_bottomNavigationView", BindingFlags.NonPublic | BindingFlags.Instance);
                    BottomNavigationView bottomNavigationView = tabLayoutFieldInfo?.GetValue(tabbedPageManager) as BottomNavigationView;

                    if (bottomNavigationView != null)
                    {
                        GradientDrawable drawable = new GradientDrawable();
                        drawable.SetShape(ShapeType.Rectangle);
                        drawable.SetColor(Android.Graphics.Color.White);
                        drawable.SetCornerRadius(40);
                        MarginLayoutParams layoutParams = new(LayoutParams.WrapContent, LayoutParams.WrapContent);
                        layoutParams.SetMargins(20, 0, 20, 40);
                        bottomNavigationView.LayoutParameters = layoutParams;
                        bottomNavigationView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
                        bottomNavigationView.SetElevation(12);
                        ViewCompat.SetBackground(bottomNavigationView, drawable);
                    }
                }
#endif
            });
        }
    }
}

毛伊岛处理程序 UITabbar BottomNavigationView TabbedPage

    public class CustomTabbar : TabbedRenderer
    {
#if iOS
        public override void ViewDidLayoutSubviews()
        {
            Tabbar.Layer.CornerRadius = 40;
            Tabbar.Layer.MasksToBounds = True;
            TabBar.Frame = new CoreGraphics.CGRect(TabBar.Frame.X + 10, TabBar.Frame.Y - 20, TabBar.Frame.Width - 20, TabBar.Frame.Height + 5);
        }
#end if
    }

上一个：React、JWT/Cookie 和路由

下一个：如何在底部导航视图中更改所选项目叠加？

如何在 MAUI 中制作自定义选项卡式页面？

How can I make custom tabbed page in MAUI?

评论