SAP UI 5の3つの異なるリストを隣り合わせに表示するにはどうすればいいですか？

Question

私は互いに隣り合って表示したい3つのリストを持っていますが、何らかの理由でそれらがお互いの下に表示されています。

私はJSViewを使用しています。

ここに私のコードとスクリーンショットの関連部分があります。

の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; 

my controller;

 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インデックスは、2番目のリストなどの0インデックスの隣にある）

Answer 1

HBoxでVBoxを変更してみてください。

sap.m.HBox 

あなたのコードでは、VBoxを使用しているので、期待通りの動作をしています。