有更好的選擇sap.ui.commons.layout.MatrixLayout？

Question

做一個起始內容固定，中心是彈性的，最終內容是固定的佈局的最佳方式是什麼？像三柱100％寬的HBox，第一個和最後一個孔是固定的，中心延伸？

這是我現在怎麼做的，我可以避免使用sap.ui.commons.layout.MatrixLayout？

new sap.ui.commons.layout.MatrixLayout({ 
    layoutFixed: true, 
    columns: 3, 
    width: '100%', 
    widths: [ '100px', '100%', '100px' ], 
    rows: [ 
     new sap.ui.commons.layout.MatrixLayoutRow({ 
      cells : [ 
       new sap.ui.commons.layout.MatrixLayoutCell({ 
        content: new sap.m.Label({ 
         text: 'start' 
        }) 
       }), 
       new sap.ui.commons.layout.MatrixLayoutCell({ 
        content: new sap.m.Label({ 
         text: 'center' 
        }) 
       }), 
       new sap.ui.commons.layout.MatrixLayoutCell({ 
        content: new sap.m.Label({ 
         text: 'end' 
        }) 
       }) 
      ] 
     }) 
    ] 
}) 

我試圖用sap.ui.layout.HorizontalLayout，但它並沒有水平拉伸：

sap.ui.layout.HorizontalLayout({ 
    width: '100%', 
    content: [ 
     new sap.m.Label({ 
      width: '100px', 
      text: 'start' 
     }), 
     new sap.m.Label({ 
      width: '100%', 
      text: 'center' 
     }), 
     new sap.m.Label({ 
      width: '100px', 
      text: 'end' 
     }) 
    ] 
}) 

Answer 1

好吧，我想我得到了它。 :)

new sap.m.HBox({ 
    items: [ 
     new sap.m.Label({ 
      text: 'start', 
      width: '100px', 
      layoutData: new sap.m.FlexItemData({ 
       growFactor: 0 
      }) 
     }), 
     new sap.m.Label({ 
      text: 'center', 
      layoutData: new sap.m.FlexItemData({ 
       growFactor: 1 
      }) 
     }), 
     new sap.m.Label({ 
      text: 'end', 
      width: '100px', 
      layoutData: new sap.m.FlexItemData({ 
       growFactor: 0 
      }) 
     }) 
    ] 
}) 

Answer 2

HBox是支持CSS3 FlexBoxLayout的瀏覽器的解決方案。或者，您可以嵌套兩個FixFlex佈局 - 這應該適用於所有支持UI5的瀏覽器（FixFlex就像HBox/Vbox的特定有限子集，非FlexBox瀏覽器具有後備功能）。