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

Question

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

我尝试将 objects 的列表绑定到列表视图。我已经 show/fill 列表 ItemsSource="{Binding Items}" 所选项目也绑定到列表视图 SelectedItem="{Binding SelectedApp}"。每个 listItem 都可视化为带有图像和标题的框架。通过使用数据模板。

我试图实现的是使我的列表视图看起来像 "Google PlayStore-like-List"：

显示的是彼此相邻的项目。当横向没有位置时，item next items 将显示在下一行。该列表会自动调整项目以适应可用的情况。这样，当从纵向切换到横向时，列表可以更好地响应屏幕。

我的问题是，如何才能以这种结构显示列表？ 然而，这将是很好的，Material设计卡设计不是这个问题的一部分。

这个问题描述了一个与我想成为的问题类似的问题。预计我正在开发 Xamarin 应用程序而不是本地 (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 的控件来显示服务的评级。当然，您必须根据您的属性名称和需要调整实际代码，但基本上应该这样做。

我自己没有试过控件，所以不知道scolling。您可能需要将 FlowListView 包装在 ScrollView 中，但它也可以开箱即用。

编辑

要调整您可以覆盖页面上的 OnSizeAllocated 的列数，然后确定方向并相应地设置 FlowColumnCount（请参阅 here and 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 中。更好的方法是根据实际宽度计算列数，但我认为您已经掌握了要点。

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

Xamarin.forms How can I show items next each other in a list

c#

xaml

xamarin

xamarin.forms

.net-standard-2.0