如何在 XAML AbsoluteLayout (Xamarin.Forms) 中为元素使用不同的对齐方式答案

【问题标题】：How To Use Different Alignments for Elements in XAML AbsoluteLayout (Xamarin.Forms)如何在 XAML AbsoluteLayout (Xamarin.Forms) 中为元素使用不同的对齐方式
【发布时间】：2021-07-11 16:14:28
【问题描述】：

在以下 XAML 中，我有一个 Frame，其中包含一个 AbsoluteLayout，该 AbsoluteLayout 包含一个图像和一个标签。我希望图像左对齐，标签居中（在整个 AbsoluteLayout 对象中）。这是我的 XAML：

<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
    <AbsoluteLayout BackgroundColor="Black">
        <Image Source="{local:ImageResource App.Raindrops.png}" 
               WidthRequest="40" 
               HeightRequest="60" />
        <Label Text="Sprinkle" 
               HorizontalOptions="Center"  
               VerticalOptions="Center" 
               TextColor="White" 
               FontSize="36"/>
    </AbsoluteLayout>
</Frame>

无论我使用什么 HorizontalOptions 和 VerticalOptions，我总是得到以下...

注意标签没有居中。我使用了错误的布局吗？我是否缺少或使用了错误的属性？

我在 Visual Studio 中将应用程序构建为 Xamarin.Forms 应用程序，并且正在对标准 Visual Studio Android 模拟器进行部署。

【问题讨论】：

当您想要精细控制元素的放置位置时，您可以使用 AbsoluteLayout。根据您的描述，使用水平 StackLayout 会更好
StackLayout 不起作用，因为我无法将标签在整个区域居中，即重叠图像而无法完成文本。
你说你想要左边的图片和中间的标签。那不是重叠的。您应该可以使用 StackLayout 轻松做到这一点
是的。我希望标签在整个框架中居中。如果我使用水平方向的 StackLayout，图像首先显示在左侧，然后标签占用剩余空间。然后标签中的文本可以居中，但它不在框架的中心，仅在标签的中心。

标签： xaml xamarin.forms

【解决方案1】：

我找到了一个解决方案here（它也对 XAML 中的覆盖进行了很好的讨论）。修改后的 XAML 为：

<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
    <AbsoluteLayout BackgroundColor="Black">
        <Image 
            Source="{local:ImageResource App.Raindrops.png}" 
            WidthRequest="50" 
            HeightRequest="60"/>
        <Label 
            Text="Sprinkle" 
            TextColor="White" 
            FontSize="36"
            AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1"
            AbsoluteLayout.LayoutFlags="PositionProportional"/>
    </AbsoluteLayout>
</Frame>

...结果是这样的...

...这正是我想要的。

顺便说一句，我在 AbsoluteLayout 的文档页面中看到了这个小花絮：

【讨论】：