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

StackLayout

使用StackLayout来显示一个维度的视图集合。

PDF用于离线使用

• 下载PDF

示例代码：

• 布局
• BusinessTumble示例

相关文章：

• LayoutOptions

让我们知道你对此的感受

最后更新：2015年11月

StackLayout以一维线（“栈”）的方式组织水平或垂直的视图。视图中的视图StackLayout可以基于使用布局选项的布局中的空间进行调整。定位由订单视图添加到视图的布局和布局选项确定。

目的

StackLayout不如其他观点那么复杂。只需将视图添加到StackLayout通过嵌套创建的更复杂的界面即可创建简单的线性界面。

使用与行为

间距

默认情况下，StackLayout将在视图之间添加6px边距。这可以通过设置SpacingStackLayout上的属性来控制或设置为没有余量。以下演示如何设置间距和不同间距选项的效果：

在XAML中：

<?xml version="1.0" encoding="UTF-8"?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="LayoutSamples.StackLayoutDemo"Title="StackLayout Demo">  <ContentPage.Content>    <StackLayout Spacing="10" x:Name="layout">      <Button Text="StackLayout" VerticalOptions="Start"        HorizontalOptions="FillAndExpand" />      <BoxView Color="Yellow" VerticalOptions="FillAndExpand"        HorizontalOptions="FillAndExpand" />            <BoxView Color="Green" VerticalOptions="FillAndExpand"        HorizontalOptions="FillAndExpand" />            <BoxView HeightRequest="75" Color="Blue" VerticalOptions="End"        HorizontalOptions="FillAndExpand" />    </StackLayout>    </ContentPage.Content></ContentPage>

在C＃中：

public class StackLayoutCode : ContentPage{  public StackLayoutCode ()  {    var layout = new StackLayout ();    var button = new Button { Text = "StackLayout", VerticalOptions = LayoutOptions.Start,     HorizontalOptions = LayoutOptions.FillAndExpand };    var yellowBox = new BoxView { Color = Color.Yellow, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand };    var greenBox = new BoxView { Color = Color.Green, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand };    var blueBox = new BoxView { Color = Color.Blue, VerticalOptions = LayoutOptions.FillAndExpand,      HorizontalOptions = LayoutOptions.FillAndExpand, HeightRequest = 75 };    layout.Children.Add(button);    layout.Children.Add(yellowBox);    layout.Children.Add(greenBox);    layout.Children.Add(blueBox);    layout.Spacing = 10;    Content = layout;  }}

间距= 0：

十分之一：

浆纱

StackLayout中的视图大小取决于高度和宽度请求和布局选项。StackLayout将执行填充。以下LayoutOptions将导致视图占用与布局相同的空间：

• CenterAndExpand - 将视图集中在布局中，并扩展以占用与布局相同的空间。
• EndAndExpand - 将视图放置在布局（底部或最右边界）的末尾，并扩展为占用与布局一样多的空间。
• FillAndExpand - 放置视图，使其没有填充，并占用与布局一样多的空间。
• StartAndExpand - 将视图放在布局开始处，并占用与父级提供的空间相同的空间。

有关更多信息，请参阅扩展。

定位

StackLayout中的视图可以使用定位和大小LayoutOptions。可以给出每个视图，VerticalOptions并HorizontalOptions定义视图如何相对于布局来定位自己。以下预定义LayoutOptions可用：

• 中心 - 将视图集中在布局中。
• 结束 - 将视图放置在布局（底部或最右边界）的末尾。
• 填充 - 放置视图，使其没有填充。
• 开始 - 将视图放在布局开始处。

以下代码演示了设置布局选项：

在XAML中：

<?xml version="1.0" encoding="UTF-8"?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="LayoutSamples.StackLayoutDemo"Title="StackLayout Demo">  <ContentPage.Content>    <StackLayout x:Name="layout">      <Button VerticalOptions="Start"        HorizontalOptions="FillAndExpand" />      <BoxView VerticalOptions="FillAndExpand"        HorizontalOptions="FillAndExpand" />            <BoxView VerticalOptions="FillAndExpand"        HorizontalOptions="FillAndExpand" />            <BoxView HeightRequest="75" VerticalOptions="End"        HorizontalOptions="FillAndExpand" />    </StackLayout>    </ContentPage.Content></ContentPage>

