Xamarin.Form的LayoutOptions,特别是填充和扩展的区别是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (22)

在Xamarin。View有两个属性HorizontalOptionsVerticalOptions,两种类型LayoutOptions并且可以具有下列值之一:

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

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

提问于
用户回答回答于

简短回答

StartCenterEndFill定义视图的在其空间内对齐

Expand定义是否占据更多的空间如果有的话。

理论

结构LayoutOptions控制两个不同的行为:

  1. 对齐:视图如何在父视图中对齐?
- `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. 扩展:如果可用的话,元素会占用更多的空间吗?
- 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.

同样,如果父视图不大于其子视图,扩展后缀也不会产生任何不同。

让我们看看下面的示例,看看所有八个布局选项之间的区别。

该应用程序包含深灰色。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,
        });
    }
}

The following screenshots show the result when clicking on each of the eight buttons. We make the following observations:

  • 只要父母stackLayout紧(不紧)Fill)的垂直布局选项。Button可以忽略不计。
  • 垂直布局选项仅在stackLayout更大(例如Fill(对齐),并且各个按钮具有Expand后缀。
  • 在所有按钮中,额外的空间都是按比例分配的。Expand后缀。为了更清楚地看到这一点,我们在相邻的两个按钮之间添加了黄色的水平线。
  • 比要求的高度更大的按钮不一定“填充”它。在这种情况下,实际行为由它们的对齐控制。例如,它们要么对齐在其空间的顶部、中心或按钮上,要么完全填充。
  • 所有按钮跨越布局的整个宽度,因为我们只修改VerticalOptions.

用户回答回答于

当前版本的Xamarin中有一点bug,Forms;也许已经有一段时间了。

CenterAndExpand一般情况下不会扩展,而围绕它的工作可能会让人感到困惑。

例如,如果您有一个StackLayout设为CenterAndExpand,然后在其中放置一个标签,该标签也设置为CenterAndExpand对象的全宽度的标签。StackLayout...。没有。不会扩大。必须设置StackLayout致“FillAndExpand“使嵌套的Label对象展开到StackLayout,然后告诉标签以文本为中心,而不是将其本身作为对象。HorizontalTextAlignment="Center"。根据我的经验,需要将父级和嵌套的子级设置为FillAndExpand如果你真的想确保它膨胀到适合

        <StackLayout HorizontalOptions="FillAndExpand"
                     Orientation="Vertical"
                     WidthRequest="300">
            <Label BackgroundColor="{StaticResource TileAlerts}"
                   HorizontalOptions="FillAndExpand"
                   Style="{StaticResource LabelStyleReversedLrg}"
                   HorizontalTextAlignment="Center"
                   Text="Alerts" />

扫码关注云+社区