Layout 在SAPUI5中设计布局

我正在用SAPUI5设计一个布局，但是我在为工作挑选最合适的布局时遇到了麻烦。我试过a和a，但似乎都不对。总有一些可伸缩性问题等。如果有人能给我指出创建这样一个布局的正确方向，那对我来说将是一个非常好的开始。任何提示或建议都将不胜感激

我试图实现的是：

桌面

流动的

---

提前感谢

我建议使用网格布局。我设计了一个小型原型，其布局符合您的要求：

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

这是一个极简的设计，所以它不使用边距或格式，但它应该足以满足您的需要

桌面

流动的

---

希望这对您有所帮助，使用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>

桌面 可移动的

---

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

谢谢您的回答！按钮相当大，当我加上一定的宽度时。空间变得太大了。。。有什么好补充的吗？可以帮助