.Net MAUI 使用多个 Shell by Flyout 页面变为空白

Question

我通过 Net MAUI 创建了一个演示应用程序，使用 Flyout 导航到三个 Shell 页面。 在 Windows 中很好，但在 android 中，页面变为空白。

第一的

go 再进来

并且调试 output 表示MODE_SCROLLABLE + GRAVITY_FILL is not supported, GRAVITY_START will be used instead

在 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>

在 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>

有什么不对？

我用错了吗？

Answer 1

在AppShell.xaml中，可以改成这样：

    ...
    <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>
    ...

Answer 2

我想您的主页必须是 ContentPage 而不是 Shell，因为您的应用程序中已经有 shell。

如果您需要不同的选项卡到主页，同时您需要摆脱初始选项卡，您必须考虑用户将如何 go 回到初始选项卡。 但是，如果您希望所有选项卡在主页的初始选项卡和附加选项卡中都可见，那么重新设计 ui 并包括底部和顶部选项卡可能会更好，因此所有选项卡都将对用户可见。 在此处查看文档。