.Net Maui 对齐外壳选项卡

Question

我有一个使用 Shell 选项卡的 .Net Maui 项目。应用程序底部的选项卡完美对齐，均匀地填充所有空间。内容页面上插入的选项卡向左对齐并且未填充所有空间。

如您所见，底部的选项卡按照我想要填充所有可用空间的方式对齐。标记为 11/7、11/8、11/9 和 11/10 的选项卡向左对齐。我想要的是它们与底部的选项卡对齐，填充所有可用空间并且宽度均匀。

这是 Shell 中 TabBar 的代码块。

 <TabBar>
    <Tab Title="Dashboard">
        <Tab.Icon>
            <FontImageSource FontFamily="FAS"
                                 Glyph="{x:Static fontAwesome:FontAwesomeIcons.House}"
                                 Color="Black"/>
        </Tab.Icon>
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
    </Tab>
    <Tab Title="Sessions" >
        <Tab.Icon>
            <FontImageSource FontFamily="FAS" 
                                 Glyph="{x:Static fontAwesome:FontAwesomeIcons.ChalkboardUser}"
                                 Color="Black"/>
        </Tab.Icon>
        <ShellContent Title="11/7" ContentTemplate="{DataTemplate local:SessionsDay1}" Route="SessionsDay1"/>
        <ShellContent Title="11/8" ContentTemplate="{DataTemplate local:SessionsDay2}" Route="SessionsDay2"/>
        <ShellContent Title="11/9" ContentTemplate="{DataTemplate local:SessionsDay3}" Route="SessionsDay3"/>
        <ShellContent Title="11/10" ContentTemplate="{DataTemplate local:SessionsDay4}" Route="SessionsDay4"/>
    </Tab>
    <Tab Title="Schedule">
        <Tab.Icon>
            <FontImageSource FontFamily="FAS" 
                                 Glyph="{x:Static fontAwesome:FontAwesomeIcons.CalendarDays}"
                                 Color="Black"/>
        </Tab.Icon>
        <ShellContent ContentTemplate="{DataTemplate local:Schedule}" Route="Schedule"/>
    </Tab>
    <Tab Title="Speakers" FlyoutItemIsVisible="False">
        <Tab.Icon>
            <FontImageSource FontFamily="FAS" 
                                 Glyph="{x:Static fontAwesome:FontAwesomeIcons.Users}"
                                 Color="Black"/>
        </Tab.Icon>
        <ShellContent ContentTemplate="{DataTemplate local:Speakers}" Route="Speakers"/>
    </Tab>
    <Tab Title="Menu">
        <Tab.Icon>
            <FontImageSource FontFamily="FAS" 
                                 Glyph="{x:Static fontAwesome:FontAwesomeIcons.Bars}"
                                 Color="Black"/>
        </Tab.Icon>
        <ShellContent ContentTemplate="{DataTemplate local:Menu}" Route="Menu"/>
    </Tab>
</TabBar>

Answer 1

要均匀对齐 Maui Shell 选项卡的

width

，您可以使用 在 .NET MAUI 中使用自定义渲染器 来实现。

以下是详细步骤：

1. 在

   CustomShellRenderer.cs

   下创建特定于平台的实现文件

   Platform/Android

   ：

using AndroidApp = Android.App.Application;

namespace MauiAppShell.Platforms.Android
{
    public class CustomShellRenderer : ShellRenderer
    {
        /// <summary>
        /// CustomShellRenderer
        /// </summary>
        /// <param name="context"></param>
        public CustomShellRenderer(Context context) : base(context)
        {
            
        }

        protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
        {
            return new MyTabLayoutAppearanceTracker(this);
        }
    }
    /// <summary>  
    /// CustomShellItemRenderer  
    /// </summary>  
    public class MyTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
    {
        public MyTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext)
        {
        }
        public override void SetAppearance(TabLayout tabLayout, ShellAppearance appearance)
        {
            base.SetAppearance(tabLayout, appearance);
            var displayWidth = (int)DeviceDisplay.MainDisplayInfo.Width;
            for (int i = 0; i < tabLayout.TabCount; i++)
            {
                TabLayout.Tab tab = tabLayout.GetTabAt(i);
                if (tab.CustomView == null)
                {
                    TextView textview = new TextView(AndroidApp.Context)
                    {
                        Text = tabLayout.GetTabAt(i).Text,
                        TextSize = 20,
                        Typeface = Typeface.DefaultBold,
                        Gravity = GravityFlags.Center
                    };
                    textview.SetWidth(displayWidth / 5);
                    tab.SetCustomView(textview);
                }
            }
        }
    }
}

3. 最后，在

   MauiProgram.cs

   中注册我们的处理程序：

    .ConfigureMauiHandlers(handlers => { 
#if ANDROID
         
    handlers.AddHandler(typeof(Shell),typeof(CustomShellRenderer));
#endif
})

输出：

Answer 2

亚历山大答案的简化。为我工作：

using Android.Content;
using Google.Android.Material.Tabs;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;

namespace Echo_Lingo.Platforms.Android;

public class CustomShellRenderer : ShellRenderer
{
    /// <summary>
    /// CustomShellRenderer
    /// </summary>
    /// <param name="context"></param>
    public CustomShellRenderer(Context context) : base(context)
    {

    }

    protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
    {
        return new MyTabLayoutAppearanceTracker(this);
    }
}
/// <summary>  
/// CustomShellItemRenderer  
/// </summary>  
public class MyTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
{
    public MyTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext)
    {
    }
    public override void SetAppearance(TabLayout tabLayout, ShellAppearance appearance)
    {
        base.SetAppearance(tabLayout, appearance);

        tabLayout.TabMode = TabLayout.ModeFixed;
        tabLayout.TabGravity = TabLayout.GravityFill;
    }
}