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

Posted 2023-03-17

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

【英文标题】：Multiline label does not resize the parent StackLayout when nested in a Horizontal StackLayout

【发布时间】：2021-05-02 19:09:32

【问题描述】：

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

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

<StackLayout BackgroundColor="StaticResource Accent" Spacing="0">
    <StackLayout Orientation="Vertical" Padding="24,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>

<StackLayout BackgroundColor="StaticResource Accent" Spacing="0">
    <StackLayout Orientation="Horizontal" Padding="24,24,24,24" BackgroundColor="Gray">
        <StackLayout Orientation="Vertical" Padding="24,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>
        <Button Text="Button" VerticalOptions="FillAndExpand"></Button>
    </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>

【参考方案1】：

添加一个足够大的“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,24"
        Orientation="Horizontal"
        BackgroundColor="Gray">
        <Label
            WidthRequest="300"
            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>