在Xamarin.Forms中,每个View
都有两个属性HorizontalOptions
和VerticalOptions
。这两种类型都是LayoutOptions
类型,可以具有下列值之一:
LayoutOptions.Start
LayoutOptions.Center
LayoutOptions.End
LayoutOptions.Fill
LayoutOptions.StartAndExpand
LayoutOptions.CenterAndExpand
LayoutOptions.EndAndExpand
LayoutOptions.FillAndExpand
显然,它控制视图在父视图上的对齐方式。但是,每个选项的行为到底是怎样的呢?Fill
和后缀Expand
有什么区别?
发布于 2014-08-16 16:56:42
简短的回答
Start
、Center
、End
和Fill
在视图的空间中定义视图的对齐方式。
Expand
定义是否占用更多的空间。
理论
structure LayoutOptions
控制两种截然不同的行为:
- `Start`: For vertical alignment the view is moved to the top. For horizontal alignment this is usually the left-hand side. (But note, that on devices with right-to-left language setting this is the other way around, i.e. right aligned.)
- `Center`: The view is centered.
- `End`: Usually the view is bottom or right aligned. (On right-to-left languages, of course, left aligned.)
- `Fill`: This alignment is slightly different. The view will stretch across the full size of the parent view.
但是,如果父对象不比其子对象大,您将不会注意到这些对齐之间的任何差异。对齐只适用于具有额外可用空间的父视图。
如果元素可用,
- Suffix `Expand`: If the parent view is larger than the combined size of all its children, i.e. additional space is available, then the space is proportioned amongst child views with that suffix. Those children will "occupy" their space, but do not necessarily "fill" it. We'll have a look on this behavior in the example below.
- No suffix: The children without `Expand` suffix won't get additional space, even if more space is available.
同样,如果父视图不大于其子视图,扩展后缀也不会产生任何影响。
示例
让我们看一下下面的例子,看看所有8个布局选项之间的区别。
该应用程序包含一个深灰色的StackLayout
,带有八个嵌套的白色按钮,每个按钮都标有垂直布局选项。当单击其中一个按钮时,它会将其垂直布局选项分配给堆栈布局。通过这种方式,我们可以很容易地测试视图与父级之间的交互,两者使用不同的布局选项。
(最后几行代码添加了额外的黄色方框。我们稍后再来讨论这个问题。)
public static class App
{
static readonly StackLayout stackLayout = new StackLayout {
BackgroundColor = Color.Gray,
VerticalOptions = LayoutOptions.Start,
Spacing = 2,
Padding = 2,
};
public static Page GetMainPage()
{
AddButton("Start", LayoutOptions.Start);
AddButton("Center", LayoutOptions.Center);
AddButton("End", LayoutOptions.End);
AddButton("Fill", LayoutOptions.Fill);
AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
AddButton("FillAndExpand", LayoutOptions.FillAndExpand);
return new NavigationPage(new ContentPage {
Content = stackLayout,
});
}
static void AddButton(string text, LayoutOptions verticalOptions)
{
stackLayout.Children.Add(new Button {
Text = text,
BackgroundColor = Color.White,
VerticalOptions = verticalOptions,
HeightRequest = 20,
Command = new Command(() => {
stackLayout.VerticalOptions = verticalOptions;
(stackLayout.ParentView as Page).Title = "StackLayout: " + text;
}),
});
stackLayout.Children.Add(new BoxView {
HeightRequest = 1,
Color = Color.Yellow,
});
}
}
下面的屏幕截图显示了单击八个按钮中的每一个按钮时的结果。我们做了以下观察:
对齐只要父对齐很紧(不对齐页面),每个
Button
较大(例如通过FillFill
)并且各个按钮具有Expand
后缀的stackLayout
时,垂直布局选项才有意义。为了更清楚地看到这一点,我们在每两个相邻的buttons.VerticalOptions
.
Here you find the corresponding high-resolution screenshots.
发布于 2016-07-09 03:15:36
当前版本的Xamarin.Forms中有一个小bug;也许它已经存在了一段时间了。
CenterAndExpand
通常不会扩展,解决这个问题可能会让人感到困惑。
例如,如果您将StackLayout
设置为CenterAndExpand
,然后在其中放置一个标签,该标签也设置为CenterAndExpand
,则您期望的标签是StackLayout
的全宽。不是的。它不会膨胀。您必须将StackLayout
设置为"FillAndExpand
“,以使嵌套的Label对象扩展到StackLayout
的整个宽度,然后使用HorizontalTextAlignment="Center"
告诉Label居中显示文本,而不是将其本身作为对象。根据我的经验,如果你真的想让父元素和嵌套子元素都扩展到合适的位置,就需要将它们都设置为FillAndExpand
。
<StackLayout HorizontalOptions="FillAndExpand"
Orientation="Vertical"
WidthRequest="300">
<Label BackgroundColor="{StaticResource TileAlerts}"
HorizontalOptions="FillAndExpand"
Style="{StaticResource LabelStyleReversedLrg}"
HorizontalTextAlignment="Center"
Text="Alerts" />
发布于 2020-06-23 08:05:56
Falko给了一个很好的解释,但我想用另一个视觉效果来补充,以及这些标记在xaml中是如何工作的,这是我最喜欢使用的。我做了一个简单的项目来测试显示结果。下面是主页的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="Alignments.MainPage"
BackgroundColor="White">
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="LightGray" Padding="1" Margin="30">
<Label Text="Vert: EndAndExpand, Horz: EndAndExpand" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" BackgroundColor="White"/>
</StackLayout>
</ContentPage>
正如你所看到的,它是一个非常简单的StackLayout,里面有一个标签。对于下面的每个图像,我保持StackLayout不变,我只是更改了条目的水平和垂直选项,并更改了文本以显示选定的选项,这样您就可以看到条目是如何移动和调整大小的。
以下是用于启动的代码:
<Label Text="Vert: Start, Horz: Start" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="White"/>
以及用于StartAndExpand的代码:
<Label Text="Vert: StartAndExpand, Horz: StartAndExpand" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" BackgroundColor="White"/>
正如您所看到的,除了在StartAndExpand选项中使用了更多的文本之外,在视觉上没有其他区别。这是在我的三星A30物理设备上测试的。这些可能在不同的设备上显示不同,但我认为这里的所有图像都显示了Xamarin中的一些but。对于其余部分,我将只显示屏幕截图,我认为它们是不言而喻的。
我还建议您查看Microsoft documentation以获取更多详细信息。值得注意的是"Expansion仅供StackLayout使用“。
https://stackoverflow.com/questions/25338533
复制相似问题