ContentView 被 ScrollView 压扁答案

【问题标题】：ContentView being Squished by ScrollViewContentView 被 ScrollView 压扁
【发布时间】：2019-12-29 19:15:44
【问题描述】：

最近在进行实验时，我发现了一些我无法理解的东西。
我已将代码简化为最基本的级别。这是页面中的 xaml 示例 -

<StackLayout Spacing="0">
    <ContentView BackgroundColor="Yellow" HeightRequest="70"/>
    <ContentView BackgroundColor="DarkBlue" VerticalOptions="FillAndExpand">
        <ScrollView>
            <StackLayout x:Name="scroll">

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

（在我的实际代码中，我使用从<ContentView> 派生的自定义视图，但问题仍然存在）注意第一个内容视图上的高度请求

这是背后的代码

public partial class MainPage : ContentPage
{
    private readonly int number = 100;
    public MainPage()
    {
        InitializeComponent();

        for (int i = 0; i < number; i++) {
            scrollBoi.Children.Add(new Label() {
                Text = i.ToString(),
                TextColor = Color.White
            });
        }
    }
}

它只是简单地将 100 个标签添加到 <ScrollView> 中的 <Stacklayout>

Here 是 android 上的结果。

显然，黄色内容视图的高度不是 70 像素。
为澄清起见，如果我删除后面代码中的代码，因此没有标签添加到<StackLayout>，那么this 就是结果。 ContentView 没有被压扁。我还发现，添加到 ScrollView 的标签越多，ContentView 就会变得越小。

有趣的是，如果我使用 <StackLayout> 而不是 <ContentView>，则不会出现问题，就像这样

<StackLayout HeightRequest="70" BackgroundColor="Yellow"/>
<ContentView BackgroundColor="DarkBlue" VerticalOptions="FillAndExpand">
      <ScrollView>
            <StackLayout x:Name="scroll">

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

Here 是结果 - 并且是期望的结果。但是，我想使用内容视图，而不是堆栈布局。我认为 contentview 发生了一些奇怪的事情，但我真的不确定。

任何解释或帮助将不胜感激，
谢谢！

【问题讨论】：

标签： c# android xamarin mobile

【解决方案1】：

解决方案 1：

您可以将它们放在 Grid 而不是 StackLayout 中。

<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

    <Grid.RowDefinitions>
        <RowDefinition Height="70" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <ContentView  Grid.Row="0" BackgroundColor="Yellow" HeightRequest="70"/>
    <ContentView  Grid.Row="1" BackgroundColor="DarkBlue" VerticalOptions="FillAndExpand">
        <ScrollView>
            <StackLayout x:Name="scroll">

            </StackLayout>
        </ScrollView>
    </ContentView>
</Grid>

解决方案 2：

设置属性MinimumHeightRequest

<ContentView  BackgroundColor="Yellow" HeightRequest="70" MinimumHeightRequest="70" />

【讨论】：

谢谢！网格效果很好，它还有其他我没有想到的好处。