Is there a better alternative to sap.ui.commons.la

问题:

What's the best way to do a layout where the start content is fixed, the center is flex and the end content is fixed? Like a 100% wide HBox with three columns, first and last col are fixed and the center stretches?

This is how I do it by now, can I avoid using 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'
                    })
                })
            ]
        })
    ]
})

I tried to use sap.ui.layout.HorizontalLayout, but it does not stretch horizontally:

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'
        })
    ]
})

回答1:

The HBox is the solution for browsers supporting the CSS3 FlexBoxLayout. Alternatively, you could nest two FixFlex layouts - this should work in all UI5-supported browsers (FixFlex is like a specific, limited subset of HBox/Vbox with fallback for non-FlexBox browsers).

回答2:

Ok, I think I got it. :)

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
            })
        })
    ]
})