.NET MAUI中如何为TabBar元素设置圆角？

方法一：自定义Shell Renderer #

通过创建Shell的自定义渲染器，直接控制Android端BottomNavigationView的外观属性：

1. 创建Shell渲染器类

using Android.Content;
using Xamarin.Forms.Platform.Android;
using YourAppNamespace;
using YourAppNamespace.Droid;

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace YourAppNamespace.Droid
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new CustomBottomNavAppearanceTracker();
        }
    }
}

2. 实现自定义外观追踪器

using AndroidX.Navigation.UI;
using Xamarin.Forms.Platform.Android;

namespace YourAppNamespace.Droid
{
    public class CustomBottomNavAppearanceTracker : IShellBottomNavViewAppearanceTracker
    {
        public void Dispose()
        {
        }

        public void ResetAppearance(AndroidX.Navigation.UI.BottomNavigationView bottomView)
        {
            // 可选：重置样式时的逻辑
        }

        public void SetAppearance(AndroidX.Navigation.UI.BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            // 自定义选中/未选中的图标和文字颜色
            var colorStateList = new Android.Content.Res.ColorStateList(
                new int[][]
                {
                    new int[] { Android.Resource.Attribute.StateChecked },
                    new int[] { }
                },
                new int[]
                {
                    Android.Graphics.Color.ParseColor("#FF0000"), // 选中颜色
                    Android.Graphics.Color.ParseColor("#808080")  // 未选中颜色
                });
            bottomView.ItemIconTintList = colorStateList;
            bottomView.ItemTextColor = colorStateList;

            // 修改TabBar背景色
            bottomView.SetBackgroundColor(Android.Graphics.Color.ParseColor("#FFFFFF"));

            // 调整文字大小
            var menu = bottomView.Menu;
            for (int i = 0; i < menu.Size(); i++)
            {
                var textView = bottomView.FindViewById<Android.Widget.TextView>(menu.GetItem(i).ItemId);
                textView?.SetTextSize(Android.Util.ComplexUnitType.Sp, 12);
            }
        }
    }
}

方法二：通过Android资源文件全局配置 #

如果需要统一应用全局样式，直接修改Android项目的资源文件更高效：

1. 修改styles.xml（Resources/values/styles.xml）

<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- 关联自定义BottomNavigation样式 -->
        <item name="bottomNavigationStyle">@style/CustomBottomNavigation</item>
    </style>

    <style name="CustomBottomNavigation" parent="Widget.MaterialComponents.BottomNavigationView">
        <!-- TabBar背景色 -->
        <item name="android:background">#FFFFFF</item>
        <!-- 关联颜色选择器 -->
        <item name="itemIconTint">@color/bottom_nav_color</item>
        <item name="itemTextColor">@color/bottom_nav_color</item>
        <!-- 统一文字大小 -->
        <item name="itemTextAppearanceActive">@style/CustomBottomNavText</item>
        <item name="itemTextAppearanceInactive">@style/CustomBottomNavText</item>
    </style>

    <style name="CustomBottomNavText" parent="TextAppearance.MaterialComponents.Caption">
        <item name="android:textSize">12sp</item>
    </style>
</resources>

2. 添加颜色选择器（Resources/values/colors.xml）

<resources>
    <color name="bottom_nav_checked">#FF0000</color>
    <color name="bottom_nav_unchecked">#808080</color>

    <selector name="bottom_nav_color">
        <item android:color="@color/bottom_nav_checked" android:state_checked="true"/>
        <item android:color="@color/bottom_nav_unchecked"/>
    </selector>
</resources>

进阶说明 #

如果需要更复杂的自定义（比如修改TabBar高度、添加自定义布局），可以在自定义Renderer中替换BottomNavigationView为自定义布局，或者通过反射修改内部控件的属性。

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