导航栏下方的 AppShell Flyout 下方

Posted 2023-03-21

【中文标题】导航栏下方的 AppShell Flyout 下方

【英文标题】：Lower AppShell Flyout Below Navigation Bar

【发布时间】：2021-11-05 15:24:57

【问题描述】：

第一次在这里问问题，如果我搞砸了礼仪，对不起。

我在我的 Xamarin.Forms 项目中使用 AppShell，并结合使用浮出控件和选项卡栏。 我想要的是 AppShell 弹出窗口始终滑出导航/标题栏下方。目前它覆盖了整个屏幕。 我知道我可以使用自定义视图，但我喜欢 AppShell 的功能和集成。现在，我想尝试用 AppShell 来做这件事。

我尝试了一些方法，例如设置弹出的 HeightRequest 和创建一个空标题。想法是保持导航栏中的按钮在侧边菜单退出时始终可点击。 虽然，我开始认为 AppShell 可能无法做到这一点。谢谢！

How it's working now

What I want (never-mind the difference in flyout width)

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

您可以尝试使用 SwipeView 来代替。

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/swipeview

【参考方案2】：

您可以改用FlyoutPage。在 android 上，导航栏位于页面顶部，并显示标题、图标和导航到详细信息页面的按钮。

创建一个FlyoutPage 来加载菜单页。

<FlyoutPage  xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:App10"
      x:Class="App10.Page14"  Title="Navigation Bar"   FlyoutLayoutBehavior="Split">
<FlyoutPage.Flyout >
 <local:FlyoutMenuPage x:Name="flyoutPage" />
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
 <NavigationPage>
     <x:Arguments>
         <local:ContactsPage />
     </x:Arguments>
 </NavigationPage>
</FlyoutPage.Detail>

在FlyoutMenuPage中创建一个listview来模拟AppShell的Flyout。

  <ListView x:Name="listView" x:FieldModifier="public">
         <ListView.ItemsSource>
             <x:Array Type="x:Type local:FlyoutPageItem">
                 <local:FlyoutPageItem Title="Contacts" IconSource="check.png" TargetType="x:Type local:ContactsPage" />
                 <local:FlyoutPageItem Title="Reminders" IconSource="circle.png" TargetType="x:Type local:ReminderPage" />
             </x:Array>
         </ListView.ItemsSource>
         <ListView.ItemTemplate>
             <DataTemplate>
                 <ViewCell>
                     <Grid Padding="5,10">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="30"/>
                             <ColumnDefinition Width="*" />
                         </Grid.ColumnDefinitions>
                         <Image Source="Binding IconSource" />
                         <Label Grid.Column="1" Text="Binding Title" />
                     </Grid>
                 </ViewCell>
             </DataTemplate>
         </ListView.ItemTemplate>
     </ListView> 

请注意，不要忘记在 App.xaml.cs 中设置 NavigationPage。

     MainPage = new NavigationPage(new Page14());

有关它的更多详细信息，您可以参考 GitHub 中的代码。 https://github.com/xamarin/xamarin-forms-samples/tree/main/Navigation/FlyoutPage