1

我正在开发一个 Xamarin Forms 4.8 版本的应用程序，带有侧边菜单（Flyout）和底部Tabbar使用 Shell 功能。我的侧边菜单有 4 个项目，底部Tabbar有 5 个项目。两者都有不同的项目。Tabbar我的应用程序周围总是需要有这样 5 个项目的底部。当我单击菜单内的任何项目时，底部Tabbar项目将替换为侧菜单项。我不知道为什么。

我的 AppShell.xaml 页面如下所示，

<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:MyApp.Views"
        xmlns:localHome="clr-namespace:MyApp.Views.Home"
        xmlns:localOnlineStore="clr-namespace:MyApp.Views.OnlineStores"
        xmlns:localBooks="clr-namespace:MyApp.Views.BookList"
        xmlns:localUniforms="clr-namespace:MyApp.Views.Uniforms"
        xmlns:localUser="clr-namespace:MyApp.Views.User"
        xmlns:localMyAccount="clr-namespace:MyApp.Views.MyAccount"
        xmlns:localCart="clr-namespace:MyApp.Views.Cart"
        xmlns:flyouthead="clr-namespace:MyApp"
        xmlns:controls="clr-namespace:MyApp.Renderer;assembly=MyApp"
        Title="MyApp"
        x:Class="MyApp.AppShell"   
        FlyoutBehavior="Flyout"
        FlyoutHeaderBehavior="Fixed"
        FlyoutBackgroundColor="#011948">           
    
        <Shell.Resources>
            <ResourceDictionary>
                <Color x:Key="NavigationPrimary">#011948</Color>
                ...
                ...
            </ResourceDictionary>
         </Shell.Resources>    
    
         <Shell.FlyoutHeader> ... </Shell.FlyoutHeader> 
         <Shell.ItemTemplate> ... </Shell.ItemTemplate>
         <Shell.MenuItemTemplate> ... </Shell.MenuItemTemplate>
    
    
        <TabBar>
           <Tab Title="Home"
                Icon="ic_home">
                <ShellContent Route="HomePage" Shell.TabBarBackgroundColor="{StaticResource NavigationPrimary}" ContentTemplate="{DataTemplate localHome:HomePage}" />
           </Tab>
           <Tab Title="Books"
                Icon="ic_book">
                <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
            </Tab>
            <Tab Title="Cart"
                Icon="ic_cart">
                <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
            </Tab>
            <Tab Title="Uniforms"
                Icon="ic_uniform">
                <ShellContent Route="UniformsPage" ContentTemplate="{DataTemplate localUniforms:UniformsPage}" />
            </Tab>
            <Tab Title="Profile"
                Icon="ic_profile">
                <ShellContent Route="MyProfilePage" ContentTemplate="{DataTemplate localMyAccount:MyProfilePage}" />
             </Tab>
      </TabBar>    
    
    
      <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">         
          <ShellContent Title="Online Store" Icon="ic_online_store" ContentTemplate="{DataTemplate localOnlineStore:OnlineStorePage}" />
          <ShellContent Title="About Us" Icon="ic_about_us" ContentTemplate="{DataTemplate localHome:AboutUsPage}" />
          <ShellContent Title="Contact Us" Icon="ic_contact_us" ContentTemplate="{DataTemplate localHome:ContactUsPage}" />
          <ShellContent Title="Sign In" Icon="ic_login" Route="LoginPage" ContentTemplate="{DataTemplate localUser:LoginPage}" />
       </FlyoutItem>    
    
 </Shell>

当我在 Android Emulator 中运行时，我的底部标签栏如下图所示

底部标签栏

Flyout 中的侧边菜单如下

弹出菜单中的侧边菜单

当我单击菜单内的项目时，页面呈现如下

侧边菜单覆盖底部标签栏

在这里，底部Tabbar项目被替换为侧菜单项。

4

2 回答 2

1

您可以根据放入的内容定义选项卡AppShell.xaml，而对于弹出窗口，您可以通过设置自定义内容/视图（弹出项目不会跟随您的 ）来覆盖它，或者通过直接AppShell.xaml设置可绑定属性Shell.FlyoutContent content 或Shell.FlyoutContentTemplate用 aDataTemplate代替。这样，您将在选项卡和弹出窗口之间拥有不同的项目。

<Shell X:Name="shell" ..>
...
<Shell.FlyoutContent>
    <CollectionView BindingContext="{x:Reference shell}"
                     ItemsSource="{Binding FlyoutItems}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding Title}"
                       TextColor="White"
                       FontSize="Large" />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Shell.FlyoutContent>

笔记

此属性从 Xamarin.Forms 5.0.0.2012开始可用

相关问题

在 Shell 中动态创建 FlyoutItem 列表？

于 2021-02-17T11:45:51.970 回答
1

如果要在浮出控件和底部显示一个或多个项目，可以使用 FlyoutItem。

 <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="About" Icon="tab_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
    <ShellContent Title="Browse" Icon="tab_feed.png" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>

在此处输入图像描述

如果你只想在底部显示项目，不想在弹出窗口中显示项目，你只需要使用 TabBar 来做到这一点，

<TabBar>
    <Tab Title="About" Icon="tab_about.png">
        <ShellContent>
            <views:AboutPage />
        </ShellContent>
    </Tab>
    <Tab Title="Browse" Icon="tab_feed.png">
        <ShellContent>
            <views:ItemsPage />
        </ShellContent>
    </Tab>
</TabBar>

在此处输入图像描述

只需选择 FlayoutItem 或 TabBar，不需要同时使用它们。

有关壳牌的更多详细信息，请查看：

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/create

更新：

 <MenuItem
    Clicked="OnMenuItemClicked"
    StyleClass="MenuItemLayoutStyle"
    Text="Logout" />


 private async void OnMenuItemClicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//LoginPage");
    }
于 2020-12-01T07:51:15.340 回答