Xamarin在列表视图中对齐项目

Question

我在xamarin表单中使用以下xaml来创建订单详细信息页面，其中包含子列表视图中的订单列表但是我在对齐列表视图项时遇到了一些困难。

<ContentPage.Content>
  <ScrollView>
    <StackLayout Spacing="2">
         <Label Text="Order Number:"></Label>
          <Label Text="{Binding  Item.SopOrderNumber}" 
           LineBreakMode="NoWrap" 
           FontSize="20" />
            <Label Text="Phone Number:" FontSize="20" ></Label>
            <Label Text="{Binding  Item.TelephoneNumber}"/>
            <Button Command="{Binding SubmitCommand}"  Text="Click To Call"  TextColor="White"  
                FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"  
                BackgroundColor="#088da5" /> 
            <Label Text="{Binding  Item.CustomerName}" 
                            LineBreakMode="NoWrap" 
                           FontSize="20"  />                                        
            <Label Text="Order Status"                         
            HorizontalOptions="StartAndExpand" />              
            <Picker x:Name="picker" Title="Order Status">
                <Picker.ItemsSource >
                    <x:Array Type="{x:Type x:String}">
                        <x:String>Delivered</x:String>
                        <x:String>Damaged</x:String>
                        <x:String>Missing</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </Picker> 

            <Label Text="Order Details" FontSize="Large"></Label>
            <ListView x:Name="DeliveryItemsList" HeightRequest="80" HasUnevenRows="True" >
                    <ListView.ItemTemplate >
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal">
                                <StackLayout Orientation="Horizontal" Padding="10" Spacing="15">
                                    <Label Text="{Binding ItemNumber}" FontSize="20" ></Label>
                                    <Label Text="{Binding StockCode}"  FontSize="20" TextColor="Gray"></Label>
                                    <Label Text="{Binding StockDescription}"  FontSize="20" TextColor="Gray"></Label>
                                    <Label Text="{Binding Price}" TextColor="Gray"  FontSize="20" ></Label>
                                    <Label Text="{Binding Qty}" TextColor="Gray"  FontSize="20" ></Label>
                                </StackLayout>

                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

                <Label Text="Notes"                           
            HorizontalOptions="StartAndExpand"             
               />
            <Editor x:Name="txtNotes"
                    VerticalOptions="FillAndExpand" HeightRequest="20"></Editor>

                  <Sig:SignaturePadView x:Name="signaturePad" />

            <Image x:Name="PhotoSource" ></Image>

            <Button Command="{Binding SubmitCommand}"  Text="Take Picture of Delivery" x:Name="btnTakePhto" Clicked="BtnTakePhto_Clicked"  TextColor="White"  
                FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"  
                BackgroundColor="#088da5" />

            <Button Text="Update Order" BackgroundColor="AliceBlue"  Clicked="Update_Order_Clicked"></Button>
            <Button Text="Update Order and Goto Next Job" BackgroundColor="AliceBlue"  Clicked="Update_Order_Clicked"></Button>

        </StackLayout>
    </ScrollView>
</ContentPage.Content>

从图像中可以看出，Listview中的项目彼此不一致如何使它们如此对齐。

编辑2嗨再次我害怕我尝试了下面的答案，但它没有工作到最后它看起来很健康。

    <ListView x:Name="DeliveryItemsList" HeightRequest="80" HasUnevenRows="True" >

<ListView.ItemTemplate >
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                    </Grid>

                    <Label Text="{Binding ItemNumber}" FontSize="20" ></Label>
                    <Label Text="{Binding StockCode}"  FontSize="20" TextColor="Gray"></Label>
                    <Label Text="{Binding StockDescription}"  FontSize="20" TextColor="Gray"></Label>
                    <Label Text="{Binding Price}" TextColor="Gray"  FontSize="20" ></Label>
                    <Label Text="{Binding Qty}" TextColor="Gray"  FontSize="20" ></Label>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

</ListView>

Answer 1

如果你想要对齐，StackLayout可能不是这样做的。 StackLayout根据需要为每个子元素分配空间，因此如果列表中的每一行对不同元素（如价格）有不同的宽度要求，您将获得所见的布局类型。

一种更好的方法是Grid，它可以让您明确控制每列的​​宽度：

<ListView.ItemTemplate >
    <DataTemplate>
        <ViewCell>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
            </Grid>

            <Label Text="{Binding ItemNumber}" Grid.Column="0" FontSize="20" ></Label>
            <Label Text="{Binding StockCode}"  Grid.Column="1" FontSize="20" TextColor="Gray"></Label>
            <Label Text="{Binding StockDescription}"  Grid.Column="2" FontSize="20" TextColor="Gray"></Label>
            <Label Text="{Binding Price}" Grid.Column="3" TextColor="Gray"  FontSize="20" ></Label>
            <Label Text="{Binding Qty}"  Grid.Column="4" TextColor="Gray"  FontSize="20" ></Label>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

在此示例中，每列定义为具有相等的宽度（均匀划分可用宽度），但您可以根据需要进行调整。

您可以将其中一个ColumnDefinitions更改为Width =“1.5 *”，这将为该列分配1.5倍的空间，就像对其他列一样。或者你可以定义一个Width =“100”的列，无论屏幕的宽度如何，都会给它一个固定的大小。

还有Width =“Auto”，它允许您根据该列内容所需的空间量设置列的宽度，但由于ListView中的每一行都是不同的Grid，您最终会得到与StackLayout现在一样的问题。