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

Question

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

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

我试图实现的是使我的listview看起来像"Google PlayStore-like-List":

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

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

这个问题描述了我试图成为的类似问题.期待我正在开发一个Xamarin应用程序,而不是一个原生(Java)Android应用程序: 如何将CardViews彼此相邻？

Answer 1

有一个名为FlowListView(见这里)的控件

只需添加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显示服务评级的控件.当然,您必须根据您的属性名称和需求调整实际代码,但基本上应该这样做.

我自己没有试过控制,因此我不知道骂人.您可能需要将其包装成FlowListViewa ScrollView,但它也可以开箱即用.

编辑

要调整您可以OnSizeAllocated在页面上覆盖的列数,请确定方向并相应地设置FlowColumnCount(请参见此处和此处).

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.更好的方法是根据实际宽度计算列数,但我认为你已经掌握了要点.