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

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 上使用它。改变宽度的工具和编辑样式，但它也没有帮助。

如何将它们彼此相邻显示？ （比如 0. 第一个 List 的索引紧挨着 0. 第二个 List 的索引等）

这是我的“列表”到目前为止的截图（对于糟糕的绘画技巧感到抱歉）

Answer 1

尝试用HBox更改VBox。

sap.m.HBox

在您的代码中，您使用的是 VBox，所以它正在执行预期的操作。