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

Question

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

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

我尝试实现的目标是让我的listview看起来像＆＃34; Google PlayStore-like-List＆＃34;：

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

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

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

Answer 1

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