如何使用 Xamarin.Forms 覆盖元素答案

【问题标题】：How to overlay elements with Xamarin.Forms如何使用 Xamarin.Forms 覆盖元素
【发布时间】：2021-10-05 21:42:48
【问题描述】：

我只想在顶部创建一个自动完成元素，其中建议列表不会在我的布局中向下移动其余元素。

我可以尝试将Entry 和ListView 包装在AbsoluteLayout 容器中，但对我来说这听起来不是一个干净的解决方案。有没有其他方法可以实现这一目标？

【问题讨论】：

【解决方案1】：

一直在使用 Grid，直到它开始因复杂的布局而随机崩溃。

无论如何，解决方案是使用 AbsoluteLayout。 https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolutelayout

2 个居中重叠项目的示例：

    <AbsoluteLayout 
                 VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        
     <BoxView
                       AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" 
                AbsoluteLayout.LayoutFlags="PositionProportional"          
              BackgroundColor="Red"
              HeightRequest="100"
              WidthRequest="100"/>
    
     <ActivityIndicator
                       AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" 
                AbsoluteLayout.LayoutFlags="PositionProportional"          
              IsRunning="True"
              VerticalOptions="CenterAndExpand"
              HorizontalOptions="CenterAndExpand"/>
</AbsoluteLayout>

XAML 提示：

填充和扩展 XY：

AbsoluteLayout.LayoutBounds="0, 0, 1, 1" 
AbsoluteLayout.LayoutFlags="All"

中心 XY：

AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1"     
AbsoluteLayout.LayoutFlags="PositionProportional"

垂直居中，水平填充：

AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, -1" 
AbsoluteLayout.LayoutFlags="PositionProportional"

垂直末端，水平中心

AbsoluteLayout.LayoutBounds="0.5, 1, -1, -1" 
AbsoluteLayout.LayoutFlags="PositionProportional"

垂直起点，水平居中

AbsoluteLayout.LayoutBounds="0.5, 0, -1, -1" 
AbsoluteLayout.LayoutFlags="PositionProportional"

垂直开始，水平开始

AbsoluteLayout.LayoutBounds="0, 0, -1, -1" 
AbsoluteLayout.LayoutFlags="PositionProportional"

【讨论】：

【解决方案2】：

如果您使用 Grid，您可以覆盖内容并设置是否应该向左、向右、居中等。最后添加的将在顶部，在您的情况下为 Entry。

【讨论】：

【解决方案3】：

为了覆盖元素，您可以使用“绝对”和/或“相对”布局。

有使用“网格”覆盖的解决方法。为此，您需要将元素或“容器”放在同一行/单元格中。

示例如下：

<Grid>
    <Label Grid.Row="0" Text="test" VerticalTextAlignment="Center" />
    <Label Grid.Row="0" Text="overlay" VerticalTextAlignment="Center" />
</Grid>

【讨论】：