Question

我正在尝试设计一个如下所示的屏幕：

我不确定如何实现这一目标。我尝试在sap.m.panel中放置两个SimpleForm控件。但是，它们没有按预期工作。

有人可以分享输出结果的XML视图代码吗？请注意，我的问题是如何放置控件，实现背景颜色和整个布局，如上面的屏幕。

Answer 1

您可以使用以下布局控件

来实现它

拆分器布局（sap.ui.layout.Splitter）， VerticalLayout （sap.ui.layout.VerticalLayout）和 FlexBox （闷棍） .m.FlexBox）

XML视图：

<l:Splitter id="pgSplitter" class="pgSplitter" width="100%">        
    <l:VerticalLayout id="leftLayout" class="leftLayout" height="100%" width="100%" >
        <l:Splitter id="leftSplitter" width="100%" orientation="Vertical">
            <FlexBox id="leftVLyt"
                width="100%" height="100%"
                justifyContent="Center"
                alignItems="Start">
                <items>
                    <Image class="sapUiSmallMarginTop" src="https://sapui5.hana.ondemand.com/resources/sap/ui/documentation/sdk/images/logo_ui5.png" densityAware="false" />
                </items>
                <layoutData><l:SplitterLayoutData size="50%" resizable="false" /></layoutData>
            </FlexBox>
            <FlexBox
                width="100%" height="100%"
                justifyContent="Center"
                alignItems="Start">
                <items>
                    <ObjectIdentifier title="Employee Info" text="" titleActive="false" />
                </items>
                <layoutData><l:SplitterLayoutData size="50%" /></layoutData>
            </FlexBox>
        </l:Splitter>
        <l:layoutData><l:SplitterLayoutData size="50%" resizable="false" /></l:layoutData>
    </l:VerticalLayout>

    <l:VerticalLayout id="rightLayout" class="rightLayout" height="100%" width="100%" >
        <l:Splitter id="rightSplitter" width="100%" orientation="Vertical">
            <FlexBox id="rightVLyt"
                width="100%" height="100%"
                justifyContent="Center"
                alignItems="Center">
                <items>
                    <f:SimpleForm editable="true" backgroundDesign="Transparent" layout="GridLayout" width="80%" height="100%">
                        <f:content>
                            <Label text=""/>
                            <Input type="Text" placeholder="Enter Name.." width="200px"/>

                            <Label text=""/>
                            <Input type="Text" placeholder="Enter Age.." width="200px"/>

                            <Label text=""/>
                            <Input type="Text" placeholder="Enter Email.." width="200px"/>
                        </f:content>
                    </f:SimpleForm>
                </items>
                <layoutData><l:SplitterLayoutData size="50%" resizable="false" /></layoutData>
            </FlexBox>
            <FlexBox
                width="100%" height="80%"
                justifyContent="Center"
                alignItems="Center">
                <items>
                    <Button text="Submit" class="sapUiSmallMarginEnd" />
                    <Button text="Reset"/>
                </items>
                <layoutData><l:SplitterLayoutData size="50%" /></layoutData>
            </FlexBox>

        </l:Splitter>
        <l:layoutData><l:SplitterLayoutData size="50%" /></l:layoutData>
    </l:VerticalLayout>
</l:Splitter>

<强>控制器：

onInit: function() {
    var body = document.body,
        html = document.documentElement,
        pgHeight = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );//page Height

    var oSplitter = this.getView().byId("pgSplitter");
    //var pgHeight = screen.height;
    oSplitter.setHeight(String(pgHeight)+"px");

    var oLeftSplitter = this.getView().byId("leftSplitter");
    if(oLeftSplitter)
        oLeftSplitter.setHeight(String(pgHeight)+"px");//left splitter  height

    var oRightSplitter = this.getView().byId("rightSplitter");
    if(oRightSplitter)
        oRightSplitter.setHeight(String(pgHeight)+"px");//right splitter  height
},

<强> CSS：

.pgSplitter .leftLayout {background: #22B14C;}

注意 ：有多种方法可以实现上述布局。根据您的要求修改代码。

SAPUI5布局与背景颜色和图像

1 个答案: