嵌套在水平 StackLayout 中时，多行标签不会调整父 StackLayout 的大小

编程问答 2022-05-28

问题描述

下面我将其减少到重现所需的最少代码。在第一个示例中，您可以看到多行标签垂直扩展父 StackLayout，并遵守 24 个单位的填充。在第二个示例中，我将这个 StackLayout 嵌套到另一个水平 StackLayout 中，并添加了一个按钮。垂直 StackLayout 最终将在其中包含多个标签/视图，但如下所示，只需一个标签即可重现该问题。我曾尝试以不同的组合在 StackLayouts 和 Label 上强制使用 randomFill 和 VerticalOptions="FillAndExpand"，但结果没有变化。如果我在 Label 上设置 WidthRequest 为 200，一切看起来都很好，除了我们需要这个标签来使用所有可用空间。

如何更新第二个示例中的 XAML 布局，以便具有白色背景的 StackLayout 正确垂直扩展以适合子标签内容？

HorizontalOptions="FillAndExpand"

Works great when not nested

<StackLayout BackgroundColor="{StaticResource Accent}" Spacing="0">
    <StackLayout Orientation="Vertical" Padding="24,24,24" BackgroundColor="White">
        <Label Text="Lorem ipsum dolor sit amet,consectetur adipiscing elit. Curabitur in metus venenatis,luctus augue vitae,porta nunc. Pellentesque nec enim velit. Ut eget lacus porta,pulvinar ante sit amet,sollicitudin leo. Nullam eleifend vitae eros vel ornare. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Etiam ultricies quam leo,quis dictum est faucibus condimentum. In nec sapien eu est volutpat molestie. Nulla facilisi. Ut eu facilisis dui. Proin egestas mollis urna. Vestibulum et hendrerit massa. Vivamus mollis consectetur tortor,non varius turpis ornare vitae. Suspendisse non pretium dolor." MaxLines="10" />
    </StackLayout>

    <CollectionView x:Name="rptTransactions" ItemsLayout="VerticalGrid" ItemsSource="{Binding Transactions}">
        <CollectionView.Header>
            <Grid Padding="10">
                <Label Text="HEADER" Grid.Column="0" />
            </Grid>
        </CollectionView.Header>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="10">
                    <Label Text="ITEM" Grid.Column="0" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

Not so great when nested

解决方法

添加一个足够大的“MinimumHeightRequest”来容纳您的最大行。
并重构一下。

<StackLayout BackgroundColor="{StaticResource Accent}" Spacing="0">
    <StackLayout
        MinimumHeightRequest="220"
        Padding="24"
        Orientation="Horizontal"
        BackgroundColor="Gray">
        <Label
            Padding="24"
            BackgroundColor="White"
            MaxLines="10"
            Text="Lorem ipsum dolor sit amet,consectetur adipiscing elit.  Curabitur in metus venenatis,luctus augue vitae,porta nunc. Pellentesque nec enim velit. Ut eget lacus porta,pulvinar ante sit amet,sollicitudin leo. Nullam eleifend vitae eros vel ornare. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Etiam ultricies quam leo,quis dictum est faucibus condimentum. In nec sapien eu est volutpat molestie. Nulla facilisi. Ut eu facilisis dui. Proin egestas mollis urna. Vestibulum et hendrerit massa. Vivamus mollis consectetur tortor,non varius turpis ornare vitae. Suspendisse non pretium dolor." />
        <Button Text="Button" />
    </StackLayout>
    <CollectionView ... />
</StackLayout>

或者在长标签上添加“WidthRequest”

<StackLayout BackgroundColor="{StaticResource Accent}" Spacing="0">
    <StackLayout
        Padding="24,24,24"
        Orientation="Horizontal"
        BackgroundColor="Gray">
        <Label
            WidthRequest="300"
            Padding="24"
            BackgroundColor="White"
            MaxLines="10"
            Text="Lorem ipsum dolor sit amet,non varius turpis ornare vitae. Suspendisse non pretium dolor." />
        <Button Text="Button" />
    </StackLayout>
    <CollectionView ... />
</StackLayout>
xamarinxamarinxamarinxamarin.formsxamarin.formsxamlxamlxaml