SAPUI5佈局，背景顏色和圖像

Question

我想設計一個屏幕，該屏幕將如下所示：

我真的不知道如何實現這一目標。我試過在SimpleForm內放置兩個控件。但是，他們沒有按預期工作。

有人可以分享將輸出結果如上所述的XML視圖代碼？請注意我的問題是如何放置控件，根據上面的屏幕實現背景顏色和整體佈局。

Answer 1

您可以通過以下佈局實現其控制

分配器佈局（sap.ui.layout.Splitter），VerticalLayout的（sap.ui.layout.VerticalLayout）和Flexbox的 （sap.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;} 

注：有多種方式實現上述佈局。根據您的要求修改代碼。