0

我将 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; }
}

在此处输入图像描述

4

1 回答 1

0

因为ItemSpacing="0"它是默认值,所以你应该省略它,

代替

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

经过

<CollectionView.ItemsLayout>
     <GridItemsLayout Orientation="Horizontal"/>
</CollectionView.ItemsLayout>
于 2021-02-05T19:07:04.837 回答