Разработка макета в SAPUI5

Question

Я разрабатываю макет в SAPUI5, но у меня возникают проблемы при выборе наиболее подходящего макета для работы. Я попробовал Grid Layout и Simple Form , но я не могу понять, как они правильно. Всегда есть проблемы с масштабируемостью и т. Д. Если кто-нибудь укажет мне правильное направление для создания такого макета, это будет действительно хорошим началом для меня. Любые советы или предложения будут высоко оценены.

То, что я пытаюсь достичь, это:

Desktop

Мобильный телефон

Заранее спасибо

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>

Desktop

Мобильный телефон

Примечание. Включите xmlns:l="sap.ui.layout" пространство имен.

Answer 2

Я бы предложил использовать макет 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

Мобильный телефон