Xamarin.forms如何在列表中彼此相邻显示项目 [英] Xamarin.forms How can I show items next each other in a list
问题描述
我目前正在使用 Xamarin.Forms 和.Net标准共享策略来开发应用程序.一切都在共享项目中完成. (没有设备指定设计).
I am currently developing an app using Xamarin.Forms with .Net standard sharing strategy. Everything is done in the shared project. (No device specifies designs).
我尝试将对象列表绑定到列表视图.我已经用ItemsSource="{Binding Items}"显示/填充列表了.所选项目也与SelectedItem="{Binding SelectedApp}"绑定到了列表视图.
每个listItem可视化为带有图像和标题的框架.
通过使用数据模板.
I try to bind a list of objects to a listview. I already show/fill the list with ItemsSource="{Binding Items}" The selected item is bound to the listview as well SelectedItem="{Binding SelectedApp}".
Each listItem is visualized as a frame with an image and a title.
By using a datatemplate.
我要实现的目标是使我的列表视图看起来像类似于Google PlayStore的列表":
What I try to achieve is make my listview look like a "Google PlayStore-like-List":
彼此相邻显示项目. 当水平方向上没有地方时，下一个项目将显示在下一行.列表会自动将项目调整为可用的. 这样，从纵向切换为横向时，列表的屏幕响应性更好.
showing the items next each other. When there is horizontally no place left, the items next items will show on a next line. The list automatically adapts the items to the available with. This way, the list is better screen responsive when switching from portrait to landscape.
我的问题是，如何在此结构中显示列表? 但是，很好，材料设计卡设计不是此问题的一部分.
My question is how, can I show the list in this structure? However it would be nice, the Material design card design is not a part of this problem.
这个问题描述了一个我想成为的类似我的问题. 期望我正在开发Xamarin应用程序，而不是本机(java)Android应用程序: 如何将CardView彼此相邻放置?
This question describe a similar my problem what I try to become. Expect I am developing a Xamarin app and not a Native (java) Android app: How to position CardViews next to each other?
推荐答案
There is a control named FlowListView (see here)
只需添加NuGet包并从XAML中添加视图
Just add the NuGet package and add the view from your 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命名空间).
(don't forget to add flv namespace).
当然，这假定您FlowListView中的项目具有属性Image，Type，Name和Rating.此外，我假设存在一个名为Rating的控件来显示服务的等级.当然，您必须根据您的属性名称和您的需要修改实际代码，但是基本上可以做到这一点.
Of course this assumes that the items in your FlowListView have the properties Image, Type, Name and Rating. Furthermore I've assumed the existence of a control named Rating to display the rating of the service. Of course you'll have to adapt the actual code to your property names and to your needs, but basically this should do.
我还没有尝试过该控件，因此我不知道如何计分.您可能必须将FlowListView包装在ScrollView中，但也可以直接使用.
I have not tried the control myself, hence I don't know about scolling. You might have to wrap the FlowListView in a ScrollView, but it might as well work out of the box.
编辑
要调整列数，您可以覆盖页面上的OnSizeAllocated，然后确定方向并相应地设置FlowColumnCount(请参阅
To adapt the number of columns you can override OnSizeAllocated on your page, then determine the orientation and set the FlowColumnCount accordingly (see 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;
}
}
}
这假设我们已经在FlowListView中添加了x:Name="FlowListView.更好的方法是根据实际宽度计算列数，但我想您有要点.
This assumes that we've added x:Name="FlowListView to out FlowListView. Even better would be to calculate the number of columns based on the actual width, but I think you've got the gist.
这篇关于Xamarin.forms如何在列表中彼此相邻显示项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
