为什么RelativeLayout 中的这些约束不适用于Xamarin Forms 项目？

Question

布局如下：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:Test.Views" x:Class="Test.Views.MainPage">
    <StackLayout VerticalOptions="FillAndExpand">
        <BoxView Color="Yellow" HeightRequest="25" VerticalOptions="Start"></BoxView>
        <RelativeLayout x:Name="mainView" BackgroundColor="Red" VerticalOptions="StartAndExpand">
            <BoxView x:Name="boxA" Color="Blue" WidthRequest="50" HeightRequest="50"
                RelativeLayout.XConstraint="{Binding BoxAXConstraint}"
                RelativeLayout.YConstraint="{Binding BoxAYConstraint}">
            </BoxView>
            <BoxView x:Name="boxB" Color="Green" WidthRequest="50" HeightRequest="50"
                RelativeLayout.XConstraint="{Binding BoxBXConstraint}"
                RelativeLayout.YConstraint="{Binding BoxBYConstraint}">
            </BoxView>
        </RelativeLayout>
    </StackLayout>
</ContentPage>

我找不到在 XAML 的相对布局中指定右下角的方法，这就是为什么我将这些约束绑定到代码隐藏中的属性，如下所示：

public partial class MainPage : ContentPage
{
    public Constraint BoxAXConstraint { get; set; }
    public Constraint BoxAYConstraint { get; set; }
    public Constraint BoxBXConstraint { get; set; }
    public Constraint BoxBYConstraint { get; set; }

    public MainPage()
    {
        InitializeComponent();

        BoxAXConstraint = Constraint.RelativeToParent(parent => mainView.Width - boxA.WidthRequest);
        BoxAYConstraint = Constraint.RelativeToParent(parent => 0);
        BoxBXConstraint = Constraint.RelativeToParent(parent => mainView.Width - boxB.WidthRequest);
        BoxBYConstraint = Constraint.RelativeToParent(parent => mainView.Height - boxB.HeightRequest);

        BindingContext = this;
    }
}

这是test project，它在 Android 和 iOS 上都重现了该问题。

Answer 1

RelativeLayout 对 XAML 中可以表达的内容有限制 - 例如，您不能在同一约束中引用两个不同元素的布局属性。你绝对可以用 C# 表达更多。在这种情况下，您应该能够在 XAML 中执行几乎相同的操作：

        <BoxView x:Name="boxB" Color="Green" WidthRequest="50" HeightRequest="50"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
        Property=Width,Factor=1,Constant=-50}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
        Property=Height,Factor=1,Constant=-50}">
        </BoxView>

XAML 方法的缺点是，如果更改 WidthRequest 或 HeightRequest，则还需要更改约束，而在 C# 版本中，由于定义约束的方式，更改会自动考虑在内。

您可以查看AbsoluteLayout，它（与RelativeLayout 不同）试图将元素保留在屏幕上。因此，您可以在 XAML 中相当轻松地将 AbsoluteLayout 的子级定位在右下角：

AbsoluteLayout.LayoutBounds="1,1,-1,-1" AbsoluteLayout.LayoutFlags="PositionProportional"