Xamarin Forms StackLayout：如何将子项的宽度/高度设置为百分比

Posted 2023-02-19

【中文标题】Xamarin Forms StackLayout：如何将子项的宽度/高度设置为百分比

【英文标题】：Xamarin Forms StackLayout: How to set width / height of children to percentages

【发布时间】：2015-07-26 17:51:54

【问题描述】：

有没有办法创建一个垂直堆栈布局，其中一个按钮占父项的 30%，文本输入占父项的 70%？像这样的：

<StackLayout Orientation="Vertical">
    <Entry Height="70%"></Entry>
    <Button Height="30%">Click me</Button>
</StackLayout>

但这不起作用。到目前为止，唯一的解决方案是创建一个完整的 Grid 项目并使用它。没有其他解决方案吗？

【问题讨论】：

我不认为你可以直接使用高度。有点晚了，但尝试使用 HeightRequest 属性。

【参考方案1】：

StackLayout 在这种情况下不能很好地适应不同的高度。在这一点上，Xamarin Forms 引擎不如 WPF 引擎那么完善。基本上你必须去

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="7*" />
        <RowDefinition Height="3*" />
    </Grid.RowDefinitions>
    <Entry Grid.Row="0" VerticalOptions="Fill"></Entry>
    <Button Grid.Row="1" VerticalOptions="Fill">Click me</Button>
</Grid>

另外附带说明一下，只有 Grid 可以扩展到其父元素的全宽或全高。 StackLayout 的最大尺寸由他们的孩子的总和决定，除非他们在一个 Grid 中并且你把 HorizontalOptions="Fill" 和 VerticalOptions="Fill" 放在。

您可以完成此操作的唯一其他方法是从操作系统获取 DeviceHeight 和 Width 并手动设置元素的高度。一种复杂且通常有缺陷的方法，我不推荐。

【讨论】：

感谢您还提到只有网格能够拉伸父级的完整大小。我不知道这一点，但我认为堆栈布局也可以拉伸，因为它们确实占用了我的应用程序上的所有空间（但我想真正的原因是因为我创建了具有 VerticalOptions=FillAndExpand 等属性的子级）

"只有网格可以扩展到其父元素的全宽或全高"....你确定吗？ VerticalOptions = LayoutOptions.FillAndExpand 呢？我刚刚创建了一个侧边栏，它是一个堆栈布局，它正确地扩展了屏幕的整个高度......我错过了什么？

我写这篇文章时（大约一年前）的布局引擎与当前版本有很大不同，已经进行了很多改进。 2.0 版（我认为）包括大型布局引擎增强功能，我认为他们甚至可能重写了它，但不确定。

【参考方案2】：

虽然您可以使用网格来做到这一点，但还有更合适的布局 绝对布局

您可以通过以下方式设置位置比例： AbsoluteLayout.LayoutBounds=".5,1,.5,.1"