如何更改 UI5 中响应式按钮的宽度？

Question

我是 UI5 初学者，我想创建两个响应式 sap.m.Buttons。每个按钮的宽度应为视图的 50%。问题是，我真的不知道如何设置响应式按钮的宽度。

    var oButtonNeuePal = new sap.m.Button({
        icon : "sap-icon://add-document",
        text : "{i18n>lieferschein.btnNeuePal}",
        press : [ 'NEUEPAL', oController.onButton, oController ]
    });
    var oButtonProtokoll = new sap.m.Button({
        icon : "sap-icon://list",
        text : "{i18n>lieferschein.btnProtokoll}",
        press : [ 'PROTOKOLL', oController.onButton, oController ]
    });


    /***********************************************************************
     * Page
     */     

    var oForm = new sap.ui.layout.form.SimpleForm({
        layout : sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout
    });

    var oGroupH = new sap.m.HBox({
        justifyContent : sap.m.FlexJustifyContent.SpaceBetween,
    });
    oGroupH.addItem(oButtonNeuePal);
    oGroupH.addItem(oButtonProtokoll);

    var oGroupV = new sap.m.VBox();
    oGroupV.addItem(oGroupH);
    //I removed some labels and Inputfield

    oForm.addContent(oGroupV);

    var oPage = new sap.m.Page({
        customHeader : oBar
    });
    oPage.addContent(oForm);

Answer 1

您可能会感兴趣：Flex Box - Size Adjustments

当用内容填充 HBox/FlexBox 时，并非每个控件（甚至可能没有控件）都会自动占用整个可用的 space。

您必须为按钮设置 100% 的 width 并将其布局的 growFactor 设置为 1。

In XML（来自我的示例 link）：

<Button text="{i18n>lieferschein.btnNeuePal}" width="100%">
    <layoutData>
        <FlexItemData growFactor="1" />
    </layoutData>
</Button>

在 JS 中（可能）：

var oButtonNeuePal = new sap.m.Button({
    icon : "sap-icon://add-document",
    text : "{i18n>lieferschein.btnNeuePal}",
    layoutData: new sap.m.FlexItemData({ growFactor: 1}),
    width: "100%",
    press : [ 'NEUEPAL', oController.onButton, oController ]
});

如何更改 UI5 中响应式按钮的宽度？

How do I change the width from a responsive Button in UI5?

responsive-design

sapui5