Xamarin.Forms构建的XAML页面在移动设备上无法滚动 无法查看底部内容

问题根源 #

• 核心布局逻辑错误：你将所有卡片内容全部放在了设置了 HeightRequest="120" 固定高度的 <StackLayout x:Name="stack2"> 容器内，容器内所有内容总高度远超过120，超出部分被父容器直接裁剪，自然无法滚动也无法显示底部按钮。
• 之前添加ScrollView失效是因为你没有将所有需要滚动的长内容整体包裹在ScrollView内，或者ScrollView被放在了固定高度的容器中，没有足够的可视区域触发滚动逻辑。

修正方案 #

调整布局结构，将所有需要滚动的内容整体包裹在ScrollView中，同时调整蓝色头部的层级实现你原本想要的卡片悬停在蓝色头部上的视觉效果，修正后可正常滚动的完整代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage    xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:abstractions="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            NavigationPage.HasNavigationBar="False"
            mc:Ignorable="d"
            x:Class="CXFMob.OperatiPage">
    <!-- 最外层套ScrollView实现整体垂直滚动 -->
    <ScrollView VerticalOptions="FillAndExpand" BackgroundColor="White">
        <StackLayout x:Name="stack1">
            <!-- 单独抽出蓝色头部层，固定120高度放在最下层 -->
            <StackLayout BackgroundColor="DodgerBlue" HeightRequest="120" />
            <!-- 所有卡片内容通过负Margin向上偏移40，实现叠在蓝色头部上的效果 -->
            <StackLayout Margin="0,-40,0,0" Spacing="0">
                <Frame
                Margin="10"
                BackgroundColor="White"
                CornerRadius="12"
                HeightRequest="300">
                    <StackLayout Orientation="Horizontal">
                        <Frame
                        Margin="0,0,10,0"
                        Padding="10"
                        BackgroundColor="DodgerBlue"
                        BorderColor="LightGray"
                        CornerRadius="40"
                        HasShadow="True"
                        HeightRequest="20"
                        IsClippedToBounds="True"
                        WidthRequest="60">
                            <abstractions:CircleImage
                            Aspect="AspectFit"
                            HeightRequest="20"
                            Source="prince"
                            WidthRequest="20" />
                        </Frame>
                        <StackLayout>
                            <Label Text=" "></Label>
                            <Label>
                                <Label.FormattedText>
                                    <FormattedString>
                                        <Span
                                        FontAttributes="Bold"
                                        FontSize="Body"
                                        Text="MOBILE"
                                        TextColor="Red" />
                                        <Span Text="   Tapper" TextColor="LightGray" />
                                    </FormattedString>
                                </Label.FormattedText>
                            </Label>
                            <Label
                            FontAttributes="Bold"
                            FontSize="16"
                            Text="OPERATI"
                            TextColor="DarkSlateGray" />
                        </StackLayout>
                    </StackLayout>
                </Frame>
                <Frame
                Margin="10"
                CornerRadius="12"
                BackgroundColor="White">
                    <StackLayout Margin="5">
                        <Grid
                        ColumnSpacing="20"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Label x:Name="mylabel2" Text="cdcdcdc" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
                        </Grid>
                    </StackLayout>
                </Frame>
                <Frame
                Margin="10"
                CornerRadius="12"
                BackgroundColor="White">
                    <StackLayout Margin="5">
                        <Grid
                        ColumnSpacing="20"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Label x:Name="mylabel3" Text="vfvfvf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
                        </Grid>
                    </StackLayout>
                </Frame>
                <Frame
                Margin="10"
                CornerRadius="12"
                BackgroundColor="White">
                    <StackLayout Margin="5">
                        <Grid
                        ColumnSpacing="20"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Label x:Name="mylabel4" Text="rrfrfrfrf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
                        </Grid>
                    </StackLayout>
                </Frame>
                <Frame
                Margin="10"
                CornerRadius="12"
                BackgroundColor="White">
                    <StackLayout Margin="5">
                        <Grid
                        ColumnSpacing="20"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Label x:Name="mylabel5" Text="hgyhyhyhyh" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
                        </Grid>
                    </StackLayout>
                </Frame>
                <Frame
                Margin="10"
                CornerRadius="12"
                BackgroundColor="White">
                    <StackLayout Margin="5">
                        <Grid
                        ColumnSpacing="20"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Button
                            x:Name="btnTransfer"
                            Margin="20"
                            BackgroundColor="#FF2ED833"
                            Clicked="btnTransfer_Clicked"
                            CornerRadius="20"
                            HorizontalOptions="FillAndExpand"
                            Text="Main Page"
                            TextColor="White"
                            VerticalOptions="EndAndExpand" />
                        </Grid>
                    </StackLayout>
                </Frame>
            </StackLayout>
        </StackLayout>
    </ScrollView>
</ContentPage>

修正后的布局不会被固定高度的父容器裁剪，可正常上下滚动显示底部绿色按钮。

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