StackLayout宽度计算中的RelativeLayout

Question

我有与嵌套在StackLayout RelativeLayouts一个奇怪的问题,看来StackLayout计算其元素的宽度应该使用RelativeLayout的宽度,然后再RelativeLayout的重新计算它之后.这导致子控件是相对宽度的平方,但是以下控件被放置为相对宽度.

这是一个错误还是我做错了什么？

例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MyClass"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             >

  <StackLayout Orientation="Horizontal" BackgroundColor="Blue">
    <RelativeLayout>
      <ContentView BackgroundColor="Red"

          RelativeLayout.XConstraint=
                "{ConstraintExpression Type=RelativeToParent,
                                      Property=Width,
                                      Factor=0}"
          RelativeLayout.WidthConstraint=
                "{ConstraintExpression Type=RelativeToParent,
                                      Property=Width,
                                      Factor=0.707106}"
          RelativeLayout.YConstraint=
                  "{ConstraintExpression Type=RelativeToParent,
                                        Property=Height,
                                        Factor=0}"
          RelativeLayout.HeightConstraint=
                "{ConstraintExpression Type=RelativeToParent,
                                      Property=Height,
                                      Factor=1}">

      </ContentView>

    </RelativeLayout>
    <RelativeLayout>
      <ContentView BackgroundColor="Green"

          RelativeLayout.XConstraint=
                "{ConstraintExpression Type=RelativeToParent,
                                      Property=Width,
                                      Factor=0}"
          RelativeLayout.WidthConstraint=
                "{ConstraintExpression Type=RelativeToParent,
                                      Property=Width,
                                      Factor=0.5}"
          RelativeLayout.YConstraint=
                  "{ConstraintExpression Type=RelativeToParent,
                                        Property=Height,
                                        Factor=0}"
          RelativeLayout.HeightConstraint=
                "{ConstraintExpression Type=RelativeToParent,
                                      Property=Height,
                                      Factor=1}">

      </ContentView>

    </RelativeLayout>

  </StackLayout>
</ContentPage>

Answer 1

这两个RelativeLayout元素可能是一个令人困惑的因素,并且每个元素都被指定为相对于父元素位于X位置0 StackLayout,这看起来像是冲突.

从评论中可以看出,如果RelativeLayout预期每个都是父级宽度的一半StackLayout,则可以通过消除其中一个RelativeLayout元素来简化布局.

然后可以将子条带的指定宽度除以2,使得每个子条带的宽度相对于父对象的预期宽度StackLayout,并且相对于父对象设置的X位置也将它们水平放置.

这是我想出的:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="App1.HomePage"
         xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
>

<StackLayout Orientation="Horizontal" BackgroundColor="Blue">
  <RelativeLayout>
    <ContentView BackgroundColor="Red"
        RelativeLayout.XConstraint=
          "{ConstraintExpression Type=RelativeToParent,
                                 Property=Width,
                                 Factor=0}"
        RelativeLayout.WidthConstraint=
          "{ConstraintExpression Type=RelativeToParent,
                                 Property=Width,
                                 Factor=0.35}"
        RelativeLayout.YConstraint=
          "{ConstraintExpression Type=RelativeToParent,
                                 Property=Height,
                                 Factor=0}"
        RelativeLayout.HeightConstraint=
          "{ConstraintExpression Type=RelativeToParent,
                                 Property=Height,
                                 Factor=1}">
    </ContentView>
<!--
</RelativeLayout>
<RelativeLayout>
-->
    <ContentView BackgroundColor="Green"
        RelativeLayout.XConstraint=
          "{ConstraintExpression Type=RelativeToParent,
                                 Property=Width,
                                 Factor=0.5}"
        RelativeLayout.WidthConstraint=
          "{ConstraintExpression Type=RelativeToParent,
                                 Property=Width,
                                 Factor=0.25}"
        RelativeLayout.YConstraint=
          "{ConstraintExpression Type=RelativeToParent,
                                 Property=Height,
                                 Factor=0}"
        RelativeLayout.HeightConstraint=
          "{ConstraintExpression Type=RelativeToParent,
                                 Property=Height,
                                 Factor=1}">
      </ContentView>
    </RelativeLayout>
  </StackLayout>
</ContentPage>

这会产生更接近预期的东西吗？