堆栈布局内的绝对布局

Question

我正在尝试在 StackLayout 内页面的右下角添加一个浮动按钮

<?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:fab="clr-namespace:FAB.Forms;assembly=FAB.Forms"
    x:Class="Hura.Pages.LatestNews"
    Title="Latest news">
    <StackLayout Spacing="10" Padding="5">
        <Label Text="Latest news" FontSize="Medium"/>
        <ListView x:Name="lsvNews"/>

        <Label Text="Latest activities" FontSize="Medium"/>
        <ListView x:Name="lsvActivities"/>

        <Label Text="Good Mording" FontSize="Large" HorizontalOptions="Center"/>
        <AbsoluteLayout x:Name="xyz"
            BackgroundColor="Transparent"
            HorizontalOptions="End"
            VerticalOptions="End">
            <Button Text="gggggg"/>
        </AbsoluteLayout>
    </StackLayout>
</ContentPage>

但按钮出现在标签下方。但我希望它出现在标签上方而不是下方。

如何将按钮定位在标签上方的左下角？

Answer 1

您在这里的问题是，StackLayout它只是按照您添加的顺序放置项目。因此，由于您AbsoluteLayout在添加您的之后添加了Label，因此Button您的Label.

显然，您可以将Label下方移动AbsoluteLayout并获得您所要求的效果，如下所示：

...


<AbsoluteLayout x:Name="xyz"
                BackgroundColor="Transparent"
                HorizontalOptions="End"
                VerticalOptions="End">
  <Button Text="gggggg"/>
</AbsoluteLayout>
<Label Text="Good Mording" FontSize="Large" HorizontalOptions="Center"/>

...

但是浮动按钮的全部意义在于它实际上浮动在其他内容之上。在您展示的示例中，您Button永远不会漂浮在任何东西之上。为了让Button漂浮在其他项目上，您需要将整个添加StackLayout到您的AbsoluteLayout. 像这样的东西（请注意，我还没有测试过这段代码，所以你可能需要稍微尝试一下）：

<AbsoluteLayout VerticalOptions="FillAndExpand"  
                HorizontalOptions="FillAndExpand">
  <StackLayout Spacing="10"
               Padding="5"
               AbsoluteLayout.LayoutFlags="All"  
               AbsoluteLayout.LayoutBounds="0,0,1,1">
      ...
  </StackLayout>

  <Button Text="gggggg"
          AbsoluteLayout.LayoutFlags="PositionProportional"   
          AbsoluteLayout.LayoutBounds="1,1,AutoSize,AutoSize"/>
</AbsoluteLayout>

上面的重要部分是所有内容都在 中AbsoluteLayout，这意味着您可以正确堆叠控件。其他重要的项目是AbsoluteLayout.LayoutFlags和AbsoluteLayout.LayoutBounds。在LayoutFlags与LayoutBounds上StackLayout基本上只是告诉StackLayout它可以占满整个屏幕。在LayoutFlags与LayoutBounds上Button说，Button需求是在右下角，它可以调整大小本身。