如何使用 xamarin 在 StackLayout 中容纳 5 列而不超出框架

如何解决如何使用 xamarin 在 StackLayout 中容纳 5 列而不超出框架

我想在 StackLayout 中将 5 列放在一起而不超出框架。在 iPhone 12Pro Max 中一切正常，但在 Iphone 8 中看起来不太好。

我的代码：

<Frame
                   BorderColor="White"
                   Margin="10,10,0"
                   CornerRadius="10"
                   HasShadow="True"
                   BackgroundColor="Transparent">
                 <RelativeLayout>
        <Image
            x:Name="ImageDescriptionForecast1"
            Aspect="AspectFill"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativetoParent,Property=Height,Factor=1}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativetoParent,Property=Width,Factor=1}"/>
        <StackLayout>
                    <Label x:Name="DateTimeForecast1"
                               Style="{StaticResource labelStyle}"
                               HorizontalTextAlignment="Center"
                               VerticalTextAlignment="Center"
                               VerticalOptions="Center"
                               FontSize="14"/>
                    <Label x:Name="DateTimeForecast2"
                               Style="{StaticResource labelStyle}"
                               HorizontalTextAlignment="Center"
                               FontSize="14"/>
                    <Grid BackgroundColor="Transparent" 
                      Padding="0,0"
                          RowSpacing="0"
                          ColumnSpacing="0">
                        <Grid.RowDeFinitions>
                            <RowDeFinition Height="auto" />
                            <RowDeFinition Height="auto" />
                            <RowDeFinition Height="auto" />
                            <RowDeFinition Height="auto" />
                            <RowDeFinition Height="auto" />
                            <RowDeFinition Height="auto" />
                            <RowDeFinition Height="auto" />
                            <RowDeFinition Height="auto" />
                        </Grid.RowDeFinitions>

                        <Grid.ColumnDeFinitions>
                            <ColumnDeFinition Width="*" />
                            <ColumnDeFinition Width="*" />
                            <ColumnDeFinition Width="*" />
                            <ColumnDeFinition Width="*" />
                            <ColumnDeFinition Width="*" />
                        </Grid.ColumnDeFinitions>
                        ........
                        ........
                        </Grid>
                <StackLayout>
            </RelativeLayout>
         </Frame>

我试图在 ColumnDeFinition Width = "auto" 上设置“auto”，但这对我不起作用。有没有办法让它们适合展示？

解决方法

当我们检查文档Xamarin.Forms Grid时，我们会发现

所以当网格中item的大小足够大时，即使我们将值auto设置为ColumnDefinition ，它也会在空间中占用大量空间。

如果我们希望同一行中的项目占用相同的空间，我们通常将 * 设置为 ColumnDefinition。在这种情况下，如果一行中有很多项，而单个项占用大量空间，则一行中的所有元素将无法完全显示在屏幕上。

在这种情况下，我们需要调整item的HeightRequest和WidthRequest。

例如：

   <Frame Grid.Row="0"  
          HeightRequest="30" WidthRequest="30"
          BackgroundColor="Yellow"
         <Grid.Column="0">
            <Image Source="watermelon.png" HorizontalOptions="FillAndExpand" 
                   VerticalOptions="FillAndExpand" Aspect="AspectFill" />
   </Frame>

对于一些移动桌面应用程序，如果有更多的列，每个项目将被调整为更小的尺寸。同样，如果列数较少，则每个项目的大小都会调整为更大的大小。