Xamarin.Forms - 将 CollectionView 的高度调整为适合儿童的最小尺寸

Question

我有一个 CollectionView，里面有一些项目。 我正在尝试将 CollectionView 的大小调整为足够大以适合其所有子项。 现在，它比它拥有的孩子的数量要多得多。

蓝色代表 CollectionView 的大小。 正如你所看到的，它远远超出了它的孩子的大小。 我希望它完美地适合它们，或者至少更接近相同的尺寸。

我对页面上的任何元素都没有任何高度请求，包括 CollectionView。

这是我的代码。 目前它并不是特别漂亮，但它正在进行中。

<StackLayout>
                <CollectionView x:Name="assessmentsCollectionView"
                                BackgroundColor="Blue">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Spacing="10"
                                         Padding="5">
                                <Frame CornerRadius="5"
                                       Padding="0"
                                       HorizontalOptions="FillAndExpand"
                                       VerticalOptions="FillAndExpand">
                                    <StackLayout Orientation="Horizontal">
                                        <Frame Padding="5"
                                               CornerRadius="0"
                                               WidthRequest="50">
                                            <Label Text="{Binding TypeLetter}"
                                                   TextColor="#37474f"
                                                   FontSize="24"
                                                   VerticalTextAlignment="Center"
                                                   HorizontalTextAlignment="Center"/>
                                        </Frame>
                                        <StackLayout Padding="10">
                                            <Label Text="{Binding Name}"
                                               TextColor="Black"
                                               FontSize="24"/>
                                            <StackLayout Orientation="Horizontal">
                                                <Image Source="calendarIcon.png"
                                                       WidthRequest="12"
                                                       HeightRequest="12"/>
                                                <Label Text="{Binding Date}"
                                                       FontSize="12"
                                                       TextColor="Gray"/>
                                            </StackLayout>
                                        </StackLayout>
                                    </StackLayout>
                                </Frame>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>

Answer 1

如果 Collectionview 中的行数很少，则可以为collectionView.HeightRequest设置一个值。 当物品增加时，高度也会增加。

我创建了一个名为.RowHeigth 的属性。 如果我在 CollectionView 中添加项目（使用 AddCommand），RowHeigth 会增加。

<StackLayout>
        <CollectionView
            x:Name="assessmentsCollectionView"
            BackgroundColor="Blue"
            HeightRequest="{Binding rowHeigth}"
            ItemsSource="{Binding letters}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding="5" Spacing="10">
                        <Frame
                            Padding="0"
                            CornerRadius="5"
                            HorizontalOptions="FillAndExpand"
                            VerticalOptions="FillAndExpand">
                            <StackLayout Orientation="Horizontal">
                                <Frame
                                    Padding="5"
                                    CornerRadius="0"
                                    WidthRequest="50">
                                    <Label
                                        FontSize="24"
                                        HorizontalTextAlignment="Center"
                                        Text="{Binding TypeLetter}"
                                        TextColor="#37474f"
                                        VerticalTextAlignment="Center" />
                                </Frame>
                                <StackLayout Padding="10">
                                    <Label
                                        FontSize="24"
                                        Text="{Binding Name}"
                                        TextColor="Black" />
                                    <StackLayout Orientation="Horizontal">
                                        <Image
                                            HeightRequest="12"
                                            Source="c1.png"
                                            WidthRequest="12" />
                                        <Label
                                            FontSize="12"
                                            Text="{Binding Date}"
                                            TextColor="Gray" />
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <Button
            x:Name="btn1"
            Command="{Binding AddCommand}"
            Text="btn1" />
    </StackLayout>

 public partial class Page4 : ContentPage
{
    
    public Page4()
    {
        InitializeComponent();

        this.BindingContext = new letterviewmodel(); ;
    }
}
public class letterviewmodel: INotifyPropertyChanged
{
    public ObservableCollection<lettermodel> letters { get; set; }
    private int _rowHeigth;
    public int rowHeigth
    {
        get { return _rowHeigth; }
        set
        {
            _rowHeigth = value;
            RaisePropertyChanged("rowHeigth");
        }
    }
    public ICommand AddCommand { protected set; get; }
    public letterviewmodel()
    {
        letters = new ObservableCollection<lettermodel>()
        {
            new lettermodel(){TypeLetter="A",Name="letter 1",Date="2021-01-01"},
            new lettermodel(){TypeLetter="B",Name="letter 2",Date="2021-01-01"},
            new lettermodel(){TypeLetter="C",Name="letter 3",Date="2021-01-01"}

        };
        rowHeigth = letters.Count * 100 ;

        AddCommand = new Command<lettermodel>(async (key) => {
            letters.Add(new lettermodel() { TypeLetter = "D", Name = "test letter ", Date = "2021-01-01" });
            rowHeigth = letters.Count * 100 ;
        });
    }
    
    public event PropertyChangedEventHandler PropertyChanged;       
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
public class lettermodel
{
    public string TypeLetter { get; set; }
    public string Name { get; set; }
    public string Date { get; set; }
}

不要忘记实现 INotifyPropertyChanged 接口，以通知数据更新。

Answer 2

我用 BindableLayout.ItemsSource 和 BindableLayout.ItemTemplate 将 CollectionView 更改为 FlexLayout 以前是什么

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

做了什么

 <FlexLayout Direction="Column"
                         x:Name="MessagesList"
                         AutomationId="MessagesList"
                         BindableLayout.ItemsSource="{Binding Messages}" >
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            ...
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </FlexLayout>

对我来说效果很好，不需要为 item 或 FlexLayout 设置高度，都是动态的