如何使用 UI .NET MAUI 等弹出控件获得响应式布局

Question

我有这样的 UI 设计，其中左侧有一个弹出/停靠布局用于设置列表，然后在右侧显示所选设置的内容。

在桌面上，我希望 UI 如上所述，其中显示所选设置或实际页面的内容，而不是视图。

在移动设备上，我想要覆盖整个页面（无浮出控件）的设置列表，该列表将显示到各自的设置页面。

我尝试对 DockLayout 和 NavigationView 使用 FlyoutPage 和 telerik 控件。

子问题：.NET MAUI 中带有 FlyoutPage 的堆叠导航页面

Answer 1

我是 MAUI 新手，但我发现您可以有条件地在桌面上使用 Flyout，在移动设备上使用底部选项卡菜单 - 这样您就可以为不同的设备创建单独的 UI。也许您可以使用此机制来应用您的要求。看看

FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}"

。链接到带有代码的完整示例。

<Shell 
    FlyoutWidth="68" FlyoutBackgroundColor="{StaticResource Background_Mid}"
    FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}">

    <Shell.FlyoutFooterTemplate>
        <DataTemplate>
            <Grid RowDefinitions="68">
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                </Grid.GestureRecognizers>
                <Image Source="tab_settings.png"
                       VerticalOptions="Center"
                       HorizontalOptions="Center"
                       WidthRequest="40"
                       HeightRequest="40"
                />

            </Grid>
        </DataTemplate>

    </Shell.FlyoutFooterTemplate>

    

    <!-- Desktop/Tablet-->
    <FlyoutItem Title="Home" Style="{StaticResource HomeFlyout}">
        <ShellContent ContentTemplate="{DataTemplate page:HomePage}"/>
    </FlyoutItem>
    <FlyoutItem Title="Favorites" Style="{StaticResource FavFlyout}">
        <ShellContent ContentTemplate="{DataTemplate page:FavoritesPage}"/>
    </FlyoutItem>
    <FlyoutItem Title="Map" Style="{StaticResource MapFlyout}">
        <ShellContent ContentTemplate="{DataTemplate page:MapPage}"/>
    </FlyoutItem>
    <FlyoutItem Title="Settings" Route="settings" FlyoutItemIsVisible="False">
        <ShellContent ContentTemplate="{DataTemplate page:SettingsPage}"/>
    </FlyoutItem>

    <!-- Phone -->
    <TabBar x:Name="PhoneTabs">
        <Tab Title="Home" Icon="tab_home.png">
            <ShellContent ContentTemplate="{DataTemplate page:HomePage}"/>
        </Tab>
        <Tab Title="Favorites" Icon="tab_favorites.png">
            <ShellContent ContentTemplate="{DataTemplate page:FavoritesPage}"/>
        </Tab>
        <Tab Title="Map" Icon="tab_map.png">
            <ShellContent ContentTemplate="{DataTemplate page:MapPage}"/>
        </Tab>
        <Tab Title="Settings" Icon="tab_settings.png">
            <ShellContent ContentTemplate="{DataTemplate page:SettingsPage}"/>
        </Tab>
    </TabBar>



    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid WidthRequest="44" HeightRequest="68"
                  ColumnDefinitions="44" RowDefinitions="68">
                <Image Source="{Binding FlyoutIcon}"
                       VerticalOptions="Center"
                       HorizontalOptions="Center"                               
                       HeightRequest="38"
                       WidthRequest="38"
                       />
            </Grid>
        </DataTemplate>

    </Shell.ItemTemplate>
</Shell>