Question

我正在使用3个按钮处理sap.m.Dialog控件，我需要显示按钮＆＃34; A＆＃34;在左侧，按钮＆＃34; B＆＃34;在中间和按钮＆＃34; C＆＃34;在右边。

请参阅以下代码和截图

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上添加空间效果的正确方法吗？或者有什么方法可以满足我的要求吗？

Answer 1

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

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

在uri css / style.css中创建style.css。在您的视图中提供按钮ID。使用＃在stlye.css中定位按钮。对齐style.css中的按钮。

Answer 2

编辑：另一种方法是将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”＆amp; “sapUiNoMarginEnd”类。

代码段：

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")
            ],

Answer 3

尝试按下按钮＆＃34; A＆＃34;在聚合beginButton，按钮＆＃34; B＆＃34;在聚合buttons和按钮＆＃34; C＆＃34;在聚合endButton。

Answer 4

@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属性以及按钮和弹性框的宽度以获得所需的结果。

sap.m.Dialog按钮聚合中的按钮之间的空间

4 个答案: