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

Question

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

我的代码：

<Frame
                   BorderColor="White"
                   Margin="10,0,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,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”，但这对我不起作用。 有没有办法把它们放在显示器上？

Answer 1

当我们检查文档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>

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