为何.NET MAUI中FlexLayout无法滚动且标签内容显示不全？

页面1使用VerticalStackLayout时，标签内容完整显示且支持滚动查看全部；但页面2使用FlexLayout（设置了Row方向和Wrap换行）时，标签被垂直压缩，仅显示内容开头，哪怕只放4个标签也会占满垂直空间。以下是两个页面的具体实现及解决方案：

页面1（正常显示的VerticalStackLayout实现） #

效果预览 #

代码 #

<ContentPage ...>

    <ScrollView>
        <VerticalStackLayout>
            <Label Text="The good movie 1" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 2" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 3" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 4" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 5" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 6" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 7" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 8" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 9" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 10" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 11" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 12" FontSize="40" WidthRequest="140" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

页面2（存在问题的FlexLayout实现） #

效果预览 #

代码 #

<ContentPage ...>

    <ScrollView>
        <FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly">
            <Label Text="The good movie 1" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 2" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 3" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 4" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 5" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 6" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 7" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 8" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 9" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 10" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 11" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 12" FontSize="40" WidthRequest="140" />
        </FlexLayout>
    </ScrollView>

</ContentPage>

解决方案 #

问题核心是FlexLayout默认会拉伸子元素填充垂直空间，同时ScrollView的布局约束导致FlexLayout无法自适应内容高度。可以通过以下两种方式解决：

方式1：给FlexLayout添加AlignItems="Start"属性 #

让FlexLayout的子元素沿垂直方向顶部对齐，避免被拉伸：

<ContentPage ...>

    <ScrollView>
        <FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly" AlignItems="Start">
            <Label Text="The good movie 1" FontSize="40" WidthRequest="140" />
            <!-- 其余Label代码保持不变 -->
        </FlexLayout>
    </ScrollView>

</ContentPage>

方式2：给每个Label设置VerticalOptions="Start" #

单独给每个Label指定垂直布局选项，阻止被拉伸：

<ContentPage ...>

    <ScrollView>
        <FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly">
            <Label Text="The good movie 1" FontSize="40" WidthRequest="140" VerticalOptions="Start" />
            <Label Text="The good movie 2" FontSize="40" WidthRequest="140" VerticalOptions="Start" />
            <!-- 其余Label同样添加VerticalOptions="Start" -->
        </FlexLayout>
    </ScrollView>

</ContentPage>

两种方式都能让FlexLayout根据内容自适应高度，从而让ScrollView正常滚动，同时保证标签内容完整显示。

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