xamarin 中的意外堆栈布局行为答案

【问题标题】：Unexpected Stack Layout behavior in xamarinxamarin 中的意外堆栈布局行为
【发布时间】：2021-09-18 08:11:20
【问题描述】：

我有一个带有 Frame、ScrollView 和 Button 的 StackLayout，因为它是子控件。当 ScrollView 内容超出某个高度时，ScrollView 似乎将 Frame 推到其上方，将其压扁。我希望 ScrollView 作为容器不会向上推动其上方的视图，而是将其内容包含在其中。

Frame - 红色圆圈，ScrollView - 蓝色，ScrollView 的内容 - 浅蓝色，Button - 绿色

预期

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Class">
    <ContentPage.Content>
            <StackLayout
                VerticalOptions="FillAndExpand"
            Orientation="Vertical">

             <Frame
                 Padding="0"
                 HeightRequest="60"
                 WidthRequest="60"
                 VerticalOptions="Center"
                 HorizontalOptions="Center"
                 CornerRadius="30"
                 BackgroundColor="Red"/>

             <ScrollView
                 Background="Blue"
                 VerticalOptions="FillAndExpand">
                 <StackLayout
                     Margin="20,5,20,0"
                     BackgroundColor="LightBlue"
                     HeightRequest="150"/>
             </ScrollView>
        

             <Button
                 VerticalOptions="End"
                 Text="Next"
                 BackgroundColor="Green"/>
             </StackLayout>
    </ContentPage.Content>
</ContentPage>

输出（这是我所期望的）：

然后，如果我将 ScrollView 的 StackLayout 内容的高度更改为 950，它会挤压上面的内容，如下所示：

为什么 ScrollView 向上推，即使 Frame 已分配HeightRequest。我该如何解决这个问题？

【问题讨论】：

我猜这是因为Frame 旨在包装另一个视图。它没有强制高度的孩子，所以它的 HeightRequest 只是一个建议。 1) 尝试将其包裹在 HeightRequest 为 60 的 BoxView 周围。<Frame ...><BoxView HeightRequest="60"/></Frame>。或 2) 制作最外层布局 Grid 而不是 StackLayout。使用row heights“Auto”、“60”、“*”、“Auto”更容易实施所需的布局。还要在网格的子节点上添加Grid.Row="0"、Grid.Row="1" 等。

标签： xaml xamarin.forms

【解决方案1】：

为什么 ScrollView 向上推，即使 Frame 有分配的 HeightRequest。

从ScrollView as a child layout 开始，ScrollView 通常是 StackLayout 的子项。 ScrollView 需要一个特定的高度来计算其内容高度与其自身高度之间的差异，差异是 ScrollView 可以滚动其内容的量。

因此您可以为 Scrollview 分配特定的高度。

<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
        <Frame
            Padding="0"
            BackgroundColor="Red"
            CornerRadius="30"
            HeightRequest="60"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            WidthRequest="60" />

        <ScrollView
            Background="Blue"
            HeightRequest="150"
            VerticalOptions="FillAndExpand">
            <StackLayout
                Margin="20,5,20,0"
                BackgroundColor="LightBlue"
                HeightRequest="950" />
        </ScrollView>
        <Button
            BackgroundColor="Green"
            Text="Next"
            VerticalOptions="End" />
    </StackLayout>

另一种方法是使用Gird 为Scrollview 分配特定的高度。

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Frame
            Padding="0"
            BackgroundColor="Red"
            CornerRadius="30"
            HeightRequest="60"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            WidthRequest="60" />

        <ScrollView
            Grid.Row="1"
            Background="Blue"
            VerticalOptions="FillAndExpand">
            <StackLayout
                Margin="20,5,20,0"
                BackgroundColor="LightBlue"
                HeightRequest="950" />
        </ScrollView>


        <Button
            Grid.Row="2"
            BackgroundColor="Green"
            Text="Next"
            VerticalOptions="End" />
    </Grid>

【讨论】：