Несоответствие с телефонами разных размеров

Question

Я столкнулся с проблемой согласованности структуры моего логина на телефонах разных размеров. Есть один снимок экрана с Samsung 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

Проверьте с помощью приведенного ниже кода, это может решить вашу проблему и увидеть прикрепленный скриншот.

<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>

Answer 2

Из изображения ScreenShot, похоже, не соответствует коду xaml.

При использовании Grid в xaml. 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">