首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Xamarin.Form的LayoutOptions,特别是Fill和Expand有什么区别?

Xamarin.Form的LayoutOptions,特别是Fill和Expand有什么区别?
EN

Stack Overflow用户
提问于 2014-08-16 16:56:42
回答 3查看 52.7K关注 0票数 179

在Xamarin.Forms中,每个View都有两个属性HorizontalOptionsVerticalOptions。这两种类型都是LayoutOptions类型,可以具有下列值之一:

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

显然,它控制视图在父视图上的对齐方式。但是,每个选项的行为到底是怎样的呢?Fill和后缀Expand有什么区别?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-08-16 16:56:42

简短的回答

StartCenterEndFill在视图的空间中定义视图的对齐方式。

Expand定义是否占用更多的空间

理论

structure LayoutOptions控制两种截然不同的行为:

  1. Alignment:如何在父视图中对齐视图?

代码语言:javascript
复制
- `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.

但是,如果父对象不比其子对象大,您将不会注意到这些对齐之间的任何差异。对齐只适用于具有额外可用空间的父视图。

如果元素可用,

  1. Expansion:是否会占用更多空间?

代码语言:javascript
复制
- 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,带有八个嵌套的白色按钮,每个按钮都标有垂直布局选项。当单击其中一个按钮时,它会将其垂直布局选项分配给堆栈布局。通过这种方式,我们可以很容易地测试视图与父级之间的交互,两者使用不同的布局选项。

(最后几行代码添加了额外的黄色方框。我们稍后再来讨论这个问题。)

代码语言:javascript
复制
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,
        });
    }
}

下面的屏幕截图显示了单击八个按钮中的每一个按钮时的结果。我们做了以下观察:

对齐只要父对齐很紧(不对齐页面),每个

  • 的垂直布局选项就是suffix.

  • Additional 垂直布局选项,只有当Button较大(例如通过FillFill )并且各个按钮具有Expand后缀的stackLayout时,垂直布局选项才有意义。为了更清楚地看到这一点,我们在每两个相邻的buttons.
  • Buttons之间添加黄色水平线,这些线的空间超过了它们所要求的高度,并不一定会“填充”它。在这种情况下,实际行为由它们的对齐方式控制。例如,它们要么在空间的顶部、中心或按钮上对齐,要么在整个布局宽度内填充按钮,因为我们只修改了VerticalOptions.

Here you find the corresponding high-resolution screenshots.

票数 344
EN

Stack Overflow用户

发布于 2016-07-09 03:15:36

当前版本的Xamarin.Forms中有一个小bug;也许它已经存在了一段时间了。

CenterAndExpand通常不会扩展,解决这个问题可能会让人感到困惑。

例如,如果您将StackLayout设置为CenterAndExpand,然后在其中放置一个标签,该标签也设置为CenterAndExpand,则您期望的标签是StackLayout的全宽。不是的。它不会膨胀。您必须将StackLayout设置为"FillAndExpand“,以使嵌套的Label对象扩展到StackLayout的整个宽度,然后使用HorizontalTextAlignment="Center"告诉Label居中显示文本,而不是将其本身作为对象。根据我的经验,如果你真的想让父元素和嵌套子元素都扩展到合适的位置,就需要将它们都设置为FillAndExpand

代码语言:javascript
复制
        <StackLayout HorizontalOptions="FillAndExpand"
                     Orientation="Vertical"
                     WidthRequest="300">
            <Label BackgroundColor="{StaticResource TileAlerts}"
                   HorizontalOptions="FillAndExpand"
                   Style="{StaticResource LabelStyleReversedLrg}"
                   HorizontalTextAlignment="Center"
                   Text="Alerts" />
票数 18
EN

Stack Overflow用户

发布于 2020-06-23 08:05:56

Falko给了一个很好的解释,但我想用另一个视觉效果来补充,以及这些标记在xaml中是如何工作的,这是我最喜欢使用的。我做了一个简单的项目来测试显示结果。下面是主页的Xaml:

代码语言:javascript
复制
<?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不变,我只是更改了条目的水平和垂直选项,并更改了文本以显示选定的选项,这样您就可以看到条目是如何移动和调整大小的。

以下是用于启动的代码:

代码语言:javascript
复制
<Label Text="Vert: Start, Horz: Start" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="White"/>

以及用于StartAndExpand的代码:

代码语言:javascript
复制
<Label Text="Vert: StartAndExpand, Horz: StartAndExpand" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" BackgroundColor="White"/>

正如您所看到的,除了在StartAndExpand选项中使用了更多的文本之外,在视觉上没有其他区别。这是在我的三星A30物理设备上测试的。这些可能在不同的设备上显示不同,但我认为这里的所有图像都显示了Xamarin中的一些but。对于其余部分,我将只显示屏幕截图,我认为它们是不言而喻的。

我还建议您查看Microsoft documentation以获取更多详细信息。值得注意的是"Expansion仅供StackLayout使用“。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25338533

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档