我遇到了不同尺寸手机上登录布局的一致性问题。有一个三星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>
我希望所有手机的最终结果都是相同的,但是很明显,代码中有些错误。
谢谢!
答案 0 :(得分:0)
从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">
答案 1 :(得分:0)
请检查以下代码,这可能会解决您的问题并查看屏幕截图。
<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>