.Net MAUI use multi Shell by Flyout page goes blank-CodePudding

I create a demo app by Net MAUI, using Flyout to navigate to three Shell page. In Windows is good, but in android, the page goes to blank.

first

go in again

and debug output says MODE_SCROLLABLE GRAVITY_FILL is not supported, GRAVITY_START will be used instead

in AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="NexDroid.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:NexDroid"
    xmlns:pages="clr-namespace:NexDroid.Pages"
    xmlns:debug="clr-namespace:NexDroid.Pages.Debug"
    xmlns:parametes="clr-namespace:NexDroid.Pages.Parameters"
    FlyoutBehavior="Flyout">
    <ShellContent ContentTemplate="{DataTemplate pages:Connect}" />
    <FlyoutItem Title="操作" Route="MainPage">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
    </FlyoutItem>
    <FlyoutItem Title="调试">
        <ShellContent ContentTemplate="{DataTemplate debug:DebugShell}" />
    </FlyoutItem>
    <FlyoutItem Title="参数">
        <ShellContent ContentTemplate="{DataTemplate parametes:ParametersShell}" />
    </FlyoutItem>
</Shell>

in MainPage.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="NexDroid.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:NexDroid.Pages"
    xmlns:operation="clr-namespace:NexDroid.Pages.Operation"
    >
    <TabBar>
        <Tab Title="点动" Route="Operation/Jog">
            <ShellContent ContentTemplate="{DataTemplate operation:Jog}" />
        </Tab>
        <Tab Title="拖拽" Route="Operation/Drag">
            <ShellContent ContentTemplate="{DataTemplate operation:Drag}" />
        </Tab>
    </TabBar>
</Shell>

is there something wrong?

is there i using wrong?

CodePudding user response：

In AppShell.xaml, you can change to this:

    ...
    <Shell.TabBarIsVisible>false</Shell.TabBarIsVisible>
    <FlyoutItem Title="操作">
        <Tab Title="点动">
            <ShellContent Title="点动" ContentTemplate="{DataTemplate operation:Jog}" />
            <ShellContent Title="拖拽" ContentTemplate="{DataTemplate operation:Drag}" />
        </Tab>
        <ShellContent Title="调试" ContentTemplate="{DataTemplate debug:DebugShell}" />
        <ShellContent Title="参数" ContentTemplate="{DataTemplate parametes:ParametersShell}" />
    </FlyoutItem>
    ...

CodePudding user response：

I suppose that your mainpage must be a ContentPage and not a Shell as you already have a shell in your app.

If you need different tabs to mainpage, and at the same time you need to get rid off the initial tabs you have to think about how the user will go back to the initial tabs. But if you want all the tabs to be visible both the initial tabs and the additional tabs of the mainpage, maybe is better to redesign the ui and include bottom and top tabs, so all the tabs will be visible to the user. Check the docs here.