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

对于每种布局，您基本上都需要使用以下属性：

HorizontalOptions
VerticalOptions

例如，您的父级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>

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

也不要忘记使用HorizontalTextAlignment实际对齐堆栈布局下的元素，如下所示：

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

如何为不同尺寸的屏幕调整组件（响应式布局）

2 个答案: