既然RelativeLayeout不推荐在.Net Maui中使用，那么什么技术可以替代它呢？

Question

我在 Xamarin.Forms 中经常使用 RelativeLayout 的 Factor，这样我的应用程序 UI 就可以在任何设备上正确缩放。不再建议使用RelativeLayout，并且不提供替代品，所以我想知道什么技术可以表明例如我希望xaml元素占据其父元素（容器）的80％？我应该根据设备分辨率在运行时计算容器的实际宽度/高度吗？或者有更好的解决方案？我在 .Net Maui 中找不到任何与relativelayout+factor允许我在Xamarin.Forms中做的事情相近的东西。

Answer 1

我担心现在除了创建自己的相对布局派生之外没有其他办法。我在将 Xamarin 应用程序转换为 MAUI 时遇到了同样的问题。在那里，我们确实使用了相对布局来在建筑物内各自的位置显示各种机器。

我在这里找到了一些有关如何创建自定义布局的示例。

我不建议使用兼容性命名空间。对我来说，它会产生问题，激活它后，我的一些页面内容不再显示。

希望这至少有一点帮助。

Answer 2

AbsoluteLayout 和relativeLayout 现在仅存在于兼容性命名空间中，您可以通过添加新命名空间并为 XAML 引用添加前缀来更新代码以使用它们：

<ContentPage
    xmlns:cmp="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
    ...
    >
    <cmp:AbsoluteLayout>
        <BoxView 
            Color="Red"
            cmp:RelativeLayout.XConstraint="{cmp:ConstraintExpression Type=Constant, Constant=0}"
            cmp:RelativeLayout.YConstraint="{cmp:ConstraintExpression Type=Constant, Constant=0}" />
    </cmp:AbsoluteLayout>
</ContentPage>

Answer 3

一种选择是使用带有

ColumnDefinitions="*,8*,*"

的网格布局。

将内容放入第 1 列。

Answer 4

只是想添加我的解决方案： 我试图创建一个图像，在图像的右上角有一个小切换按钮。就像下图一样。不再有相对布局！

这是我在 XAML (.NET MAUI) 中的做法

<HorizontalStackLayout HorizontalOptions="Start">
            <Grid HorizontalOptions="Start"
                  Padding="20">

            <BoxView x:Name="grayBox1"
                     BackgroundColor="LightGray"
                     HeightRequest="100"
                     WidthRequest="100"
                     HorizontalOptions="Center"
                     VerticalOptions="Center" />

            <BoxView x:Name="redBox1"
                     BackgroundColor="Red"
                     HeightRequest="20"
                     WidthRequest="20"
                     HorizontalOptions="End"
                     VerticalOptions="Start"
                     Margin="0,5,5,0" />

        </Grid>
        <Grid HorizontalOptions="Center"
              Padding="20">

            <BoxView x:Name="grayBox2"
                     BackgroundColor="LightGray"
                     HeightRequest="100"
                     WidthRequest="100"
                     HorizontalOptions="Center"
                     VerticalOptions="Center" />

            <BoxView x:Name="redBox2"
                     BackgroundColor="Red"
                     HeightRequest="20"
                     WidthRequest="20"
                     HorizontalOptions="End"
                     VerticalOptions="Start"
                     Margin="0,5,5,0" />

        </Grid>
        <Grid HorizontalOptions="End"
              Padding="20">

            <BoxView x:Name="grayBox3"
                     BackgroundColor="LightGray"
                     HeightRequest="100"
                     WidthRequest="100"
                     HorizontalOptions="Center"
                     VerticalOptions="Center" />

            <BoxView x:Name="redBox3"
                     BackgroundColor="Red"
                     HeightRequest="20"
                     WidthRequest="20"
                     HorizontalOptions="End"
                     VerticalOptions="Start"
                     Margin="0,5,5,0" />

        </Grid>
        </HorizontalStackLayout>