在Xamarin.Forms布局中如何添加间距？

Question

在Xamarin.Forms中，添加空间到布局的建议方法是什么？

其中一种方法是添加一个没有子元素的框架(Frame)，就像这样：

new Frame {
    BackgroundColor = Color.White,
    HeightRequest = 1,
    MinimumHeightRequest = 1,
    HasShadow = false
}

很遗憾，HeightRequest和MinimumHeightRequest被忽略了。

是否存在更好的方法？

- SteAp

Answer 1

您可以将控件放置在布局中（如框架、滚动视图、堆栈面板）并使用 Padding 属性：

        this.stackPanel = new StackLayout () 
        {
            Padding = new Thickness (8, 8)
        };  

        var scrollView = new ScrollView () 
        {
            Content = stackPanel,
            Padding = new Thickness (1, 2, 3, 4)
        };

        var frame = new Frame () 
        {
            Padding = new Thickness (8)
        };

如果你想在两个按钮之间增加间距，例如，我认为这样做可以解决问题。第一个按钮添加了10个底部填充，第二个按钮添加了10个顶部填充，总计20个。

        var frame1 = new Frame () 
        {
            Padding = new Thickness (0,0,0,10),
            Content = new Button()
        };

        var frame2 = new Frame () 
        {
            Padding = new Thickness (0,10,0,0),
            Content = new Button()
        };

- SKall

---

请注意，此方法无法在集合视图模板中使用。它会扩展项目以填充空间，而不是在项目之间填充空间。 - noone392

Answer 2

大多数 Xamarin.Forms 布局支持在元素之间添加空格：

• StackLayout 有一个 Spacing 属性，
• Grid 有 RowSpacing 和 ColumnSpacing 属性，
• ...

现在，如果您想在特定位置添加间距，则需要包含一个 BoxView：

myStackLayout.Children.Add (new BoxView {Color = Color.Transparent, HeightRequest = 5});

您还可以将内容包装在Frame或ContentView中，但这会给内容添加填充而不是添加空间（尽管效果相同）。

- Stephane Delcroix

Answer 3

我的做法对我来说非常完美：

假设您想要在水平StackLayout上均匀分配2个标签：

new StackLayout
{
    Orientation = StackOrientation.Horizontal,
    HorizontalOptions=LayoutOptions.CenterAndExpand,
    Spacing = 0, // <- Very important!!
    Children = {
        new Label { Text = "Label 1" },
        new BoxView { HorizontalOptions = LayoutOptions.FillAndExpand }, // <- the clever part
        new Label { Text = "Label 2" }
    }
};

概述

通过插入填充视图之间剩余空间（"FillAndExpand"）的BoxViews，您的视图将呈现出均匀分布的效果。 通过设置Spacing = 0，您的视图之间不会有额外的空间。

- Lay González

---

这是我使用的确切的黑客技巧。 - TwoFingerRightClick

Answer 4

尝试：

myFrame.TranslateX=10;
myFrame.TranslateY=10;

- Vinit Saxena

Answer 5

我想分享一张截图，以配合Lay González的答案，但编辑队列已满->

为了在Xamarin中获得类似于CSS“Space-Between”的动态间距，您可以在实际具有内容的视图之间插入填充器视图。

这是一个例子：

忽略最后一个“actual”视图之后的填充视图，以便您想要的视图位于最后（例如底部的“-50”标签）。

- TwoFingerRightClick