MAUI控件显示异常：含TreeView、PDFViewer的Flyout布局未达预期

原代码存在的核心问题 #

• SfPopup错误嵌套：将SfPopup作为SfPdfViewer的子元素，不符合控件层级规范，Popup应作为页面级独立元素存在
• Grid行定义缺失：详情页的Grid未配置RowDefinitions，导致顶部按钮与PDFViewer布局重叠或错乱
• TreeView与PDFViewer布局未占满空间：侧边栏TreeView和详情页PDFViewer未设置填充布局属性，无法充分利用页面空间
• Popup默认可见性未控制：Addallnotes Popup未设置IsVisible="False"，会默认显示在页面上

修正后的完整XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="book_companion_3.Editor"
             xmlns:Syncfusion="clr-namespace:Syncfusion.Maui.PdfViewer;assembly=Syncfusion.Maui.PdfViewer"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView"
             xmlns:treeviewengine="clr-namespace:Syncfusion.TreeView.Engine;assembly=Syncfusion.Maui.TreeView"
             Title="Editor" FlyoutLayoutBehavior="Default">
    <FlyoutPage.Flyout>
        <ContentPage Title="FlyoutForm">
            <StackLayout>
                <!-- 设置TreeView占满侧边栏空间 -->
                <syncfusion:SfTreeView x:Name="treeview" 
                                      FlowDirection="LeftToRight" 
                                      ExpanderPosition="Start" 
                                      FullRowSelect="True"
                                      VerticalOptions="FillAndExpand">
                    <syncfusion:SfTreeView.Nodes>
                        <treeviewengine:TreeViewNode Content="Ornamentation">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Highlight">
                                    <treeviewengine:TreeViewNode.ChildNodes>
                                        <treeviewengine:TreeViewNode Content="Red" />
                                        <treeviewengine:TreeViewNode Content="Blue" />
                                        <treeviewengine:TreeViewNode Content="Green" />
                                        <treeviewengine:TreeViewNode Content="Yellow" />
                                        <treeviewengine:TreeViewNode Content="Remove" />
                                    </treeviewengine:TreeViewNode.ChildNodes>
                                </treeviewengine:TreeViewNode>
                                <treeviewengine:TreeViewNode Content="Drawing">
                                    <treeviewengine:TreeViewNode.ChildNodes>
                                        <treeviewengine:TreeViewNode Content="Free hand Drawing">
                                            <treeviewengine:TreeViewNode.ChildNodes>
                                                <treeviewengine:TreeViewNode Content="Red" />
                                                <treeviewengine:TreeViewNode Content="Blue" />
                                                <treeviewengine:TreeViewNode Content="Green" />
                                                <treeviewengine:TreeViewNode Content="Yellow" />
                                            </treeviewengine:TreeViewNode.ChildNodes>
                                        </treeviewengine:TreeViewNode>
                                        <treeviewengine:TreeViewNode Content="Square">
                                            <treeviewengine:TreeViewNode.ChildNodes>
                                                <treeviewengine:TreeViewNode Content="Red" />
                                                <treeviewengine:TreeViewNode Content="Blue" />
                                                <treeviewengine:TreeViewNode Content="Green" />
                                                <treeviewengine:TreeViewNode Content="Yellow" />
                                            </treeviewengine:TreeViewNode.ChildNodes>
                                        </treeviewengine:TreeViewNode>
                                        <treeviewengine:TreeViewNode Content="Circle">
                                            <treeviewengine:TreeViewNode.ChildNodes>
                                                <treeviewengine:TreeViewNode Content="Red" />
                                                <treeviewengine:TreeViewNode Content="Blue" />
                                                <treeviewengine:TreeViewNode Content="Green" />
                                                <treeviewengine:TreeViewNode Content="Yellow" />
                                            </treeviewengine:TreeViewNode.ChildNodes>
                                        </treeviewengine:TreeViewNode>
                                        <treeviewengine:TreeViewNode Content="Arrow">
                                            <treeviewengine:TreeViewNode.ChildNodes>
                                                <treeviewengine:TreeViewNode Content="Red" />
                                                <treeviewengine:TreeViewNode Content="Blue" />
                                                <treeviewengine:TreeViewNode Content="Green" />
                                                <treeviewengine:TreeViewNode Content="Yellow" />
                                            </treeviewengine:TreeViewNode.ChildNodes>
                                        </treeviewengine:TreeViewNode>
                                        <treeviewengine:TreeViewNode Content="Line">
                                            <treeviewengine:TreeViewNode.ChildNodes>
                                                <treeviewengine:TreeViewNode Content="Red" />
                                                <treeviewengine:TreeViewNode Content="Blue" />
                                                <treeviewengine:TreeViewNode Content="Green" />
                                                <treeviewengine:TreeViewNode Content="Yellow" />
                                            </treeviewengine:TreeViewNode.ChildNodes>
                                        </treeviewengine:TreeViewNode>
                                    </treeviewengine:TreeViewNode.ChildNodes>
                                </treeviewengine:TreeViewNode>
                                <treeviewengine:TreeViewNode Content="Underline">
                                    <treeviewengine:TreeViewNode.ChildNodes>
                                        <treeviewengine:TreeViewNode Content="Red" />
                                        <treeviewengine:TreeViewNode Content="Blue" />
                                        <treeviewengine:TreeViewNode Content="Green" />
                                        <treeviewengine:TreeViewNode Content="Yellow" />
                                    </treeviewengine:TreeViewNode.ChildNodes>
                                </treeviewengine:TreeViewNode>
                                <treeviewengine:TreeViewNode Content="StrikeOut">
                                    <treeviewengine:TreeViewNode.ChildNodes>
                                        <treeviewengine:TreeViewNode Content="Red" />
                                        <treeviewengine:TreeViewNode Content="Blue" />
                                        <treeviewengine:TreeViewNode Content="Green" />
                                        <treeviewengine:TreeViewNode Content="Yellow" />
                                    </treeviewengine:TreeViewNode.ChildNodes>
                                </treeviewengine:TreeViewNode>
                                <treeviewengine:TreeViewNode Content="Squiggly">
                                    <treeviewengine:TreeViewNode.ChildNodes>
                                        <treeviewengine:TreeViewNode Content="Red" />
                                        <treeviewengine:TreeViewNode Content="Blue" />
                                        <treeviewengine:TreeViewNode Content="Green" />
                                        <treeviewengine:TreeViewNode Content="Yellow" />
                                    </treeviewengine:TreeViewNode.ChildNodes>
                                </treeviewengine:TreeViewNode>
                                <treeviewengine:TreeViewNode Content="Erase"></treeviewengine:TreeViewNode>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Settings">
                        </treeviewengine:TreeViewNode>
                    </syncfusion:SfTreeView.Nodes>
                </syncfusion:SfTreeView>
            </StackLayout>
        </ContentPage>
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <ContentPage Title="DetailsForm">
            <Grid>
                <!-- 配置Grid行定义，分配顶部按钮和PDFViewer的空间 -->
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                
                <Button Grid.Row="0" Grid.ColumnSpan="4" 
                        Text="Reading Mode" 
                        Clicked="Button_OnClicked" 
                        IsVisible="False" 
                        x:Name="ReadingModeButton"/>

                <!-- PDFViewer容器 -->
                <StackLayout Grid.Row="1" Grid.ColumnSpan="4">
                    <Syncfusion:SfPdfViewer x:Name="sfpdfviewer"  
                                            TextSelectionChanged="sfpdfviewer_TextSelectionChanged"
                                            VerticalOptions="FillAndExpand">
                        <Syncfusion:SfPdfViewer.GestureRecognizers>
                            <SwipeGestureRecognizer Direction="Left" Swiped="SwipeGestureRecognizer_Swiped_Left"/>
                            <SwipeGestureRecognizer Direction="Right" Swiped="SwipeGestureRecognizer_Swiped_Right"/>
                            <PinchGestureRecognizer PinchUpdated="PinchGestureRecognizer_PinchUpdated"/>
                            <TapGestureRecognizer Buttons="Secondary" Tapped="TapGestureRecognizer_Tapped"/>
                        </Syncfusion:SfPdfViewer.GestureRecognizers>
                    </Syncfusion:SfPdfViewer>
                </StackLayout>

                <!-- 将Popup移到页面级容器中，修正嵌套问题 -->
                <sfPopup:SfPopup x:Name="sfPopup"  
                                 AnimationMode="Zoom" 
                                 IsVisible="False">
                    <Button x:Name="Addnote" 
                            Text="Add Sticky Note" 
                            Clicked="Addnote_Clicked"/>
                </sfPopup:SfPopup>
                
                <sfPopup:SfPopup x:Name="Addallnotes"
                                 IsVisible="False">
                    <StackLayout>
                        <Button x:Name="Comment" 
                                Text="Comment" 
                                Clicked="Comment_Clicked"/>
                        <Button x:Name="Voice" 
                                Text="Voice" 
                                Clicked="Voice_Clicked"/>
                        <Button x:Name="Image" 
                                Text="Image" 
                                Clicked="Image_Clicked"/>
                    </StackLayout>
                </sfPopup:SfPopup>
            </Grid>
        </ContentPage>
    </FlyoutPage.Detail>
</FlyoutPage>

内容的提问来源于stack exchange，提问作者incidious works