在Xamarin.Forms中设置布局背景图片

Question

我需要一个高度固定（例如 200）且带有背景图片的块，该块应以AspectFill方式填充，并且在该块底部具有高度未知的StackLayout。

我尝试使用RelativeLayout并将Image和StackLayout放入其中。 图像位置完美，但是我不知道如何将StackLayout放在底部。

此布局包含两个Labels，因此我不能将其HeightConstrait和YConstrait硬编码为常量，因为文本在不同平台和屏幕尺寸上可能具有不同的高度（或者，也许这是错误的？）

我该怎么做？

- Alexey Markov

---

可能是Xamarin forms相对布局将StackLayout定位在底部的重复问题。 - Tim Klingeleers

Answer 1

我使用的相对布局方法的替代方案：

这基本上是使用一张图片和一个堆叠布局，它们彼此重叠并填充可用空间。然后内部堆叠布局能够从末端扩展。如果您想创建一个“最大”向上扩展的数量（例如最多50%的图像），可以更改外部布局为“layoutBounds 1,1,1,.5”。

下面的代码使用背景颜色，因此如果复制，你可以轻松地看到它。有许多修改选项，例如使用背景图像和除了stacklayout之外的其他项，例如frame。

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <Image BackgroundColor="Red" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" Aspect="AspectFill"></Image>
    <StackLayout AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="Transparent">
        <StackLayout BackgroundColor="Blue" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" Orientation="Vertical">
            <Label Text="Label 1"></Label>
            <Label Text="Label 2"></Label>
        </StackLayout>
    </StackLayout>
</AbsoluteLayout>

- App Pack

Answer 2

一种替代方法是使用网格布局。

<Grid>
    <Image Source="..." />
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="1">    
        </StackLayout>
    </Grid>
</Grid>

虽然你可以选择AbsoluteLayout或Grid，但我建议避免使用RelativeLayout。它是比较低效的布局之一。

- Adam