Sapui5 sap.m.Dialog按钮聚合中按钮之间的间距 我在SAP.M.对话框控制中使用3个按钮，我需要在左边显示按钮“A”，中间的按钮“B”，右边的按钮“C”。

请参考下面的代码和屏幕截图

Controller.js

var oDialog = new Dialog({
    title: "Dialog",
    type: 'Message',
    content: new Text({ text: "" }),
    buttons : [
        new sap.m.Button({
            text: "A"
        }),
        new sap.m.Button({
            text: "B"
        }),
        new sap.m.Button({
            text: "C"
        })
    ],
    afterClose: function() {
        oDialog.destroy();
    }
});
oDialog.open();

我的解决方法：

var oDialog = new Dialog({
    title: "Dialog",
    type: 'Message',
    content: new Text({ text: "" }),
    buttons : [
        new sap.m.Button({
            text: "A"
        }),
        // below added few dummy buttons to show space like effect at UI
        new sap.m.Button({text: "", visible:true, enabled:false}),
        new sap.m.Button({text: "", visible:true, enabled:false}),
        new sap.m.Button({
            text: "B"
        }),
        // below added few dummy buttons to show space like effect at UI
        new sap.m.Button({text: "", visible:true, enabled:false}),
        new sap.m.Button({text: "", visible:true, enabled:false}),
        new sap.m.Button({
            text : "C"
        })
    ],
    afterClose: function() {
        oDialog.destroy();
    }
});
oDialog.open();

添加空按钮后的外观

---

我已经添加了带有空白文本的按钮，不知何故我已经实现了在按钮之间显示空格，但这是在UI上添加空格效果的正确方法吗？或者有什么合适的方法来满足我的要求吗？

可以使用自定义css。在manifest.json中插入css文件

...
  "sap.ui5": {
    ... 
    "resources": {
      "css": [{
        "uri": "css/style.css"
      }]
    }
  }

在uri css/style.css中创建style.css。在视图中给出按钮ID。在stlye.css中，将带有#的按钮作为目标。对齐style.css中的按钮。

编辑： 另一种方法是在对话框的内容聚合中放置一个Bar控件

var dialog = new sap.m.Dialog({
            title: "Dialog",
            type: 'Message',
            content: 
                new sap.ui.layout.VerticalLayout({
                    width:"100%",
                    content: [
                        new sap.m.Text({
                        text: 'One of the keys to success is creating realistic goals that can be achieved in a reasonable amount of time.'                    
                        }).addStyleClass("sapUiSmallMargin"),
                        new sap.m.Bar({
                            design: "Footer",
                            contentLeft:  new sap.m.Button({ text: "Button A"}),
                            contentMiddle:  new sap.m.Button({ text: "Button B"}),
                            contentRight:  new sap.m.Button({ text: "Button C"})
                        })
                    ]
                }),
            afterClose: function() {
                dialog.destroy();
            }
        });
        dialog.addStyleClass("sapUiNoContentPadding ");

原始答复：

您可以按百分比分配宽度以响应地处理它。由于您使用的是3个按钮，因此可以为每个按钮指定约30%的宽度。这可能会在移动设备上引起一些问题，因为动态添加的边距可以通过标准的“sapUiNoMarginBegin”和“sapuinomargined”类删除

代码段：

buttons : [
                new sap.m.Button({
                    text: "Button A",
                    width:"30%"
                }).addStyleClass("sapUiNoMarginEnd").addStyleClass("sapUiNoMarginBegin"),
                new sap.m.Button({
                    text: "Button B",
                    width:"30%"
                }).addStyleClass("sapUiNoMarginEnd").addStyleClass("sapUiNoMarginBegin"),
                new sap.m.Button({
                    text : "Button C",
                    width:"30%"
                }).addStyleClass("sapUiNoMarginEnd").addStyleClass("sapUiNoMarginBegin")
            ],

尝试将按钮“A”放入聚合

开始按钮

，按钮“B”放入聚合

按钮

，按钮“C”放入聚合

结束按钮
@Prashob

使用Flexbox控件，如下所示：

<FlexBox height="100px" alignItems="Center" justifyContent="Center">
                <items>
                    <Button text="Submit" type="Emphasized" width="300px" press="submitDetails"/>
                </items>
            </FlexBox>



您需要根据需要按钮的位置更改justifyContent属性。
对于三个按钮，您需要3个flexbox，其中包含每个按钮。也许你可以用HBOX控制把它们并排放在一起

              <HBox>
                    <items>
                        <FlexBox id="fb1" height="100px" alignItems="Center" width="400px" justifyContent="SpaceAround">
                            <items>
                                <Button id="b1" text="Start" width="200px"/>
                            </items>
                        </FlexBox>
                        <FlexBox id="fb2" justifyContent="Center" height="100px" alignItems="Center" width="400px">
                            <items>
                                <Button id="b2" text="Center" width="200px"/>
                            </items>
                        </FlexBox>
                        <FlexBox id="fb3" justifyContent="End" height="100px" width="400px" alignItems="Center">
                            <items>
                                <Button id="b3" text="End" width="200px"/>
                            </items>
                        </FlexBox>
                    </items>
                </HBox>



检查上述代码的输出，如下所示：

您可以相应地更改justifyContent属性以及按钮和FlexBox的宽度以获得所需的结果。
您的解决方法在mobile上有效吗？很好，但UI得到了符文，只有一个按钮在右手柄侧可见，其余两个按钮自动隐藏到OverflowButton中。我只是想知道您的“空”按钮是否为空显示按钮。否，在UI上不显示空按钮，而是可以看到类似空格的效果，因为我已将属性作为文本“”应用于按钮，可见：true且已启用：false@Marc我已经更新了我的问题，在添加了空按钮之后添加了我对话框的快照，谢谢您的回复hi@n01dea，谢谢您的回复，在不应用css和向buttonPerhaps flex box添加边距类的情况下，是否有任何解决方法帮助：。请查看中心演示。然后只需将左右边距添加到中心的按钮我也尝试添加sap.m.FlexBox控件，但最终得到未捕获错误未捕获错误：“元素sap.m.FlexBox#uuuu box0”对于元素sap.m.Dialog#uu dialog0
按钮的聚合“按钮”无效：[new sap.m.FlexBox（{items:[new sap.m.button（{text:“A”）），new sap.m.Button（{text:“B”}），new sap.m.Button（{text:“C”}）]
抱歉，错过了该对话框，该对话框只使用页脚的聚合按钮。可能是新的sap.m.Button（{text:“B”}）.addStyleClass（“sapuilageMarginBeginEnd”）可以工作。不幸的是，它没有在按钮之间添加任何空格。hi@amiramw，我尝试了您的解决方法，但我发现您可以在对话框中同时使用beginButton、endButton和buttons聚合，但buttons聚合会覆盖beginButton和endButton，所以使用它们没有意义。嗨@loki，谢谢你的回复，但我不能使用FlexBox或HBox作为对话框的按钮聚合。即使我使用它，我最终也会在屏幕上出错，因为sap.m.Button是唯一可以在sap.m.Dialog的按钮聚合中使用的控件。@Prashob哦，我没有看到sap.m.Dialog。我还没有使用对话框控件，我也是SAPUI5新手。如果我发现了什么，我会再发一次。@Prashob没有按钮聚合这太令人沮丧了xD他们有leftButton和RightButton的关联，但现在不推荐了。