StackLayout 不遵守 Xamarin.Forms 中的 VerticalOptions 属性答案

【问题标题】：StackLayout not obeying VerticalOptions property in Xamarin.FormsStackLayout 不遵守 Xamarin.Forms 中的 VerticalOptions 属性
【发布时间】：2020-06-08 11:11:29
【问题描述】：

我正在尝试创建一个简单的 stacklayout UI。这是 XAML。

    <ContentView>
        <StackLayout
            BackgroundColor="Green"
            HeightRequest="500"
            VerticalOptions="End">
            <StackLayout
                BackgroundColor="LightSkyBlue"
                HeightRequest="100"
                VerticalOptions="End">
                <!--  // ADD CONTROLS HERE[!  -->
            </StackLayout>
        </StackLayout>
    </ContentView>

理想情况下，“蓝色”堆栈布局应该在绿色堆栈的底部对齐，但它只是不会移动并停留在顶部。

我做错了什么？请指出正确的方向

附上图片以获得更好的清晰度。

【问题讨论】：

黄色是页面背景色吗？
您能否详细说明您想要实现的目标，也许是一个示例 UI？ StackLayout 中的 StackLayout 可能会导致问题。可能有更好的方法来构建与 Forms 配合得很好的 UI。
@Adam- 只是试图在绿色底部对齐蓝色堆栈视图。
是的，我认为你的问题已经很清楚了。我只是认为根据您最终想要实现的目标，可能会有更好的方法。例如，如果您想要一张底部有标题的图像，您可以使用网格 (github.com/kphillpotts/XamarinFormsLayoutChallenges/blob/master/…)。也许不是。
有什么问题吗？为什么堆栈视图不对齐？还是这是 xamarin 错误？

标签： visual-studio xaml xamarin xamarin.forms stacklayout

【解决方案1】：

你只需要用下面的代码替换你的代码：

<StackLayout
        BackgroundColor="Green"
        HeightRequest="500"
        VerticalOptions="End">
        <StackLayout
            BackgroundColor="LightSkyBlue"
            HeightRequest="100"
            VerticalOptions="EndAndExpand">
            <!--  // ADD CONTROLS HERE[!  -->
        </StackLayout>
    </StackLayout>

希望对你有帮助

谢谢

【讨论】：

【解决方案2】：

根据我的经验，StackLayout 永远不会服从垂直或水平选项。它只会使用所需的空间。您可以在StackLayout 中放置一个透明的BoxView，并将其VerticalOptions 设置为FillAndExpand。这将强制StackLayout 使用所有空间。

我通常使用Grid 代替并使用<RowDefinition Height="*"/> 来强制它使用所有空间。

【讨论】：

但我不想使用整个空间，我只是想将蓝色堆栈视图对齐在绿色的末尾。
框视图逻辑究竟是如何工作的？你能帮忙拿个样品吗？
抱歉，措辞不佳。我应该说“使用所有可用空间”。意思是，它将使用外包装StackLayout（绿色区域）内的所有空间。
BoxView hack 只是强制 StackLayout 填充尽可能多的可用空间。
能否请您提供一些框视图逻辑示例？

【解决方案3】：

您需要将蓝色 Stack Layout 的 Vertical Option 设置为 EndAndExpand。因为堆栈布局子级不会自动填充。如果你愿意，你需要强迫它。详细解释可以看这个答案here。

【讨论】：