为什么 ScrollView 在 FlyoutHeaderTemplet 中不起作用？答案

【问题标题】：Why the ScrollView is not working inside FlyoutHeaderTemplet?为什么 ScrollView 在 FlyoutHeaderTemplet 中不起作用？
【发布时间】：2021-09-14 11:27:09
【问题描述】：

<Shell.FlyoutHeaderTemplate>
    <DataTemplate>
        <ScrollView>
             <StackLayout>
    .....................................
             <StackLayout/>
        <ScrollView/>
    </DataTemplate>
</Shell.FlyoutHeaderTemplate>

StackLayout里面有很多内容被截断了。

【问题讨论】：

“正在被切断。” 不知道是什么意思。 1) 您是说希望 Flyout 更高、显示更多？或者底部有“空白空间”，应该在哪里显示更多内容？ 2) 您可能需要在某处设置 VerticalOptions 或 HeightRequest，以确保 ScrollView 尽可能地扩展。抱歉，我对 Flyout 不够熟悉，无法确切知道需要什么。 3）作为测试，如果你做<ScrollView HeightRequest="800" />，会发生什么？
我尝试给 ScrollView 高度，但它仍然不允许我滚动查看剩余内容。我想垂直滚动它。

标签： xamarin xamarin.forms xamarin.android xamarin.ios xamarin-studio

【解决方案1】：

我根据您的代码对样本Xaminals进行了测试，并使用了以下代码，它可以正常工作。

可以参考以下代码：

    <Shell.FlyoutHeaderTemplate>
    <DataTemplate>
        <ScrollView>
            <StackLayout Orientation="Vertical" HeightRequest="600" BackgroundColor="DarkGreen">
                <Image Aspect="AspectFill" 
                   Source="watermelon.png" 
                       HeightRequest="550"
                       WidthRequest="550"
                   Opacity="0.6" />
                <Label Text="test header" 
                   TextColor="White" 
                   FontAttributes="Bold" 
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center" />

            </StackLayout>
            </ScrollView>
    </DataTemplate>
</Shell.FlyoutHeaderTemplate>

结果是：

【讨论】：