我正在设计SAPUI5中的布局,但是我在为工作挑选最合适的布局时遇到了麻烦。我尝试了一个Grid Layout和一个Simple Form,但我似乎无法让他们正确。总有一些可扩展性问题等。如果有人会指出我正确的方向来创建这样的布局,那对我来说这将是一个非常好的开始。任何提示或建议都将受到大力赞赏。
我想要实现的是:
提前致谢
希望这对您有所帮助,使用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"
名称空间。
我建议使用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>
这是一个简约的设计,所以它不使用边距或格式,但它应该足够你想要的。
桌面
移动