案例26.使用grid layout将ui element放置在不同的位置左右缩进等

1、26.Grid layout 将 UI element 放置在不同的位置(左右缩进等)基本信息：修改： 模板说明 1.尽量全部使用中文，特殊的专业术语表明英文原版内容，方便公司交流。2.认真填写文档和关键字，使得文档内容一目了然。根据各个案例的不同内容替换掉括号里面的内容。文档的每一部分尽量填写完整，原则是初学者能够看的懂，方便公司用此文档培训。图文并茂，讲解清楚明白。版本版本作者创建日期备注1.0版本（1.0）创建时间（2011 年 6 月 8 日）作者（吕轻轻）SAP 版本（SCC 6.0）文档状态（草稿）最后修改者（某某）最后修改时间（x 年 xx 月 xx 日）关键字（Table Ta

2、bleSummaryCell subtotal）目录基本信息：1修改一、二、三、四、五、六、七、：.1场景描述3应用范围3关键知识3开发步骤补充4要点说明14深入学习资料.14相似实例补充14一、 场景描述GridLayout 是网格式布局，它把父组件分成一个表格，默认情况下每个子组件占据一个单元格的空间， 每个子组件按添加到父组件的顺序排列在表格中， colCount 属性表示该表格有几列，同时每个子组件还可以设置 paddingLeft/paddingRight 属性来调整子组件的左/右内边距。使用 GridLayout 布局来实现如下效果：图 1二、应用范围使用 GridLayout将

3、UI Element 放在容器的不同位置。三、关键知识1.在该案例中主要用到了 group 和 button 两种 UI Element,三个 button Element 放在Group 中。Group 中主要有如下主要属性 Layout（布局类型）、height（高度）、width（宽度）、colCount（容器的列数），下面是 colCount 为 1 和 2 时的效果对比图，图 22. 对于放在group 里面的UI Element 可以通过设置paddingLeft/paddingRight 属性来实现左右缩进。下面是 button1、button2、button3 的 paddin

4、gLeft 分别为 10px、20px、30px时的效果图，图 3四、 开发步骤补充1. se80打开 Object ZWDA_GRIDLAYOUT26 .Navigator ,选择 Web Dynpro Comp./f. 类型 ，创建图 4ZWDA_GRIDLAYOUT26 创建view，命名为 MAIN.2.图 53.打开 MAIN，并切换到 Layout 页签，并添加 1 个 Group UI Element 和 3 个 button（GroupLayout 设置为 GridLayout,三个 button 的 paddingLeft 依次设置为 10px,20px,30px），以下是属性设置图和效果图：图 6图 7图 8图 9图 10五、要点说明原案例显示的是一些 view，让学习者第一眼看不出该文档想说明的是什么问题，以为重点是 rowRepeator,本文档突出了 GridLayout 这一知识点，同时扩展了设计的几个重要属性的例子说明。六、深入学习资料（此案例涉及内容的深入学习资料的说明，就像 SAP 标准文档里面的“RelatedContent”。等的内容。）的地址可以是 SAP Help Portal、SDN、Notes、SAP、标准、Hand KMNET312_UI_Development_with_Web_Dynpro_for_ABAP 1