.NET MAUI中实现可滑动TabView及解决TabBar空白问题咨询

一、实现TabBar标签左右滑动切换 #

AppShell原生TabBar不自带左右滑动切换功能，你可以通过以下两种方式实现：

方案1：自定义手势识别器实现 #

给每个页面添加滑动手势，触发时切换对应Tab：

1. 在对应页面的XAML中添加手势识别器：

<ContentPage.GestureRecognizers>
    <SwipeGestureRecognizer Direction="Left" Command="{Binding SwipeLeftCommand}" />
    <SwipeGestureRecognizer Direction="Right" Command="{Binding SwipeRightCommand}" />
</ContentPage.GestureRecognizers>

2. 在页面ViewModel中编写切换逻辑，通过Shell的CurrentItem属性切换Tab：

public ICommand SwipeLeftCommand => new Command(() =>
{
    if (Shell.Current.CurrentItem is TabBar tabBar)
    {
        var currentIndex = tabBar.Items.IndexOf(tabBar.CurrentItem);
        if (currentIndex < tabBar.Items.Count - 1)
        {
            tabBar.CurrentItem = tabBar.Items[currentIndex + 1];
        }
    }
});

public ICommand SwipeRightCommand => new Command(() =>
{
    if (Shell.Current.CurrentItem is TabBar tabBar)
    {
        var currentIndex = tabBar.Items.IndexOf(tabBar.CurrentItem);
        if (currentIndex > 0)
        {
            tabBar.CurrentItem = tabBar.Items[currentIndex - 1];
        }
    }
});

如果多个页面逻辑一致，可以封装成基类ViewModel复用代码。

方案2：使用第三方组件替代 #

使用CommunityToolkit.Maui的TabView组件，它原生支持滑动切换，完美替代原Xamarin Community Toolkit的TabView：

1. 安装NuGet包CommunityToolkit.Maui
2. 在MauiProgram.cs中初始化：

builder.UseMauiApp<App>().UseMauiCommunityToolkit();

3. 替换AppShell中的TabBar为TabView：

<ct:TabView>
    <ct:TabViewItem Icon="home.svg">
        <local:MainPage />
    </ct:TabViewItem>
    <ct:TabViewItem Icon="plus.svg">
        <local:SecondPage />
    </ct:TabViewItem>
    <ct:TabViewItem Icon="profile.svg">
        <local:ThirdPage />
    </ct:TabViewItem>
</ct:TabView>

需在XAML头部添加命名空间：xmlns:ct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

二、消除仅显示图标时的TabBar空白 #

原生TabBar默认预留文本区域，通过自定义ItemTemplate可以去掉空白：

1. 在AppShell的Resources中定义仅显示图标的模板：

<Shell.Resources>
    <local:TabColorConverter x:Key="TabColorConverter" />
    <DataTemplate x:Key="TabBarItemTemplate">
        <Grid Padding="10">
            <Image Source="{Binding Icon}"
                   HeightRequest="24"
                   WidthRequest="24"
                   VerticalOptions="Center"
                   HorizontalOptions="Center"
                   Color="{Binding Tab.IsSelected, Converter={StaticResource TabColorConverter}}" />
        </Grid>
    </DataTemplate>
</Shell.Resources>

2. 实现颜色转换器，处理选中/未选中图标的颜色：

public class TabColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? Color.FromHex("#ffca73") : Colors.Gray;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

3. 给TabBar指定自定义模板：

<TabBar Shell.TabBarBackgroundColor="White"
        Shell.TabBarItemTemplate="{StaticResource TabBarItemTemplate}">
    <!-- 你的Tab项 -->
</TabBar>

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