Question

我正在以xamrin格式使用以下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相同的问题。

Xamarin在列表视图中对齐项目

1 个答案: