Sharpnado.Tabs.Maui 3.0.1

Pure MAUI 标签

• 固定标签（Android 标签样式）
• 可滚动标签
• 垂直标签
• 材料设计标签（顶部和带图标的引导）
• 懒加载和延时视图
• 支持 SVG 图片
• 分段标签
• 自定义阴影（准备就绪的立体主义风格）
• 标签上的徽章
• 标签栏中的圆形按钮
• 底部栏标签（iOS 标签样式）
• 自定义标签（创意制作，只需实现 TabItem 即可）
• 独立视图切换器
• 与 ItemsSource 绑定

安装

• 在 Core 项目中，在 MauiProgram.cs

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp()
        .UseSharpnadoTabs(loggerEnabled: false);
}

使用方法

首先创建一个 TabHostView，它将包含你的所有标签

<tabs:TabHostView WidthRequest="250"
                  HeightRequest="60"
                  Padding="20,0"
                  HorizontalOptions="Center"
                  BackgroundColor="{StaticResource Gray900}"
                  CornerRadius="30"
                  IsSegmented="True"
                  Orientation="Horizontal"
                  SegmentedOutlineColor="{StaticResource Gray950}"
                  SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}"
                  TabType="Fixed">
    <tabs:TabHostView.Shadow>
        <Shadow Brush="{StaticResource Primary}"
                Opacity="0.7"
                Radius="30"
                Offset="0,10" />
    </tabs:TabHostView.Shadow>
    <tabs:BottomTabItem Style="{StaticResource BottomTab}" Label="M" />
    <tabs:BottomTabItem Style="{StaticResource BottomTab}" Label="A">
        <tabs:BottomTabItem.Badge>
            <tabs:BadgeView BackgroundColor="{StaticResource Tertiary}" Text="new" />
        </tabs:BottomTabItem.Badge>
    </tabs:BottomTabItem>
    <tabs:UnderlinedTabItem FontFamily="OpenSansExtraBold"
                            Label="U"
                            LabelSize="36"
                            SelectedTabColor="{StaticResource Primary}"
                            UnselectedLabelColor="{StaticResource White}" />
    <tabs:BottomTabItem Style="{StaticResource BottomTab}"
                        Padding="0,0,10,0"
                        Label="I">
        <tabs:BottomTabItem.Badge>
            <tabs:BadgeView BackgroundColor="{StaticResource Tertiary}" Text="2" />
        </tabs:BottomTabItem.Badge>
    </tabs:BottomTabItem>
</tabs:TabHostView>

然后将 SelectedIndex 绑定到一个 ViewSwitcher，它将相应地选择你的视图。

<tabs:ViewSwitcher x:Name="Switcher"
                           Grid.RowSpan="3"
                           Margin="0"
                           Animate="True"
                           SelectedIndex="{Binding SelectedViewModelIndex, Mode=TwoWay}">
    <tabs:DelayedView x:TypeArguments="views:TabM"
                        AccentColor="{StaticResource Primary}"
                        Animate="True"
                        BindingContext="{Binding HomePageViewModel}"
                        UseActivityIndicator="True" />
    <tabs:DelayedView x:TypeArguments="views:TabA"
                        AccentColor="{StaticResource Primary}"
                        Animate="True"
                        UseActivityIndicator="True" />
    <tabs:DelayedView x:TypeArguments="views:TabU"
                        AccentColor="{StaticResource Primary}"
                        Animate="True"
                        UseActivityIndicator="True" />
    <tabs:LazyView x:TypeArguments="views:TabI" Animate="True" />
</tabs:ViewSwitcher>