sap.ui.commons.layout.MatrixLayout有更好的替代方法吗? [英] Is there a better alternative to sap.ui.commons.layout.MatrixLayout?

问题描述

在起始内容固定，中心弯曲，最终内容固定的情况下进行布局的最佳方法是什么?就像具有三列的100％宽的HBox一样，第一个和最后一个col是固定的，并且中心伸展?

这是我现在的操作方式，我可以避免使用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'
        })
    ]
})

解决方案

HBox是支持CSS3 FlexBoxLayout的浏览器的解决方案.或者，您可以嵌套两个FixFlex布局-这应该在所有受UI5支持的浏览器中都可以使用(FixFlex就像是HBox/Vbox的特定的有限子集，对于非FlexBox浏览器是后备的.)

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

解决方案

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).

这篇关于sap.ui.commons.layout.MatrixLayout有更好的替代方法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！