如何调整不同尺寸屏幕的组件(响应式布局)

Question

>我有一个登录屏幕，我在不同的设备上进行了测试，发现这些组件不适合任何屏幕。有人可以向我解释如何创建广告屏幕吗

<StackLayout Margin="20" VerticalOptions="Center" HorizontalOptions="Center">
<!--<Image x:Name="PicLogo"  WidthRequest="100" HeightRequest="100" Aspect="AspectFit" VerticalOptions="Center" />-->
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="30">
<StackLayout Orientation="Horizontal">
<Image x:Name="PicUser"   WidthRequest="30" HeightRequest="30" Aspect="AspectFit"  VerticalOptions="Center"  />
<local:RoundedEntry x:Name="txtUsuario" PlaceholderColor="Gray" Placeholder="ID do utilizador..." WidthRequest="220" ></local:RoundedEntry >
</StackLayout>
<StackLayout Orientation="Horizontal" Margin="0,10,0,0">
<Image x:Name="PicPass"  WidthRequest="30" HeightRequest="30" Aspect="AspectFit"  VerticalOptions="Center"/>
<local:RoundedEntry x:Name="txtSenha"  PlaceholderColor="Gray" Placeholder="Palavra Passe..." IsPassword="True" VerticalOptions="FillAndExpand" WidthRequest="220"></local:RoundedEntry>
</StackLayout>
<StackLayout Orientation="Horizontal" Margin="0,0,0,0" HorizontalOptions="Center">
<Label x:Name="LbEsquecer" Text="Esqueceu a palavra-Passe?" TextColor="White" />
</StackLayout>
<StackLayout x:Name="StkBotao" Margin="0,10,0,0">
<Button x:Name="CmdLogin"  Text="Iniciar Sessão" BackgroundColor="#00a1e3" TextColor="White" FontSize="13.8"  HorizontalOptions="EndAndExpand" WidthRequest="200"></Button>
</StackLayout>
<!--<Button x:Name="CmdHelp"  Text="..." BackgroundColor="#00a1e3" HeightRequest="50" TextColor="White" BorderRadius="10" WidthRequest="40" HorizontalOptions="End"></Button>
<StackLayout Orientation="Horizontal">
<Button x:Name="CmdA"  Text="FAQs" BackgroundColor="LightGray"  BorderRadius="8"></Button>
<Button x:Name="CmdB"  Text="Chat" BackgroundColor="LightGray"  BorderRadius="8"></Button>
<Button x:Name="CmdC"  Text="Ajuda" BackgroundColor="Yellow"  BorderRadius="8"></Button>
</StackLayout>-->
</StackLayout>
</StackLayout>
</ContentPage>

Answer 1

基本上需要为每个布局使用以下属性：

• 水平选项
• 垂直选项

例如，父 StackLayout 应将此属性设置为FillAndExpand，以便在高度和宽度上覆盖整个屏幕。直接子项应垂直居中，并水平填充。这样：

<!-- Parent stacklayout starts -->
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<!-- Immediately child stacklayout starts -->
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand">
<!-- Your login markup starts -->
<!-- Your login markup ends -->
</StackLayout>
<!-- Immediately child stacklayout ends -->
</StackLayout>

其余的孩子都属于这种基本布局。请记住，您是在堆栈布局上，其中元素以堆栈方式放置。

另外，不要忘记使用水平文本对齐来实际对齐堆栈布局下的元素，如下所示：

<!-- Parent stacklayout starts -->
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<!-- Immediately child stacklayout starts -->
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand">
<!-- Your login markup starts -->
<Label Text="Hi there!" HorizontalTextAlignment="Center" />
<Label Text="Here you have some tips" HorizontalTextAlignment="Center" />
<!-- Your login markup ends -->
</StackLayout>
<!-- Immediately child stacklayout ends -->
</StackLayout>

Answer 2

示例添加视图模板。

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
x:Class="MyAp.Views.MyNewView"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:MyApp.Views">

<ContentView.Content>
<OnIdiom x:TypeArguments="View">
<OnIdiom.Desktop>
<views:NewView_Desktop />
</OnIdiom.Desktop>
<OnIdiom.Tablet>
<views:NewView_Tablet />
</OnIdiom.Tablet>
<OnIdiom.Phone>
<views:NewView_Phone />
</OnIdiom.Phone>
</OnIdiom>
</ContentView.Content>

参考视图，这将是独立的。

xmlns:views="clr-namespace:MyApp.Views
<views:MyFirstView />
<views:MySecondView />