Xamarin.Forms：如何使用ResponsiveLayout和Grid设计响应式布局？

Question

我试图了解Xamarin.Forms中Grid布局结构的逻辑。

我用Grid标签创建了一些行和列，并用背景色为其着色，以便能够检查其宽度和高度。

检查结果时，会看到很多不同的输出，具体取决于设备的尺寸。

请检查仿真器的输出：

我的应用程序将只是一个移动应用程序，不会在任何其他平台上显示。我认为这些差异对于移动应用程序来说太大了。是否可以使用Xamarin设计自适应UI，还是必须为所有不同维度编写单独的代码？

在我的xaml文件中是否存在任何逻辑错误？

<ContentView.Content>
    <RelativeLayout Padding="0">
        <!-- Background -->
        <Image Aspect="AspectFill" 
               Source="bg.png" 
               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" 
               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="0.1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1.2*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <StackLayout Grid.Column="0" Grid.Row="0" 
                         BackgroundColor="Fuchsia" />
            <StackLayout Grid.Column="1" Grid.Row="0" 
                         BackgroundColor="Blue" />
            <!--Title Starts-->
            <StackLayout Grid.Column="1" Grid.Row="1" 
                         BackgroundColor="Blue" 
                         Padding="0, 2, 0, 0">
                <Label Text="TITLE" 
                       HorizontalOptions="Center" 
                       TextColor="#28ddff" 
                       FontSize="32" 
                       BackgroundColor="Black" 
                       Opacity="0.7">
                    <Label.FontSize>
                        <OnPlatform x:TypeArguments="x:Double" 
                                    iOS="30" 
                                    Android="25" />
                    </Label.FontSize>
                </Label>
                <!--Title Ends-->
                <!--SubTitle Starts-->
                <Label Text="SUBTITLE" 
                       HorizontalOptions="Center" 
                       TextColor="#ffffff" 
                       FontSize="32" 
                       BackgroundColor="Black" 
                       Opacity="0.7">
                    <Label.FontSize>
                        <OnPlatform x:TypeArguments="x:Double" 
                                    iOS="32" 
                                    Android="27" />
                    </Label.FontSize>
                </Label>
            </StackLayout>
            <!--SubTitle Ends-->
            <!--Description Starts-->
            <StackLayout Grid.Column="1" Grid.Row="2" 
                         BackgroundColor="Blue">
                <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco." 
                       BackgroundColor="Transparent" 
                       TextColor="White" 
                       FontAttributes="Bold">
                    <Label.FontSize>
                        <OnPlatform x:TypeArguments="x:Double" 
                                    iOS="15" 
                                    Android="13" />
                    </Label.FontSize>
                </Label>
            </StackLayout>
            <!--Description Ends-->
            <StackLayout Grid.Column="1" Grid.Row="3">
                <Button Text="LOGIN" 
                        TextColor="#009de0" 
                        BackgroundColor="White" 
                        WidthRequest="120" 
                        HorizontalOptions="Center" 
                        Clicked="Handle_Clicked" />
            </StackLayout>
        </Grid>
    </RelativeLayout>
</ContentView.Content>

我必须为应用设置背景图像，因此，我从<RelativeLayout>标签开始。因此，我认为还是<RelativeLayout>或<AbsoluteLayout>标签弄乱了网格的结构？