Question

我希望彼此相邻显示3个不同的列表，但由于某种原因，它们会在彼此之下显示。

我正在使用JSViews。

以下是我的代码和屏幕截图的相关部分;

在我的JSView中;

    var keysList = new sap.m.List(this.createId("keysList"), {

    });
    var valList1 = new sap.m.List(this.createId("valList1"), {

    });
    var valList2 = new sap.m.List(this.createId("valList2"), {

    });
    var vBox2 = new sap.m.VBox({
        alignItems: "Start",
        justifyContent: "Start",
        items: [
            keysList,
            valList1,
            valList2
        ]
    }).addStyleClass("vbox2");

    var oPageMerkliste2 = new sap.m.Page({
        showHeader: false,
        content: [
            toolbar,
            vBox1,
            vBox2
        ]
    });

    return oPageMerkliste2;

我的控制器;

        var keysList = this.byId("keysList");
        var keysModel = new sap.ui.model.json.JSONModel();
        keysModel.setData(keysObj);          
        console.log("keysList", keysList);
        keysList.setModel(keysModel);
        var template0 = new sap.m.CustomListItem({
            content: [
                new sap.m.VBox({
                    items: [
                        new sap.m.Text({
                            text : "{}"
                        })
                    ]
                }).addStyleClass("listSize")
            ]
        }).addStyleClass("");
        keysList.bindAggregation("items", "/", template0);
        //val list 1 
        var valList1 = this.byId("valList1");
        var valList1Model = new sap.ui.model.json.JSONModel();
        valList1Model.setData(valsObj1);          
        console.log("valList1", valList1);
        valList1.setModel(valList1Model);
        var template1 = new sap.m.CustomListItem({
            content: [
                new sap.m.VBox({
                    items: [
                        new sap.m.Text({
                            text : "{}"
                        })
                    ]
                }).addStyleClass("listSize")
            ]
        }).addStyleClass("");
        valList1.bindAggregation("items", "/", template1);
            //val2 list  
        var valList2 = this.byId("valList2");
        var valList2Model = new sap.ui.model.json.JSONModel();
        valList2Model.setData(valsObj2);          
        console.log("valList2", valList2);
        valList2.setModel(valList2Model);
        var template2 = new sap.m.CustomListItem({
            content: [
                new sap.m.VBox({
                    items: [
                        new sap.m.Text({
                            text : "{}"
                        })
                    ]
                }).addStyleClass("listSize")
            ]
        }).addStyleClass("");
        valList2.bindAggregation("items", "/", template2);

我认为VBox实际上是用于显示彼此相邻的项目，但显然在我的情况下它并没有按照实际应该的方式行事。

我尝试在Chrome Dev上玩它。工具和编辑样式的宽度改变但是它也没有帮助。

如何将它们彼此相邻显示？（类似于第一个List的索引是第二个List等的索引。）

以下是我的＆＃34; List＆＃34;看起来到目前为止（抱歉糟糕的油漆技巧）

Answer 1

尝试使用HBox更改VBox。

sap.m.HBox

在你的代码中，你使用VBox，所以它正在做预期的。

如何在SAP UI 5中相互显示3个不同的列表？

1 个答案: