网格本身的大小不正确

Posted 2023-05-06

【中文标题】网格本身的大小不正确

【英文标题】：Grid does not properly size itself

【发布时间】：2021-02-08 20:44:16

【问题描述】：

我在 Xamarin Forms 应用程序中遇到了 CollectionView 和 Grid 的问题。 CollectionView 高度本身的大小不正确，内部的元素重叠。我尝试了一切都没有成功。

这是网格页面 XAML 定义：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Name="this"
         VerticalOptions="FillAndExpand"
         x:Class="RuberoydLabs.WallettoX.Controls.EventCell.EventCell">
<ContentView.Content>
    <Grid x:Name="SpendingEventWrapper"
          BindingContext="x:Reference this"
          VerticalOptions="FillAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto"  />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="60*" />
            <ColumnDefinition Width="30*" />
        </Grid.ColumnDefinitions>
        <AbsoluteLayout Grid.Column="0"
                        Grid.Row="0"
                        VerticalOptions="FillAndExpand">
            <Ellipse Fill="StaticResource PrimaryBrush"
                     WidthRequest="35"
                     HeightRequest="35"
                     Margin="5,0,0,0"
                     StrokeThickness="0"
                     AbsoluteLayout.LayoutFlags="PositionProportional"
                     AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1" />
            <Label AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
                   AbsoluteLayout.LayoutFlags="PositionProportional"
                   Margin="5,-2,0,0"
                   x:Name="UserInitials"
                   TextColor="#0D495A" />
        </AbsoluteLayout>
        <StackLayout Grid.Column="1"
                     Grid.Row="0"
                     Orientation="Vertical"
                     VerticalOptions="FillAndExpand">
            <Label Text="Binding InputEvent.Title" 
                   FontSize="15"
                   x:Name="TitleLabel"
                   HorizontalOptions="StartAndExpand"
                   VerticalOptions="StartAndExpand"
                   TextColor="#24838E" />
            <Label Text="Binding InputEvent.Category.Name"
                   FontSize="12"
                   x:Name="CategoryLabel"
                   Margin="0,-4,0,0"
                   BackgroundColor="#C59B59"
                   Padding="4,2,4,2"
                   HorizontalOptions="StartAndExpand"
                   VerticalOptions="StartAndExpand"
                   TextColor="White" />
            <Label x:Name="CommentLabel"
                   Text="Binding InputEvent.Comment"
                   FontSize="12"
                   Margin="0,-4,0,0"
                   HorizontalOptions="StartAndExpand"
                   VerticalOptions="StartAndExpand"
                   TextColor="#959595" />
        </StackLayout>
        <StackLayout Grid.Column="2"
                     Grid.Row="0"
                     Orientation="Vertical"
                     VerticalOptions="FillAndExpand">
            <Label Text="Binding InputEvent.Amount, StringFormat='0:F2'"
                   Margin="0,5,10,0"
                   TextColor="#2F2F2F"
                   HorizontalOptions="EndAndExpand" />
            <Label Text="Binding InputEvent.MoneyAccount.Currency"
                   Margin="0,-5,10,0"
                   FontSize="11"
                   FontAttributes="Italic"
                   TextColor="#ADADAD"
                   HorizontalOptions="EndAndExpand" />
        </StackLayout>
        <BoxView Grid.ColumnSpan="3"
                 Grid.Row="1"
                 Grid.Column="0"
                 HeightRequest=".5"
                 BackgroundColor="#BABABA"  />
    </Grid>
</ContentView.Content>

这是我的 CollectionView XAML 定义：

<?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:controls="clr-namespace:RuberoydLabs.WallettoX.Controls.EventCell;assembly=RuberoydLabs.WallettoX"
         xmlns:resources="clr-namespace:RuberoydLabs.WallettoX;assembly=RuberoydLabs.WallettoX"
         x:Class="RuberoydLabs.WallettoX.Views.DashboardPage">
<ContentPage.Content>
    <StackLayout VerticalOptions="FillAndExpand" 
                 Orientation="Vertical">
        <CollectionView ItemsSource="Binding Groups" 
                        IsGrouped="True"
                        VerticalOptions="FillAndExpand">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                        <controls:EventCell InputEvent="Binding" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
            <CollectionView.GroupHeaderTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="FillAndExpand"
                                 Padding="5,0,5,3"
                                 Margin="0,0,0,5"
                                 BackgroundColor="#E3E3E3">
                        <Label FontSize="12"
                               VerticalOptions="Center"
                               TextColor="#767676"
                               Text="Binding Date, StringFormat='0:dddd MMMM d, yyyy'" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.GroupHeaderTemplate>
            <CollectionView.GroupFooterTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal"
                                 Padding="0,0,10,0"
                                 HorizontalOptions="FillAndExpand">
                        <Label Text="x:Static resources:StringLocalization.Balance"
                               HorizontalOptions="EndAndExpand" />
                        <Label Text="Binding DayBalanceFormatted"
                               HorizontalOptions="End" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.GroupFooterTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage.Content>

由于某种原因，列表中的元素只是重叠。有趣的是，它在 android 和 ios 上看起来不同。

这是它在 iOS 上的样子：

这就是它在 Android 上的样子，如果标签跨越两行或多行，它会在单元格之间添加奇怪的空间：

我几乎尝试了所有方法：删除不同类型的网格元素（如省略号、方框视图），尝试了所有可能的 VerticalOptions 和 HorizontalOptions 组合，同时删除了 GroupHeaderTemplate 和 GroupFooterTemplate，问题仍然存在.

非常感谢任何帮助。

【问题讨论】：

能否在github上提供一个简单的示例，我将下载您的示例在我身边测试。

@CherryBu-MSFT 请看github.com/vcartera81/XamarinFormsBug

据我所知，一切都很好。我只是尝试在我的环境中重新创建这种行为，但没什么奇怪的。既不是安卓模拟器，也不是iOS模拟器。我想澄清一件事。正如我所见，您提供了 iOS 模拟器屏幕。你用的是哪个 iPhone 模拟器？你在真机上试过吗？从提供的 repo 我得出结论，您项目的 iOS 版本部署目标是 8.0，对吗？

@Carteră Veaceslav 我下载了你的示例并进行测试，我猜 AbsoluteLayout 有一些问题，我尝试使用 Frame 替换 AbsoluteLayout 来做，但它仍然有一些问题，你可以试着去做。

@MoRRt 你试过我提供的示例 GitHub 存储库吗？

【参考方案1】：

通过升级到最新的 Xamarin v5.0.0.2012 解决了这个问题