xamarin.forms - 修复了 shell 中的标签栏

Question

是否可以确保（仪表板/统计）选项卡保持固定而不被各种 FlyoutItem 选项修改？谢谢

图片

 <TabBar>
    <Tab Title="Dasboard">
        <Tab.Icon>
            <FontImageSource FontFamily="{StaticResource FontAwesomeSolid}"
                            Glyph="{StaticResource IconHome}"
                            Color="Black"/>
        </Tab.Icon>
        <ShellContent Route="HomePage"  ContentTemplate="{DataTemplate _v:AccountPage}" />
    </Tab>
    <Tab Title="Statistiche">
        <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate _v:AccountPage}" />
    </Tab>
</TabBar>

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Online Store" Icon="ic_online_store" ContentTemplate="{DataTemplate _v:AccountPage}" />
    <ShellContent Title="About Us" Icon="ic_about_us" ContentTemplate="{DataTemplate _v:AccountPage}" />
    <ShellContent Title="Contact Us" Icon="ic_contact_us" ContentTemplate="{DataTemplate _v:AccountPage}" />
    <ShellContent Title="Sign In" Icon="ic_login" Route="LoginPage" ContentTemplate="{DataTemplate _v:AccountPage}" />
</FlyoutItem>

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Test1" Icon="ic_online_store" ContentTemplate="{DataTemplate _v:AccountPage}" />
    <ShellContent Title="Test2" Icon="ic_about_us" ContentTemplate="{DataTemplate _v:AccountPage}" />
</FlyoutItem>

Answer 1

您可以使用MenuItem来显示 Flyout 中的项目。并使用FlyoutItem显示底部选项卡栏中的选项卡，而无需将FlyoutDisplayOptions属性设置为AsMultipleItems.

这MenuItem将在弹出窗口中显示项目，其中的项目FlyoutItem将显示在底部标签栏中。

 <MenuItem
    Command="{Binding AboutCommand}"
    Icon="tab_about.png"
    Text="Online Store" />

<FlyoutItem>
    <ShellContent Title="Dasboard" ContentTemplate="{DataTemplate _v:AccountPage}" />
    <ShellContent Title="Statistiche" ContentTemplate="{DataTemplate _v:AccountPage}" />
</FlyoutItem>

后面的代码：

public partial class AppShell : Xamarin.Forms.Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute("account", typeof(AccountPage));
        BindingContext = this;
    }
    public ICommand AboutCommand => new Command(async () => await NavigatedToAccount());

    async Task NavigatedToAccount()
    {
        await Shell.Current.GoToAsync("account");
        Shell.Current.FlyoutIsPresented = false;
    }

}