layout - 在 SAPUI5 中设计布局

Question

我正在 SAPUI5 中设计布局，但我无法为工作选择最合适的布局。我试过 Grid Layout和一个 Simple Form ，但我似乎无法让他们正确。总是存在一些可伸缩性问题等。如果有人能给我指出正确的方向来创建这样的布局，那对我来说将是一个非常好的开始。任何提示或建议将不胜感激。

我想要实现的是:

桌面

移动

提前致谢

Answer 1

希望这对您有所帮助，使用 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" 命名空间。