列间距 'ResponsiveGridLayout' (SAPUI5)

Question

如何减少 ResponsiveGridLayout 中的间距？在此图像中，我希望 SearchField 和 Button 之间没有间距。我通过 Google 搜索并仔细查看了 API，但我什么也没找到。

编辑：

                var oResponsiveLayout = new sap.ui.layout.form.ResponsiveGridLayout({

        columnsL : 3,
        columnsM : 3,
        columnS : 1
    });
    var oFormLayout = new sap.ui.layout.form.Form({
        layout : oResponsiveLayout,
        formContainers : [ new sap.ui.layout.form.FormContainer({
            formElements : [ new sap.ui.layout.form.FormElement({
                fields : [ this.oSearchField = new sap.ui.commons.SearchField({
                    width : "100%",
                    placeholder : "Suchtext / ID",
                    search : this._onSearchRequest.bind(this),
                    layoutData : new sap.ui.layout.GridData({
                        span : "XL9 L9 M6 S6"
                    })
                }) ]
            }) ]
        }), new sap.ui.layout.form.FormContainer({
            formElements : [ new sap.ui.layout.form.FormElement({
                fields : [ this.oArrowUp = new sap.ui.commons.Button({
                    layoutData : new sap.ui.layout.GridData({
                        span : "XL1 L1 M2 S2"
                    }),
                    width : "100%",
                    icon : "resources/images/arrow_up.png",
                    tooltip : new sap.ui.commons.RichTooltip({
                        text : "Vorheriges Element der Suche anzeigen"
                    }),
                    press : this._onSearchArrowUpRequest.bind(this)
                }), this.oArrowDown = new sap.ui.commons.Button({
                    layoutData : new sap.ui.layout.GridData({
                        span : "XL1 L1 M2 S2"
                    }),
                    width : "100%",
                    icon : "resources/images/arrow_down.png",
                    tooltip : new sap.ui.commons.RichTooltip({
                        text : "Nächstes Element der Suche anzeigen"
                    }),
                    press : this._onSearchArrowDownRequest.bind(this)
                }) ]
            }) ]
        }),

Answer 1

Here是解决方案；您可以在 SearchField 之前添加空 Label 并根据需要设置 labelSpan(M/L/S) 。它还会响应，因此您可以放心使用它。

Answer 2

class="sapUiSmallMarginEnd"

在 xml 视图的 SearchField 中使用上面的 class

列间距 'ResponsiveGridLayout' (SAPUI5)

Spacing between columns 'ResponsiveGridLayout' (SAPUI5)

styles

spacing

sapui5

responsive