我正在设计SAPUI5中的布局,但是在选择最适合该工作的布局时遇到了麻烦。我已经尝试过Grid Layout和Simple Form,但似乎无法正确解决。总是存在一些可伸缩性问题,等等。如果有人会指出正确的方向来创建这样的布局,那对我来说将是一个很好的开始。任何提示或建议将不胜感激。
我要实现的目标是:
预先感谢
答案 0 :(得分:4)
希望这可以为您提供帮助,使用网格布局和布局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"
名称空间。
答案 1 :(得分:0)
我建议使用网格布局。我用所需的布局设计了一个小型原型:
<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>
这是一种简约的设计,因此它不使用任何边距或格式,但足以满足您的需求。
桌面
移动