Xamarin.Forms - RelativeLayout 中的约束答案

【问题标题】：Xamarin.Forms - Constraints within RelativeLayoutXamarin.Forms - RelativeLayout 中的约束
【发布时间】：2019-07-08 10:42:41
【问题描述】：

我使用 Visual Studio 中的 Xamarin.Forms 为跨平台应用程序创建了一个包含图像、一些标签和输入的基本页面。问题是，当应用程序在 iOS 和 Android 上加载时，我的约束似乎什么也没做，而且每个元素都不成比例。

代码很简单，但我想进一步说明为什么我的约束不足以控制整个平台上页面上元素的大小/位置。这是预期的结果：

这是实际结果：

这是应该约束这些元素的大小和位置的代码：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage Title="Smartie" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Smartie.Login" BackgroundImage="smartie_bg.png">
<ContentPage.Content>
        <RelativeLayout>
            <Image Source="smartie_logo.png" x:Name="smartieLogo" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4}" Margin="50" />

            <RelativeLayout BackgroundColor="White" Margin="20" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=250}" HeightRequest="300" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}">
                <Label Text="SETUP" FontAttributes="Bold" FontSize="22" Margin="10" HorizontalTextAlignment="Left" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=0}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
                <Label Text="Access Code:" FontSize="20" HorizontalTextAlignment="Center" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=80}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
                <Entry Placeholder="Access Code" TextColor="Black" Margin="75" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=50}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
                <Button Text="CONFIRM" HorizontalOptions="Center" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=1,Constant=100}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Factor=0, Property=Y, Constant=200}" />
            </RelativeLayout>
        </RelativeLayout>
</ContentPage.Content>

我还需要什么其他约束？或者也许我没有在这个场合使用正确的布局？也许堆栈布局会更好？

【问题讨论】：

我用的是你的代码，但是我得到的截图不同，所以我猜你的图像有问题，你能在这里分享一个演示，我会用你的图像来测试。
@CherryBu 感谢您的帮助，您所说的在演示中分享是什么意思 - 您是指分享图像文件还是？另外，我通过使用网格布局解决了这个问题。我会分享答案

标签： android ios xamarin.forms cross-platform

【解决方案1】：

我通过使用网格来解决这个问题，并使用行定义高度来限制图像的大小。我知道这有点绕开RelativeLayout 上面引起的问题，但无论如何，网格布局实际上是一个更好的解决方案。有关为什么这更好的更多信息，请参阅精彩的技术讲座和文档here。

至于解决我问题的代码：

<ContentPage.Content>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Frame BackgroundColor="Transparent" Grid.Row="0">
            <Image Source="smartie_logo.png" x:Name="smartieLogo"/>
        </Frame>

        <Frame Grid.Row="1" Margin="20">
            <StackLayout Padding="10,10,10,10" Spacing="25" BackgroundColor="White" Grid.Row="1">
                <Label Text="SETUP" FontAttributes="Bold" FontSize="22" HorizontalTextAlignment="Left"/>
                <Label Text="Access Code:" FontSize="20" HorizontalTextAlignment="Center" x:Name="AccessCodeLabel"/>
                <Entry Placeholder="Access Code" TextColor="Black" VerticalOptions="Center" WidthRequest="200" HorizontalOptions="Center"/>
                <Button Text="CONFIRM" HorizontalOptions="Center" x:Name="confirmButton" Clicked="AccessCodeConfirmed" />
            </StackLayout>
        </Frame>
    </Grid>
</ContentPage.Content>

【讨论】：