在RelativeLayout中无法查看StackLayout

Question

我正在尝试向我的页面添加一个浮动操作按钮，为此我用相对布局包装了我的堆栈布局，并在相对布局中添加了FAB。

  <ContentPage.Content>
    <RelativeLayout BackgroundColor="Transparent">
      <fab:FloatingActionButton
              x:Name="fabBtn"
              Source="plus.png"
              Size="Normal"
              Clicked="Handle_FabClicked"
              NormalColor="Green"
        RippleColor="Blue"
              RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-75}"
              RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-75}" />
      <StackLayout
        Spacing="10"
        Padding="5"
        VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
              RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
        <Label Text="Latest news/activities" FontSize="Medium" VerticalOptions="Start"/>
        <ScrollView VerticalOptions="CenterAndExpand">
          <ListView
            x:Name="lsvActivities"
            HasUnevenRows="True">
            <ListView.ItemTemplate>
              <DataTemplate>
                <ViewCell>
                  <StackLayout Orientation="Horizontal" Padding="3">
                    <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                      <Label Text="{Binding title}" VerticalOptions="StartAndExpand"/>
                      <Label Text="{Binding date}" VerticalOptions="End"/>
                    </StackLayout>
                    <StackLayout HorizontalOptions="End" WidthRequest="100" HeightRequest="100" BackgroundColor="Blue">
                      <Label Text="image here"/>
                    </StackLayout>
                  </StackLayout>
                </ViewCell>
              </DataTemplate>
            </ListView.ItemTemplate>
          </ListView>
        </ScrollView>
        <Label Text="Good Mording" FontSize="Large" VerticalOptions="End" HorizontalOptions="Center"/>
      </StackLayout>
    </RelativeLayout>
  </ContentPage.Content>

但它像StackLayout一样锁定在布局的边界之外。

有什么问题？以及如何显示FAB和StackLayout，其中浮动操作按钮应始终位于StackLayout元素之上

Answer 1

您是否尝试让StackLayout占据整个屏幕（按钮位于顶部）？如果是这样，这部分不会那样做：

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

这就是将StackLayout的左上角放在屏幕的右下角。

根据Xamarin docs：

  

与AbsoluteLayout不同，RelativeLayout没有这个概念   移动锚，没有定位元素的设施   相对于布局的底部或右边缘。

换句话说，如果你在右下角放置一些东西，AbsoluteLayout会尝试为你调整。 RelativeLayout不会。

您可能希望StackLayout上面提到的约束为WidthConstraint和HeightConstraint，并将XConstraint和YConstraint设置为0.

正如Sven-Michael所说，放弃ScrollView。

修改

XAML应如下所示：

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