Sapui5 表内列的设计

Sapui5 表内列的设计,sapui5,Sapui5,我对元素的对齐有问题 我有sap.m.表格,表格内部有sap.m.InputListItem var tbl= new sap.m.Table({ width: "100%", headerToolbar: new sap.m.Toolbar({ content: [ new sap.ui.core.Icon({

我对元素的对齐有问题

我有sap.m.表格,表格内部有sap.m.InputListItem

 var tbl= new sap.m.Table({
                width: "100%",
                headerToolbar: new sap.m.Toolbar({
                    content: [
                        new sap.ui.core.Icon({
                            src : "nav-back",
                            press: this.onNavBack.bind(this)
                        })
                        , new sap.m.Title({
                            text: this.roleDetail
                        })]
                }),
                columns: [new sap.m.Column({
                    header: new sap.m.Text({
                        text: " Menu"
                    })
                }),
                    new sap.m.Column({
                        header: new sap.m.Text({
                            text: " App"
                        })
                    })
                ],
                items: [
                    fieldOfColumnItems
                ]
            });
在循环中,我将此变量字段填入ColumnItems

fieldOfColumnItems.push(new sap.m.ColumnListItem({
                    cells: [menu[i], menuItems[i]]
                }))

我如何使这些下拉列表位于右侧?我希望它看起来漂亮。 有什么想法吗?

使用sap.m.FlexBox:

...
  var oTable = new sap.m.Table({
    columns: [
      new sap.m.Column({
        header: new sap.m.Text({
          text: "Menu"
        })
      }),
      new sap.m.Column({
        header: new sap.m.Text({
          text: "App"
        })
      })
    ],
    items: [
      new sap.m.ColumnListItem({
        cells: [
          new sap.m.FlexBox({
            justifyContent: "SpaceBetween",
            alignItems: "Center",
            items: [
              new sap.m.Label({
                text: "foo"
              }),
              new sap.m.Select({
                items: [
                  new sap.ui.core.Item({
                    text: "bar"
                  })
                ]
              }),
            ]
          })
        ]
      }),
      new sap.m.ColumnListItem({
        cells: [
          new sap.m.FlexBox({
            justifyContent: "SpaceBetween",
            alignItems: "Center",
            items: [
              new sap.m.Label({
                text: "longerfoo"
              }),
              new sap.m.Select({
                items: [
                  new sap.ui.core.Item({
                    text: "barfits"
                  })
                ]
              }),
            ]
          })
        ]
      })
    ]
  });
...

附加内容:

根据您的评论:

fieldOfColumnItems.push(
  new sap.m.ColumnListItem({
    cells: [
      new.sap.m.FlexBox({
        justifyContent: "SpaceBetween",
        alignItems: "Center",
        items: [
          menu[i],
          menuItems[i]
        ]
      })
    ]
  })
)

不知道如何将此应用于我的解决方案。。。已尝试,但没有结果
sap.m.Column
具有属性
hAlign
。它会将列中的元素向右推。这就是你需要的吗?检查:顺便说一句:考虑使用xml视图,它们的可读性和可重用性要高得多。或者在您的案例中使用js视图有什么好的理由吗?