Expander 展开时会切断 CollectionView 的一部分答案

【问题标题】：Expander cuts off part of part of CollectionView when expandedExpander 展开时会切断 CollectionView 的一部分
【发布时间】：2021-05-10 01:16:02
【问题描述】：

我将 Xamarin.Forms 5 与 Community Toolkit 1.02 一起使用。 Expander 似乎可以很好地处理正文中的静态内容，但是当我添加 CollectionView 时，内容的底部会被截断。

如果我滚动到最初可见的区域之外，项目就会显示出来。下面是我用于短动画的简化 XAML 和模型。我做错了什么？

XAML：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="Sandbox.Views.ExpanderPage">
    <ContentPage.Content>
        <xct:Expander>
            <xct:Expander.Header>
                <Label Text="Header" Padding="20" BackgroundColor="LightCyan"/>
            </xct:Expander.Header>
            <StackLayout HeightRequest="160" BackgroundColor="Aquamarine">
                <CollectionView
                            ItemsSource="{Binding Items}"
                            VerticalOptions="End" 
                            SelectionMode="Single">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout ItemSpacing="0" Orientation="Horizontal" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout 
                                WidthRequest="160"
                                HeightRequest="160"
                                BackgroundColor="Orange"
                                Spacing="0">
                                <Label Text="{Binding Text}" BackgroundColor="LightSkyBlue"/>
                                <Label Text="{Binding Text}" BackgroundColor="LightSkyBlue"/>
                                <Label Text="{Binding Text}" BackgroundColor="LightSkyBlue"/>
                                <Label Text="{Binding Text}" BackgroundColor="LightSkyBlue"/>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </xct:Expander>
    </ContentPage.Content>
</ContentPage>

模型：

public class ExpanderViewModel : BaseViewModel
{
    public ObservableCollection<ExpanderItem> Items { get; }
    public ExpanderViewModel()
    {
        Items = new ObservableCollection<ExpanderItem>() { 
            new ExpanderItem(){Text = "Item 1" },
            new ExpanderItem(){Text = "Item 2" },
            new ExpanderItem(){Text = "Item 3" },
            new ExpanderItem(){Text = "Item 4" },
        };
    }
}

public class ExpanderItem
{
    public string Text { get; set; }
}

【问题讨论】：

标签： xaml xamarin.forms xamarin-community-toolkit

【解决方案1】：

由于ItemSpacing="0" 是默认值，所以你应该省略它，

替换

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

由

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

【讨论】：

如果它回答了您的问题或您觉得它有帮助，请通过upvote ▲/✅ 告诉我，否则您可以给我留下反馈/评论。