在标签页标签内的页面之间导航，但不会丢失标签页标签

Posted 2023-03-31

【中文标题】在标签页标签内的页面之间导航，但不会丢失标签页标签

【英文标题】：Navigate between pages inside tabbed page tab, but without losing the tab page tabs

【发布时间】：2021-03-25 08:08:38

【问题描述】：

我正在开发适用于 ios 和 android（跨平台）的 Xamarin.Forms 应用程序

我正在使用一个底部有 5 个标签的标签页（从标签页自定义渲染）

我的问题是，当我在标签页顶部推送另一个页面时，底部的标签消失了。

有什么方法可以在推送新页面时保持标签可见？

下面的xaml代码和照片：

<xf:BottomBarPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="qfix.Views.mPage"
             xmlns:local="clr-namespace:qfix.Behaviors"
             xmlns:pg="clr-namespace:qfix.Views"
             xmlns:controls="clr-namespace:qfix.CustomRenders;assembly=qfix"
             xmlns:xf="clr-namespace:BottomBar.XamarinForms;assembly=BottomBar.XamarinForms"
                  >
    <ContentPage Title="Home" IconImageSource="home.png"  BackgroundImageSource="background.jpg" />
    <ContentPage Title="Category" IconImageSource="category.jpg"   BackgroundImageSource="background.jpg">
        <ContentPage.Content>
            <pg:categories/>
        </ContentPage.Content>
        
    </ContentPage>
    <ContentPage Title="Request" IconImageSource="plus.png" BackgroundImageSource="background.jpg" >
        <StackLayout Spacing="40" Padding="25">
            <Image Source="logo.png" Aspect="AspectFit" HeightRequest="100"></Image>
            <local:DateTimePicker2></local:DateTimePicker2>
            <StackLayout Spacing="10">
                <Label Text="שם היישוב בו נדרש השירות:" VerticalOptions="End" FontSize="Medium"/>
                <controls:EntryAddress TextColor="Black" WidthRequest="300" x:Name="Address"  PlaceholderText="כתובת" BorderWidth="10"  BorderColor="CadetBlue"></controls:EntryAddress>
            </StackLayout >
            <StackLayout Spacing="10">
                <Label Text="מתי ניתן להתקשר אליך?" VerticalOptions="End" FontSize="Medium"/>
                <controls:MyPicker x:Name="Time_picker" Title="עכשוי"   SelectedItem="Phone_List_ItemSelected" BorderColor="CadetBlue" BorderWidth="10"  >
                    <controls:MyPicker.ItemsSource >
                        <x:Array Type="x:Type x:String">
                            <x:String>בעוד שעה</x:String>
                            <x:String>מחר בבוקר-8:00</x:String>
                            <x:String>מחר בבוקר-9:00</x:String>
                            <x:String>מחר אח"צ-13:00</x:String>
                            <x:String>מחר אח"צ-14:00</x:String>
                            <x:String>מחר בערב-20:00</x:String>
                            <x:String>מחר בערב-21:00</x:String>
                            
                        </x:Array>
                    </controls:MyPicker.ItemsSource>
                </controls:MyPicker>
            </StackLayout>
 
            <StackLayout Spacing="10">
                <Label Text="מהו סוג העבודה הנדרשת?" VerticalOptions="End" FontSize="Medium"/>
                <controls:MyEntry  x:Name="kindOfWork" Placeholder="סוג העבודה"  FontSize="20" BorderColor="CadetBlue"  BorderWidth="10"></controls:MyEntry>
            </StackLayout>
            <StackLayout BackgroundColor="#a2D5C6" Opacity="0.3" VerticalOptions="EndAndExpand">
                <Button Text="הגש בקשה"    BorderColor="CadetBlue" BackgroundColor="LightSkyBlue" Clicked="Button_Clicked"  TextColor="Black" FontSize="Large"  ></Button>
            </StackLayout>
        </StackLayout>
    </ContentPage>
    <ContentPage Title="Profile" IconImageSource="profile.png" BackgroundImageSource="background.jpg"/>
    <ContentPage Title="settings" IconImageSource="setting.png" BackgroundImageSource="background.jpg"/>
    
</xf:BottomBarPage>

here is the page within the tab, there is a list view with 2 photos, upon clocking it moves to other page ( photo below after this one)

achived this image by doing "await Navigation.PushModalAsync(new StartupPage());"

【参考方案1】：

1.你应该用NavigationPage 扭曲你的ContentPage，比如：

<NavigationPage Title="Home">
    <x:Arguments>
        <ContentPage Title="Home" IconImageSource="home.png"  BackgroundImageSource="background.jpg" />
    </x:Arguments>
</NavigationPage>

<NavigationPage Title="Home">
    <x:Arguments>
        <ContentPage Title="Category" IconImageSource="category.jpg"   BackgroundImageSource="background.jpg">
            <ContentPage.Content>
                <pg:categories/>
            </ContentPage.Content>
        </ContentPage>
    </x:Arguments>
</NavigationPage>

您应该使用await Navigation.PushAsync(new StartupPage()); 而不是Navigation.PushModalAsync。

Modal页面不同于推送页面。

【讨论】：

问题是，我们不希望导航栏在顶部，所以我们只使用“pushmodalasync”，因为我们不能混合使用：/

如果你选择模态，我认为你不能同时使标签栏可用。它将覆盖屏幕。如果您不希望顶部的导航栏，您可以隐藏它们。