Xamarin.forms如何在列表中显示彼此相邻的项目

Posted 2021-04-02

我目前正在使用带有.Net标准共享策略的Xamarin.Forms开发一个应用程序。一切都在共享项目中完成。 （没有设备指定设计）。

我尝试将对象列表绑定到列表视图。我已经用ItemsSource="{Binding Items}"显示/填充列表所选项目也与listview以及SelectedItem="{Binding SelectedApp}"绑定。每个listItem都可视化为具有图像和标题的帧。通过使用datatemplate。

我试图实现的是使我的listview看起来像“Google PlayStore-like-List”：

显示彼此相邻的项目。当水平没有剩下的地方时，下一项的项目将显示在下一行。该列表会自动将项目调整为可用项目。这样，从纵向切换到横向时，列表响应更好。

我的问题是如何在这个结构中显示列表？然而，它会很好，材料设计卡设计不是这个问题的一部分。

这个问题描述了我试图成为的类似问题。期待我正在开发一个Xamarin应用程序而不是Native（java）android应用程序：How to position CardViews next to each other?

答案

有一个名为FlowListView的控件（参见here）

只需添加NuGet包并添加XAML中的视图即可

<flv:FlowListView FlowColumnCount="3" FlowItemsSource="{Binding Items}">
    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate>
            <StackLayout>
                <Image Source="{Binding Image}" />
                <Label Text="{Binding Type}" />
                <Label Text="{Binding Name}" FontSize="Small" />
                <local:Rating Value="{Binding Rating}" />
            </StackLayout>
        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>

（别忘了添加flv命名空间）。

当然，这假设你的FlowListView中的物品有Image，Type，Name和Rating属性。此外，我假设存在一个名为Rating的控件来显示服务的评级。当然，您必须根据您的属性名称和需求调整实际代码，但基本上应该这样做。

我自己没有试过控制，因此我不知道骂人。您可能需要将FlowListView包裹在ScrollView中，但它也可以开箱即用。

编辑

要调整列数，可以在页面上覆盖OnSizeAllocated，然后确定方向并相应地设置FlowColumnCount（请参阅here和here）。

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height); // Important!

    if (width != _width || height != _height)
    {
        _width = width;
        _height = height;

        if(width > height)
        {
            FlowListView.FlowColumnCount = 4;
        }
        else
        {
            FlowListView.FlowColumnCount = 2;
        }
    }
}

这假设我们已经将x:Name="FlowListView添加到了FlowListView。更好的方法是根据实际宽度计算列数，但我认为你已经掌握了要点。