为什么 Xamarin 绝对布局堆叠不尊重儿童顺序答案

【问题标题】：Why does Xamarin Absolute Layout stacking not respect Children order为什么 Xamarin 绝对布局堆叠不尊重儿童顺序
【发布时间】：2019-09-12 12:59:34
【问题描述】：

我正在尝试实现内容在背景上有图像的布局（位于左下角，垂直扩展 100%，水平扩展 60%）

整个内容被包裹在一个 AbsoluteLayout 中，主要内容是这个布局的一个子元素，由 StackLayout（以及里面的一些其他内容）组成。

Visual Studio (Visual Studio Community 2017) 中的预览器正确显示布局 - 图像位于内容下方，内容按预期放置在中间。但是，VS Emulator 和 Genymotion 都在内容上方显示图像。

我将代码修剪为尽可能可读（去掉了样式）

...

        <Frame VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">
            <Image Source="Graphic_Anna.png" />
        </Frame>

        <!-- Start: Actual Page Content -->
        <StackLayout VerticalOptions="Center" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="ApplicationLayoutContentLevel">

            <Label Text="This is some text in main content" />

        </StackLayout>
        <!-- End: Actual Page Content -->

    </AbsoluteLayout>
</ContentPage.Content>

...

预期结果显示在此屏幕截图中（来自预览器）：https://i.imgur.com/C8GBMSi.png

但是，两个模拟器中的结果似乎都是这样的：https://i.imgur.com/NvJFZan.png

很遗憾，我目前无法在实际的 Android 手机上测试该应用

【问题讨论】：

标签： xamarin xamarin.android absolutelayout

【解决方案1】：

你想实现像下面这样的截图吗？我不知道你用的是什么尺寸，所以我从你的截图中截取了图片。

如果是的话，有我的代码。如果要达到覆盖的效果，我用了两个stacklayout，第一个布局会被第二个布局覆盖。注意：如果设置VerticalOptions会影响@ 987654325@

 <ContentPage.Content>
    <AbsoluteLayout>


        <StackLayout VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">

            <Image Source="Graphic_Anna.png" />

        </StackLayout>
        <!-- Start: Actual Page Content -->
        <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.8,0.7,0.5,0.5"  x:Name="ApplicationLayoutContentLevel">
            <Image Source="start.png"  Scale="0.7"/>
            <Label Text="10/10" TextColor="Black" FontSize="50" Margin="20,10,0,0"/>
            <Label Text="Great job! you got everything" TextColor="Black" Margin="0,10,0,0" />
            <Label Text="Back to games" TextColor="red"  Margin="25,20,0,0"  />
        </StackLayout>
    <!-- End: Actual Page Content -->

    </AbsoluteLayout>

</ContentPage.Content>

【讨论】：

这非常有效。最后，我创建了全尺寸嵌套包含背景中的所有图形，它工作得非常好。
好的，编码愉快。