在SAPUI5中设计布局

问题描述 投票:2回答:2

我正在设计SAPUI5中的布局,但是我在为工作挑选最合适的布局时遇到了麻烦。我尝试了一个Grid Layout和一个Simple Form,但我似乎无法让他们正确。总有一些可扩展性问题等。如果有人会指出我正确的方向来创建这样的布局,那对我来说这将是一个非常好的开始。任何提示或建议都将受到大力赞赏。

我想要实现的是:

桌面enter image description here

移动enter image description here

提前致谢

layout responsive-design sapui5
2个回答
4
投票

希望这对您有所帮助,使用Grid布局和布局GridData属性即可实现。

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:l="sap.ui.layout"
  controllerName="example.responsiveDesign">
  <Page
    title="Title">
    <content>
      <l:VerticalLayout
        width="100%">
        <l:Grid
          containerQuery="true"
          hSpacing="1"
          vSpacing="1"
          position="Center">
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL4 L4 M4 S8" />
            </layoutData>
          </Input>
          <Button
            text="Default"
            width="100%">
            <layoutData>
              <l:GridData
                span="XL2 L2 M2 S4" />
            </layoutData>
          </Button>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL4 L4 M4 S8" />
            </layoutData>
          </Input>
          <Button
            text="Default"
            width="100%">
            <layoutData>
              <l:GridData
                span="XL2 L2 M2 S4" />
            </layoutData>
          </Button>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL4 L4 M4 S8" />
            </layoutData>
          </Input>
          <Button
            text="Default"
            width="100%">
            <layoutData>
              <l:GridData
                span="XL2 L2 M2 S4" />
            </layoutData>
          </Button>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL4 L4 M4 S8" />
            </layoutData>
          </Input>
          <Button
            text="Default"
            width="100%">
            <layoutData>
              <l:GridData
                span="XL2 L2 M2 S4" />
            </layoutData>
          </Button>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL12 L12 M12 S12" />
            </layoutData>
          </Input>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL6 L6 M6 S12" />
            </layoutData>
          </Input>
          <Input
            type="Text">
            <layoutData>
              <l:GridData
                span="XL6 L6 M6 S12" />
            </layoutData>
          </Input>
        </l:Grid>
      </l:VerticalLayout>
    </content>
  </Page>
</mvc:View>

Desktop

enter image description here

Mobile

enter image description here

注意:包括xmlns:l="sap.ui.layout"名称空间。


0
投票

我建议使用Grid布局。我设计了一个小型原型,其中包含您正在寻找的布局:

<mvc:View
       xmlns:mvc="sap.ui.core.mvc"
       xmlns:layout="sap.ui.layout"
       xmlns="sap.m"
       controllerName="sap.ui.layout.sample.GridProperties.GridProperties"
       xmlns:html="http://www.w3.org/1999/xhtml">
<layout:VerticalLayout
            width="100%">

 <layout:Grid defaultIndent="L0 M0 S0" defaultSpan="L12 M6 S12" position="Center" width="80%" containerQuery="false" hSpacing="1" vSpacing="1" visible="true">
                <layout:content>
                    <layout:Grid defaultIndent="L0 M0 S0" defaultSpan="L3 M6 S6" position="Center" width="100%" containerQuery="false" hSpacing="0" vSpacing="1" visible="true">
                        <layout:content>
                            <Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
                            <Button text="Button" type="Default" iconFirst="true" width="100%" enabled="true" visible="true" iconDensityAware="false"/>
                            <Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
                            <Button text="Button" type="Default" iconFirst="true" width="100%" enabled="true" visible="true" iconDensityAware="false"/>
                            <Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
                            <Button text="Button" type="Default" iconFirst="true" width="100%" enabled="true" visible="true" iconDensityAware="false"/>
                            <Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
                            <Button text="Button" type="Default" iconFirst="true" width="100%" enabled="true" visible="true" iconDensityAware="false"/>
                        </layout:content>
                    </layout:Grid>
                    <Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
                    <layout:Grid defaultIndent="L0 M0 S0" defaultSpan="L6 M12 S12" position="Center" width="100%" containerQuery="false" hSpacing="0" vSpacing="1" visible="true">
                        <layout:content>
                            <Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
                            <Input type="Text" showValueHelp="false" enabled="true" visible="true" width="100%" valueHelpOnly="false" maxLength="0"/>
                        </layout:content>
                    </layout:Grid>
                </layout:content>
            </layout:Grid>

</layout:VerticalLayout>
</mvc:View>

这是一个简约的设计,所以它不使用边距或格式,但它应该足够你想要的。

桌面

Desktop

移动

Mobile

© www.soinside.com 2019 - 2024. All rights reserved.