如何使 FlexLayout 的高度适应其内容？

Question

在我的 Xamarin Forms 应用程序中，我有一个字符串列表（最少 1 个，最多 4 个），我想在列布局中均匀显示。每列需要具有相同的宽度，并且内容应该扩展，以便整个文本被包裹并且可见。我知道如何使用Grid 控件在其列上使用Width="*" 来做到这一点。

我想使用FlexLayout 获得相同的结果，因此我可以将字符串列表绑定到BindableLayout 并轻松添加和删除列（我不会显示字符串，而是在每列中显示更复杂的布局）。

使用FlexLayout.Grow 和FlexLayout.Basis 我可以让FlexLayout 显示大小均匀的列。问题是使FlexLayout 的高度适合所有显示的标签。只显示第一行文本。

Grid 和 FlexLayout 都包含在 StackLayout 中：

<StackLayout>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Label  Text="First label" Grid.Column="0" BackgroundColor="Aqua"
                LineBreakMode="WordWrap" />

        <Label Text="Second label" Grid.Column="1"  BackgroundColor="Red"
               LineBreakMode="WordWrap" />

        <Label Text="Third label but with longer text" Grid.Column="2" BackgroundColor="Aqua"
               LineBreakMode="WordWrap"/>

        <Label Text="Fourth label" BackgroundColor="Red"
               Grid.Column="3"   LineBreakMode="WordWrap" />

    </Grid>
    <BoxView BackgroundColor="Blue"></BoxView>

    <FlexLayout AlignItems="Stretch">
        <Label  Text="First label" 
                FlexLayout.Grow="1" 
                FlexLayout.Basis="0" 
                BackgroundColor="Aqua"
                LineBreakMode="WordWrap" />

        <Label  Text="Second label" 
                FlexLayout.Grow="1" 
                FlexLayout.Basis="0" 
                BackgroundColor="Red"
                LineBreakMode="WordWrap" />

        <Label  Text="Third label but with longer text" 
                FlexLayout.Grow="1" 
                FlexLayout.Basis="0" 
                BackgroundColor="Aqua"
                VerticalOptions="FillAndExpand"
                LineBreakMode="WordWrap" />

        <Label  Text="Fourth label" 
                FlexLayout.Grow="1" 
                FlexLayout.Basis="0" 
                BackgroundColor="Red"
                LineBreakMode="WordWrap" />

    </FlexLayout>
    <BoxView BackgroundColor="Blue"></BoxView>
</StackLayout>

Grid and FlexLayout displayed

我发现当将 FlexLayout 的 HeightRequest 设置为特定数字（例如 150）时，一切都按预期工作 - 行的高度为 150，所有标签都伸展以适应该数字。所以我需要以某种方式指定HeightRequest="Auto"，以便该行适合所有列的内容而不设置为特定值

有没有办法做到这一点？

Answer 1

FlexLayout 将剪切其子 Elements 。所以在你的情况下使用 Grid 是最好的解决方案。

这样我就可以将字符串列表绑定到 BindableLayout 并轻松添加和删除列

如果你想显示一个数据集合，我建议你可以使用 ListView 或 CollectionView（如果你想让集合水平滚动或显示多列在同一行）。

 <ContentPage.Resources>
        <ResourceDictionary>
            <local:WidthConverter x:Key="WidthConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout x:Name="stack">
        <CollectionView x:Name="list"  >

            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Horizontal" />
            </CollectionView.ItemsLayout>

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    

                        <Grid WidthRequest="{Binding Source={x:Reference stack},Path=Width,Converter={StaticResource WidthConverter}}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <Label Text="111111" BackgroundColor="LightBlue"  />

                           

                        </Grid>

                    
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

在后面的代码中

public class WidthConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var width = (double)value;

            if(width>0)
            {
                return width * 0.25;
            }

            return 100;

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return 0;
        }
    }

更多详情可以查看https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#horizontal-list