Question

我遇到了不同尺寸手机上登录布局的一致性问题。有一个三星S9的屏幕截图，另一个是S10 +的屏幕截图，S9完全可以，但是S10 +并不如您在下面的屏幕截图中看到的那样：

https://gyazo.com/b9d2b599dc1a7ecf0a3c5d0e7a72032c（正确的布局） https://gyazo.com/b16a2504925e59529548ed4ce85d15f7（布局错误）

在不正确的密码中，电子邮件和密码比应有的密码过高，尽管它并没有很大地妨碍徽标。

我已经尝试过在Google上进行研究，但没有发现有关此问题的任何有用信息/

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:Cabiee;assembly=Cabiee"
         BackgroundImage="CabieBackground.jpg"
         x:Class="Cabiee.Login">

<ContentPage.Content>

    <Grid Margin="20,0,20,0">
        <Grid.RowDefinitions>
            <RowDefinition Height = "150"/>
            <RowDefinition Height = "50"/>
            <RowDefinition Height = "50"/>
            <RowDefinition Height = "50"/>
            <RowDefinition Height = "50"/>
            <RowDefinition Height = "50"/>
            <RowDefinition Height = "*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width = "5"/>

        </Grid.ColumnDefinitions>

        <StackLayout  Grid.Row = "2" Grid.Column="1" Orientation = "Horizontal" WidthRequest="300" > 
            <Image 
                Source="baseline_email_black_18"/>
            <Entry 
                x:Name="usernameEntry" 
                Placeholder="Email"
                WidthRequest="300"/>
        </StackLayout>

        <StackLayout  Grid.Row = "3" Grid.Column="1" Orientation = "Horizontal" WidthRequest="300" >
            <Image Source="baseline_https_black_18" />
            <Entry 
                x:Name="passwordEntry"
                IsPassword="true"
                 Placeholder="*********"
                Completed="PasswordEntry_Completed"
                 WidthRequest="300"/>
        </StackLayout>

        <Button  
                x:Name="BtnLogin"
                HeightRequest="50"
                VerticalOptions="Center"
                WidthRequest="300"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                Grid.Row="4"
                Clicked="BtnLogin_Clicked"
                Text="Login"
                TextColor="White"
                FontSize="20"
                CornerRadius="20"
                BackgroundColor="Black"/>

        <Button
            x:Name="ForgotPassword"
            BackgroundColor="Transparent"
            Text="Forgot your Password?" 
            Grid.Column="1" 
            Grid.ColumnSpan="2"
            Grid.Row="5"
            WidthRequest="300"
            HorizontalOptions="CenterAndExpand"/>
        <!--TextColor="Blue" -->

        <Button       
                    x:Name="BtnRegister"
                    BackgroundColor="Transparent"
                    Text="Don't have an Account? Register here"
                    Clicked="BtnRegister_Clicked"
                    Grid.Column="1"
                    Grid.ColumnSpan="2"
                    Grid.Row="6"
                    WidthRequest="300"
                    VerticalOptions="EndAndExpand"
                    HorizontalOptions="CenterAndExpand"

                    FontAttributes="None"
                     />
    </Grid>
</ContentPage.Content>

我希望所有手机的最终结果都是相同的，但是很明显，代码中有些错误。

谢谢！

Answer 1

从ScreenShot图像看，似乎与xaml的代码不对应。

如果在xaml中使用Grid。https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid#placing-views-in-a-grid

请注意，Grid.Row和Grid.Column基于从零开始的行和列列表指定位置。这意味着在4x4网格中，左上方的单元格为（0,0），右下方的单元格为（3,3）。

但是，您的代码是从1到xaml中设置的。

您可以设置RowSpacing来检查是否可以解决此问题。

例如：<Grid x:Name="controlGrid" RowSpacing="1">

Answer 2

请检查以下代码，这可能会解决您的问题并查看屏幕截图。

<Grid Margin="20,0,20,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="150" />
                    <RowDefinition Height="50" />
                    <RowDefinition Height="50" />
                    <RowDefinition Height="50" />
                    <RowDefinition Height="50" />
                    <RowDefinition Height="50" />
                    <RowDefinition Height="*" /> 
                </Grid.RowDefinitions>
                <StackLayout Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal"  HorizontalOptions="Fill" >
                    <Image Source="bsg_icn_title2.jpg" />
                    <Entry x:Name="usernameEntry" Placeholder="Email"  HorizontalOptions="FillAndExpand" />
                </StackLayout>

                <StackLayout Grid.Row="3"  Orientation="Horizontal" Grid.ColumnSpan="2" >
                    <Image Source="bsg_icn_title2.jpg" />
                    <Entry x:Name="passwordEntry" IsPassword="true" Placeholder="*********" Completed="PasswordEntry_Completed" HorizontalOptions="FillAndExpand" />
                </StackLayout>

                <Button x:Name="BtnLogin" HeightRequest="50" VerticalOptions="Center" WidthRequest="300" Grid.ColumnSpan="2" Grid.Row="4" Clicked="BtnLogin_Clicked" Text="Login" TextColor="White"
                    FontSize="20" CornerRadius="20" BackgroundColor="Black" />
                <Button x:Name="ForgotPassword" BackgroundColor="Transparent" Text="Forgot your Password?" Grid.ColumnSpan="2" Grid.Row="5" WidthRequest="300" HorizontalOptions="CenterAndExpand" />

                <!--TextColor="Blue" -->
                <Button x:Name="BtnRegister" BackgroundColor="Transparent" Text="Don't have an Account? Register here" Clicked="BtnRegister_Clicked"  Grid.ColumnSpan="2" Grid.Row="6" WidthRequest="300" VerticalOptions="EndAndExpand" HorizontalOptions="CenterAndExpand"
                    FontAttributes="None" />

            </Grid>

与不同尺寸的手机不一致

2 个答案: