Xamarin.Forms 用户界面——控件——布局——LayoutOptions

LayoutOptions

PDF用于离线使用

• 下载PDF

示例代码：

• LayoutOptions

相关API：

• LayoutOptions

让我们知道你对此的感受

最后更新：6个月前

每个Xamarin.Forms视图都具有LayoutOptions类型的Horizo​​ntalOptions和VerticalOptions属性。本文介绍了每个LayoutOptions值对视图的对齐和展开的影响。

概观

该LayoutOptions结构封装了两种布局首选项：

• 对齐 - 视图的首选对齐方式，它决定了其父布局中的位置和大小。
• 扩展 - 仅使用a StackLayout，并指示视图是否应该使用额外的空间（如果可用）。

这些布局首选项可以通过将结构中的一个公共字段View设置为HorizontalOptions或VerticalOptions属性来应用于相对于其父对象的属性。公共领域如下：ViewLayoutOptions

• Start
• Center
• End
• Fill
• StartAndExpand
• CenterAndExpand
• EndAndExpand
• FillAndExpand

的Start，Center，End，和Fill字段用于定义视图的父布局内对准：

• 对于水平对齐，Start位置在View父布局的左侧，并且对于垂直对齐，它将位于View父布局的顶部。
• 对于水平和垂直对齐，Center水平或垂直居中View。
• 对于水平对齐，End定位在View父布局的右侧，并且对于垂直对齐，它将位于View父布局的底部。
• 对于水平对齐，Fill确保View填充父布局的宽度，并且为了垂直对齐，它可以确保View填充父布局的高度。

的StartAndExpand，CenterAndExpand，EndAndExpand，和FillAndExpand值被用于定义对准偏好和视图是否会如果父内可用的占用更多的空间StackLayout。

视图HorizontalOptions和VerticalOptions属性的默认值为LayoutOptions.Fill。

对准

当父布局包含未使用的空间（即，父布局大于其所有子项的组合大小）时，对齐方式控制视图在其父布局中的位置。

一个StackLayout只有尊重了Start，Center，End，和Fill LayoutOptions对在相反的方向对孩子的看法场StackLayout方向。因此，儿童中的垂直方向的意见StackLayout可以设置其HorizontalOptions属性的之一Start，Center，End，或Fill领域。同样地，子内的水平方向的意见StackLayout可以设置其VerticalOptions属性的之一Start，Center，End，或Fill领域。

一个StackLayout不尊重Start，Center，End，和Fill LayoutOptions对在同一个方向作为孩子的意见领域StackLayout的取向。因此，垂直取向的StackLayout忽略Start，Center，End，或者Fill如果他们在设定领域VerticalOptions的子视图属性。同样，水平方向的StackLayout忽略Start，Center，End，或者Fill如果他们在设定领域HorizontalOptions的子视图属性。

LayoutOptions.Fill通常覆盖使用HeightRequest和WidthRequest属性指定的大小请求 。

以下XAML代码示例演示了一个垂直方向StackLayout，其中每个子项Label将其HorizontalOptions属性设置为来自LayoutOptions结构的四个对齐字段之一：

<StackLayout Margin="0,20,0,0">  ...  <Label Text="Start" BackgroundColor="Gray" HorizontalOptions="Start" />  <Label Text="Center" BackgroundColor="Gray" HorizontalOptions="Center" />  <Label Text="End" BackgroundColor="Gray" HorizontalOptions="End" />  <Label Text="Fill" BackgroundColor="Gray" HorizontalOptions="Fill" /></StackLayout>

等效的C＃代码如下所示：

Content = new StackLayout{  Margin = new Thickness(0, 20, 0, 0),  Children = {    ...    new Label { Text = "Start", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Start },    new Label { Text = "Center", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Center },    new Label { Text = "End", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.End },    new Label { Text = "Fill", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Fill }  }};

代码生成以下屏幕截图中显示的布局：

扩张

扩展控制视图是否占用更多空间（如果可用）StackLayout。如果StackLayout包含未用的空间（即，StackLayout大于它的所有子的组合尺寸更大），未使用的空间被均等地共享由所有子可以通过设置意见认为请求膨胀HorizontalOptions或VerticalOptions属性，以一个LayoutOptions使用该字段AndExpand后缀。请注意，当使用所有空格时StackLayout，扩展选项都不起作用。

A StackLayout只能朝向朝向的方向展开子视图。因此，垂直取向的StackLayout可展开设定其子视图VerticalOptions属性的之一StartAndExpand，CenterAndExpand，EndAndExpand，或FillAndExpand字段，如果StackLayout包含未使用的空间。同样，水平方向StackLayout可展开设定其子视图HorizontalOptions属性的之一StartAndExpand，CenterAndExpand，EndAndExpand，或FillAndExpand字段，如果StackLayout包含未使用的空间。

A StackLayout不能以与其方向相反的方向展开子视图。因此，在垂直方向上StackLayout，将HorizontalOptions子视图上的属性设置为StartAndExpand具有与设置属性相同的效果Start。

请注意，启用扩展不会更改视图的大小，除非它使用LayoutOptions.FillAndExpand。

以下XAML代码示例演示了一个垂直方向StackLayout，其中每个子项Label将其VerticalOptions属性设置为LayoutOptions结构中的四个扩展字段之一：

<StackLayout Margin="0,20,0,0">  ...  <BoxView BackgroundColor="Red" HeightRequest="1" />  <Label Text="Start" BackgroundColor="Gray" VerticalOptions="StartAndExpand" />  <BoxView BackgroundColor="Red" HeightRequest="1" />  <Label Text="Center" BackgroundColor="Gray" VerticalOptions="CenterAndExpand" />  <BoxView BackgroundColor="Red" HeightRequest="1" />  <Label Text="End" BackgroundColor="Gray" VerticalOptions="EndAndExpand" />  <BoxView BackgroundColor="Red" HeightRequest="1" />  <Label Text="Fill" BackgroundColor="Gray" VerticalOptions="FillAndExpand" />  <BoxView BackgroundColor="Red" HeightRequest="1" /></StackLayout>

等效的C＃代码如下所示：

Content = new StackLayout{  Margin = new Thickness(0, 20, 0, 0),  Children = {    ...    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },    new Label { Text = "StartAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.StartAndExpand },    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },    new Label { Text = "CenterAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.CenterAndExpand },    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },    new Label { Text = "EndAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.EndAndExpand },    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },    new Label { Text = "FillAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.FillAndExpand },    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 }  }};

代码生成以下屏幕截图中显示的布局：

每个Label占用相同的空间量StackLayout。然而，只有最终的Label，它的VerticalOptions属性设置FillAndExpand有不同的大小。另外，每个Label都被一个小的红色分开BoxView，这样可以Label容易地看到占据的空间。

概要

本文解释了每个LayoutOptions结构值对视图的对齐和扩展相对于其父对象的影响。在Start，Center，End，和Fill字段用于父布局中定义的视图的对齐，以及StartAndExpand，CenterAndExpand，EndAndExpand，和FillAndExpand字段被用来定义排列的偏好，并确定视图是否会占用更多的空间，如果有的话，内StackLayout。