在SAPUI5中设计布局

Question

我正在设计SAPUI5中的布局，但是在选择最适合该工作的布局时遇到了麻烦。我已经尝试过Grid Layout和Simple Form，但似乎无法正确解决。总是存在一些可伸缩性问题，等等。如果有人会指出正确的方向来创建这样的布局，那对我来说将是一个很好的开始。任何提示或建议将不胜感激。

我要实现的目标是：

台式机

移动

预先感谢

Answer 1

希望这可以为您提供帮助，使用网格布局和布局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>

桌面

移动

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

Answer 2

我建议使用网格布局。我用所需的布局设计了一个小型原型：

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

这是一种简约的设计，因此它不使用任何边距或格式，但足以满足您的需求。

桌面

移动