能否在ShellContent中嵌套两个ContentPage？MAUI布局需求咨询

解决方案思路 #

MAUI Shell默认会全屏替换页面内容，要实现固定内容（进度条区域）始终在上方，需要自定义Shell的根布局，将固定内容与可变内容区域分离：

• 用Grid划分出固定内容行和可变内容行
• 固定内容行放置进度条等需要始终显示的元素
• 可变内容行使用ShellContentPresenter承载ShellContent对应的页面，确保切换FlyoutItem时仅更新该区域内容

修改后的AppShell代码 #

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Mobile.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Mobile"
    Shell.FlyoutBehavior="Flyout">
    
    <!-- 自定义Shell的根布局 -->
    <Shell.Content>
        <Grid>
            <Grid.RowDefinitions>
                <!-- 固定内容行：高度适配进度条 -->
                <RowDefinition Height="Auto" />
                <!-- 可变内容行：占满剩余屏幕空间 -->
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <!-- 红色固定区域：进度条容器 -->
            <Frame Grid.Row="0" BackgroundColor="Red" Padding="10" HeightRequest="50">
                <ProgressBar Progress="0.5" HorizontalOptions="FillAndExpand" />
            </Frame>

            <!-- 蓝色可变内容区域：承载ShellContent页面 -->
            <ShellContentPresenter Grid.Row="1" />
        </Grid>
    </Shell.Content>

    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid Style="{StaticResource FloutItemStyle}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80" />
                    <ColumnDefinition Width="150" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding FlyoutIcon}"
                       Margin="10"
                       HeightRequest="50"
                       HorizontalOptions="EndAndExpand" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       TextColor="{StaticResource LightTextColor}"
                       FontSize="Body"
                       VerticalTextAlignment="Center"
                       HorizontalTextAlignment="Start"
                       x:Name="_label">
                </Label>
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>

    <FlyoutItem Title="Páginas" FlyoutDisplayOptions="AsMultipleItems" FlyoutIcon="factorpro.png">
        <!-- Page1 -->
        <ShellContent
            Title="Calcular Aditivo"
            ContentTemplate="{DataTemplate local:Page1}"
            Route="Page1"
            IsVisible="False"
            Icon="aditivo.png"/>
        <!-- 其他ShellContent页面... -->
    </FlyoutItem>

</Shell>

关键细节说明 #

1. 布局分离：通过Grid将页面分为上下两部分，固定内容行（第一行）始终保留，可变内容行（第二行）负责加载切换的页面
2. ShellContentPresenter：这个控件是MAUI Shell内置的内容宿主，会自动关联当前选中的ShellContent页面，确保路由切换时仅更新该区域
3. 自定义固定内容：如果你的进度条有复杂逻辑，可以将其封装为自定义控件（如ProgressHeaderView），替换示例中的Frame和ProgressBar，提升代码复用性

内容的提问来源于stack exchange，提问作者Heitor Badotti