.NET MAUI/XAML：如何让图片固定在ScrollView顶部且页面可滚动

核心思路：把固定元素和ScrollView放在同一个父容器（比如Grid）中，让固定元素处于独立行/上层，ScrollView滚动时不会带动固定元素。

具体修改步骤 #

• 将根布局从<ScrollView>改为<Grid>，定义两行：第一行高度设为Auto（适配图片高度），第二行设为*占满剩余空间。
• 把需要固定的图片放在Grid的第一行，设置全屏宽度。
• 把原滚动内容（轮播、指示器、页面内容）移入Grid第二行的<ScrollView>内，避免嵌套滚动冲突。

修改后的完整代码 #

<Grid RowDefinitions="Auto,*">
    <!-- 顶部固定的全屏图片 -->
    <Image Grid.Row="0" Source="test.svg" Aspect="AspectFill" />

    <!-- 可滚动的页面内容区 -->
    <ScrollView Grid.Row="1">
        <Grid RowDefinitions="auto,auto,*" ColumnDefinitions="*" x:DataType="local:Project">
            <CarouselView Grid.Row="0" 
                      ItemsSource="{Binding images}" 
                      IndicatorView="indicatorView"
                      IsSwipeEnabled="True">
                <CarouselView.ItemsLayout>
                    <LinearItemsLayout SnapPointsType="MandatorySingle" 
                                   SnapPointsAlignment="Center" 
                                   Orientation="Horizontal"/>
                </CarouselView.ItemsLayout>
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding .}"
                           Aspect="AspectFill"/>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
            <IndicatorView Grid.Row="1" x:Name="indicatorView"/>
            
            <!-- 页面内容直接放在这里，无需嵌套额外ScrollView -->
            <VerticalStackLayout Grid.Row="2" Margin="8,0,8,32">
                <!-- Page content here -->
            </VerticalStackLayout>
        </Grid>
    </ScrollView>

    <!-- 浮动操作按钮示例：固定在页面右下角，不随滚动移动 -->
    <AbsoluteLayout Grid.RowSpan="2">
        <Button Text="+" 
                AbsoluteLayout.LayoutFlags="PositionProportional"
                AbsoluteLayout.LayoutBounds="0.9,0.9,60,60"
                BackgroundColor="Orange"/>
    </AbsoluteLayout>
</Grid>

关键说明 #

• 根Grid的RowDefinitions="Auto,*"：第一行自动适配图片高度，第二行占满剩余空间，确保ScrollView能滚动全部内容。
• 固定元素无需嵌套在ScrollView内，直接放在根Grid的独立行即可实现固定。
• 浮动元素（如FAB）放在根Grid的AbsoluteLayout中，通过Grid.RowSpan="2"覆盖整个页面区域，不会随ScrollView滚动。

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