ios - iOS 上的 Xamarin.Forms ListView ViewCell 问题

Question

我一直在努力使它在 Xaml (x.forms) 中看起来正确，但无法使其工作。在没有自定义单元格渲染器的情况下，有什么可能的方法可以在 Xaml 中解决这个问题？

这是它在 native iOS 上的外观:

到目前为止，我在 Xaml 中得到了什么:

这是我的 Xaml:

<ScrollView>
    <StackLayout>
        <ActivityIndicator IsRunning="{Binding IsFetching}" />
        <ListView ItemsSource="{Binding Events}" Header="2015" Footer="">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell Height="55">
                        <ViewCell.View>
                            <StackLayout Orientation="Horizontal" Padding="5" BackgroundColor="White">                                                          
                                <StackLayout>
                                    <BoxView WidthRequest="44" 
                                         HeightRequest="5"  
                                         BackgroundColor="Purple"
                                         />
                                    <Label Text="AUG" FontSize="12" HeightRequest="13" HorizontalOptions="Center" VerticalOptions="Start" FontAttributes="Bold"/>
                                    <Label Text="31" FontSize="13" VerticalOptions="StartAndExpand" HorizontalOptions="Center" />
                                </StackLayout>                              
                                <StackLayout Orientation="Vertical"
                                             HorizontalOptions="StartAndExpand">
                                    <Label Text="Relay For Life of" FontSize="14" VerticalOptions="End" TextColor="Gray"/>
                                    <Label Text="Hope City" FontSize="16" FontAttributes="Bold" VerticalOptions="StartAndExpand"/>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell.View>
                    </ViewCell>         
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ScrollView>

Answer 1

您可以尝试使用 Grid 而不是 Stack，也可以将 RowHeight 添加到您的 ListView

<ListView ... RowHeight="55">
 ...
 <ViewCell Height="55">
   <Grid> 
     <Grid.ColumnDefinitions>
       <ColumnDefinition Width="44"/>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="44"/> <!-- for the checkmark -->
     </Grid.ColumnDefinitions>
     <Grid Grid.Column="0">
       <Grid.RowDefinitions>
          <RowDefinition Height="5" />
          <RowDefinition Height="22" />
          <RowDefinition Height="17" />
       </Grid.RowDefinitions>
       <BoxView Grid.Row="0" WidthRequest="44" HeightRequest="5" BackgroundColor="Purple"/>
       <!-- experiment with the vertical alignment to get it right -->
       <Label Grid.Row="1" Text="AUG" .../>
       <Label Grid.Row="2" Text="31" .../>
     </Grid>
<Grid Grid.Column="0">
       <Grid.RowDefinitions>
          <RowDefinition Height="22" />
          <RowDefinition Height="22" /> 
       </Grid.RowDefinitions> 
       <!-- if the vertical alignment doesn't work well add two more rows for top and bottom padding -->
       <Label Grid.Row="0" Text="Relay for life" VerticalOptions="End" .../>
       <Label Grid.Row="1" Text="Hope city" VerticalOptions="Start" .../>
     </Grid>
   </Grid>
 </ViewCell>