在 Listview 列中显示数据，而不是行的 Xamarin.Forms 中显示数据

Question

嗨，伙计们，我正在尝试使用如下图所示的列表视图以列格式显示数据。我如何在Xamarin.Forms或Xamarin.Android中实现这一目标。

列显示

Answer 1

溶液：我写了一个简单的代码来实现你图片中的布局。我使用 ：xamlGrid<ContentPage.Content>&nbsp; &nbsp; &nbsp; &nbsp; <Grid x:Name="controlGrid" RowSpacing="2" ColumnSpacing="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.RowDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.RowDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Vertical"&nbsp; Grid.Row="0" Grid.Column="0" BackgroundColor="White">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Horizontal">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Text="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand" HeightRequest="40" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView&nbsp; BackgroundColor="Gray" VerticalOptions="FillAndExpand"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Vertical"&nbsp; Grid.Row="0" Grid.Column="1" BackgroundColor="White">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Horizontal">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Text="2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand"&nbsp; HeightRequest="40" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView&nbsp; &nbsp;BackgroundColor="Orange" VerticalOptions="FillAndExpand" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Vertical"&nbsp; Grid.Row="0" Grid.Column="2" BackgroundColor="White">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView&nbsp; &nbsp;BackgroundColor="Green"&nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView&nbsp; &nbsp;BackgroundColor="Pink" VerticalOptions="FillAndExpand"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Vertical"&nbsp; Grid.Row="0" Grid.Column="3" BackgroundColor="White">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView&nbsp; &nbsp;BackgroundColor="Green" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView&nbsp; &nbsp;BackgroundColor="Yellow" VerticalOptions="FillAndExpand" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Vertical"&nbsp; Grid.Row="1" Grid.Column="0" BackgroundColor="White">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Horizontal">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Text="5" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand"&nbsp; HeightRequest="40" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView&nbsp; BackgroundColor="Gray" VerticalOptions="FillAndExpand"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Vertical"&nbsp; Grid.Row="1" Grid.Column="1"&nbsp; BackgroundColor="White">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView&nbsp; &nbsp;BackgroundColor="Green" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView&nbsp; &nbsp;BackgroundColor="Pink" VerticalOptions="FillAndExpand" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Vertical"&nbsp; Grid.Row="1" Grid.Column="2" BackgroundColor="White" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label&nbsp; Text="777" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Green" HeightRequest="40"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView&nbsp; &nbsp;BackgroundColor="Orange" VerticalOptions="FillAndExpand" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Vertical"&nbsp; Grid.Row="1" Grid.Column="3" BackgroundColor="White">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Orientation="Horizontal">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Text="8" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand"&nbsp; HeightRequest="40" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Text="TEXT" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Blue" WidthRequest="50" HeightRequest="40"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView&nbsp; &nbsp;BackgroundColor="Gold" VerticalOptions="FillAndExpand" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; </ContentPage.Content>&nbsp;我设置了 's，让它看起来像之间有黑线。ContentPageBackgroundColor="Black"Grids您可以通过我的代码中的控件自定义自己的布局。changing这是：Screen Shot

Answer 2

我通过使用插件DLToolkit.Forms.Controls.FlowListView实现了布局Xaml<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;BackgroundColor="Black"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView" >&nbsp; &nbsp; <ContentPage.Content>&nbsp; &nbsp; <flv:FlowListView x:Name="FlowListViewH" FlowColumnCount="{Binding ColumnCount}" SeparatorVisibility="Default" HasUnevenRows="True"&nbsp; &nbsp; &nbsp; &nbsp; FlowItemTappedCommand="{Binding ItemTappedCommand}" FlowLastTappedItem="{Binding LastTappedItem}"&nbsp; &nbsp; &nbsp; &nbsp; FlowItemsSource="{Binding Items}" FlowColumnMinWidth="220" >&nbsp; &nbsp; &nbsp; &nbsp; <flv:FlowListView.FlowColumnTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout Margin="5" BackgroundColor="Red" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid x:Name="controlGrid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.RowDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="25*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="25*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="25*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.RowDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="50*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="50*" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Red" TextColor="Black"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Text="{Binding TableNumber}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" FontSize="Large"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label HorizontalOptions="Fill" VerticalOptions="Fill"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; XAlign="Center" YAlign="Center" Text="{Binding ItemName}"&nbsp; Grid.Row="1" Grid.Column="0" TextColor="Black"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label HorizontalOptions="FillAndExpand" VerticalOptions="Fill"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; XAlign="Center" YAlign="Center" Text="{Binding OrderedQuantity}"&nbsp; Grid.Row="1" Grid.Column="1" TextColor="Black"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label HorizontalOptions="FillAndExpand" VerticalOptions="Fill"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; XAlign="Center" YAlign="Center" Text="{Binding Status}"&nbsp; Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" TextColor="Black" BackgroundColor="White"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; </flv:FlowListView.FlowColumnTemplate>&nbsp; &nbsp; </flv:FlowListView></ContentPage.Content>xaml.cspublic&nbsp; Page ()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; NavigationPage.SetHasNavigationBar(this, false); //remove nav bar&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; InitializeComponent ();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; LoadOrders();//populates Observable collection&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;FlowListViewH.FlowItemsSource = OrdersForKitchenPage;//sets source to Observable collection&nbsp; &nbsp; &nbsp; &nbsp; }