c# - 无法在移动设备上滚动使用 Xamarin.Forms 创建的 xaml 页面

Question

滚动在我的 XAML 文件中不起作用。它会剪切下面的内容并且不显示所有内容。即使当我尝试滚动查看底部时，它也不允许滚动。底部应该有绿色按钮。但我无法滚动查看它。我尝试添加 ScrollView 和 ListView ，但无法将其向下滚动到页面。所以无法通过下滑看到全部内容。

<?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">


<StackLayout x:Name="stack1" BackgroundColor="White" VerticalOptions="FillAndExpand">
        <StackLayout x:Name="stack2" BackgroundColor="DodgerBlue" HeightRequest="120">
            <Frame
            Margin="10"
            BackgroundColor="White"
            CornerRadius="12"
            HeightRequest="300"
            TranslationY="40">

                <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 HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                            <Label>
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span
                                        FontAttributes="Bold"
                                        Text=" Mobile "
                                        TextColor="LightGray" />
                                    <Span
                                        FontAttributes="Bold"
                                        FontSize="Body"
                                        Text=" 0244567876"
                                        TextColor="Black" />
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                        </StackLayout>-->
                    </StackLayout>
                </StackLayout>
            </Frame>

            <Frame
            Margin="10"
            CornerRadius="12"
            BackgroundColor="White"
            TranslationY="40">
                <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"
            TranslationY="40">
                <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"
            TranslationY="40">
                <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"
            TranslationY="40">
                <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"
            TranslationY="40">
                <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>

Answer 1

正如 Jason 提到的，ScrollView 应该可以解决问题，你可能只是没有以正确的方式使用它。在第一个堆栈布局上方添加一个 ScrollView，如下所示:

            mc:Ignorable="d"
            x:Class="CXFMob.OperatiPage">

<ScrollView>
<StackLayout x:Name="stack1" ...

然后在最后一行添加结束 ScrollView 标记:

        </StackLayout>
</StackLayout>
</ScrollView>

显然也修复了缩进格式。另外，TranslationY 的目的是什么？