在 Xamarin.Forms 布局中添加空间?

Posted

技术标签:

【中文标题】在 Xamarin.Forms 布局中添加空间?【英文标题】:Adding space in Xamarin.Forms layouts? 【发布时间】:2014-07-28 22:07:20 【问题描述】:

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

一种方法是像这样添加一个没有孩子的框架

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

很遗憾,HeightRequestMinimumHeightRequest 被忽略了。

还有更好的方法吗?

【问题讨论】:

【参考方案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()
        ;

【讨论】:

【参考方案2】:

大多数Xamarin.Forms Layouts 支持在元素之间添加空格:

StackLayout 有一个 Spacing 属性, Grid 具有 RowSpacingColumnSpacing 属性, ...

现在,如果您想在特定位置添加间距,方法是包含BoxView

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

您也可以将您的内容包装在FrameContentView 中,但它会为内容添加填充而不是添加空格(尽管效果相同)。

【讨论】:

【参考方案3】:

我所做的对我来说非常有效:

假设你想将 2 个 Label 均匀分布在一个水平 StackLayout 上:

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”)的 BoxView,您的视图看起来是均匀分布的。 通过设置Spacing = 0,您的视图之间不会有额外的空间。

【讨论】:

这正是我使用的 hacky 技术。【参考方案4】:

试试:

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

【讨论】:

【参考方案5】:

我想与 Lay González 的回答一起分享屏幕截图,但编辑队列已满->

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

这是一个例子:

在最后一个“实际”视图之后省略填充视图,以便您想要的视图位于末尾(示例中底部的“-50”标签)。

【讨论】:

以上是关于在 Xamarin.Forms 布局中添加空间?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Xamarin.Forms for android / ios 中实现特定布局

Xamarin.Forms 网格重叠

搞懂Xamarin.Forms布局,看这篇应该就够了吧

从父布局中删除和添加 xamarin 表单图像时出现问题

搞懂Xamarin.Forms布局,看这篇应该就够了吧

Xamarin.Forms/UI:如何在 2 个布局之间垂直对齐项目