在C＃中：

public class StackLayoutCode : ContentPage{  public StackLayoutCode ()  {    var layout = new StackLayout ();    var button = new Button { VerticalOptions = LayoutOptions.Start,     HorizontalOptions = LayoutOptions.FillAndExpand };    var oneBox = new BoxView { VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand };    var twoBox = new BoxView {  VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand };    var threeBox = new BoxView {  VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand };    layout.Children.Add(button);    layout.Children.Add(oneBox);    layout.Children.Add(twoBox);    layout.Children.Add(threeBox);    Content = layout;  }}

有关更多信息，请参阅对齐。

探索复杂的布局

每个布局都具有创建特定布局的优缺点。在这一系列布局文章中，已经创建了一个示例应用程序，并使用三种不同的布局实现了相同的页面布局。

考虑以下XAML：

<?xml version="1.0" encoding="UTF-8"?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="TheBusinessTumble.StackLayoutPage"BackgroundColor="Maroon"Title="StackLayouts">    <ContentPage.Content>    <ScrollView>      <StackLayout Spacing="0" Padding="0" BackgroundColor="Maroon">        <BoxView HorizontalOptions="FillAndExpand" HeightRequest="100"          VerticalOptions="Start" Color="Gray" />        <Button BorderRadius="30" HeightRequest="60" WidthRequest="60"          BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" />        <StackLayout HeightRequest="100" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Spacing="20" BackgroundColor="Maroon">          <Label Text="User Name" FontSize="28" HorizontalOptions="Center"            VerticalOptions="Center" FontAttributes="Bold" />          <Entry Text="Bio + Hashtags" TextColor="White"            BackgroundColor="Maroon" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />        </StackLayout>        <StackLayout Orientation="Horizontal" HeightRequest="50" BackgroundColor="White" Padding="5">          <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="Start">            <BoxView BackgroundColor="Black" WidthRequest="40" HeightRequest="40"  HorizontalOptions="StartAndExpand" VerticalOptions="Center" />            <Label FontSize="14" TextColor="Black" Text="Accent Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />          </StackLayout>          <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="EndAndExpand">            <BoxView BackgroundColor="Maroon" WidthRequest="40" HeightRequest="40" HorizontalOptions="Start" VerticalOptions="Center" />            <Label FontSize="14" TextColor="Black" Text="Primary Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />          </StackLayout>        </StackLayout>        <StackLayout Orientation="Horizontal">          <Label FontSize="14" Text="Age:" TextColor="White" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" />          <Entry HorizontalOptions="FillAndExpand" Text="35" TextColor="White" BackgroundColor="Maroon" />        </StackLayout>        <StackLayout Orientation="Horizontal">          <Label FontSize="14" Text="Interests:" TextColor="White"          HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" />          <Entry HorizontalOptions="FillAndExpand" Text="Xamarin.Forms" TextColor="White" BackgroundColor="Maroon" />        </StackLayout>        <StackLayout Orientation="Horizontal">          <Label FontSize="14" Text="Ask me about:" TextColor="White"          HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100"/>          <Entry HorizontalOptions="FillAndExpand" Text="Xamarin, C#, .NET, Mono..." TextColor="White" BackgroundColor="Maroon" />        </StackLayout>      </StackLayout>    </ScrollView>    </ContentPage.Content></ContentPage>

上述代码产生以下布局：

请注意，由于Windows Phone的按钮呈现不同，某些圈子已被Windows Phone屏幕截图中的框图替换。

注意，StackLayoutss是嵌套的，因为在某些情况下，嵌套布局可以比在同一布局中显示所有元素更容易。另请注意，因为StackLayout不支持重叠的项目，所以该页面没有其他布局的页面中找到一些布局细节。