SAP UI5 里 FlexBox 的使用方法
ScrollContainer 的使用方式:
ScrollContainer 是一个控件,可以在有限的屏幕区域内显示任意内容,并提供滚动以使所有内容都可访问。注意,为了避免影响用户使用体验,不要嵌套沿相同方向滚动的滚动区域。例如,在启用滚动的页面控件(Page Control)内垂直滚动的 ScrollContainer——这种多重滚动条会让用户无所适从。
sap.m.FlexBox 控件允许开发布局以适应可用空间,并避免未使用的空间或溢出。
用户界面通常必须适应不同的屏幕尺寸。 因此,以单一布局可靠地适合可用屏幕空间的方式构建用户界面,很多时候会给开发人员带来挑战。 这种情况下可以嵌套 FlexBox 控件以创建更复杂的布局。
FlexBox 控件的两个主要用途是:
- 二维布局
- 实现灵活的布局
给 FlexBox 添加子控件,有下列两种方式:
- addItem 方法
var oMyFlexbox = new sap.m.FlexBox();
oMyFlexbox.addItem( new sap.m.Button({text: "Button 1"}) );
oMyFlexbox.addItem( new sap.m.Button({text: "Button 2"}) );
- 使用 items 聚合:
var oMyFlexbox = new sap.m.FlexBox({
items: [
new sap.m.Button({text: "Button 1"}),
new sap.m.Button({text: "Button 2"})
]
});
效果如下:
一些影响布局的属性需要在 FlexBox 控件中设置。 其他属性可以附加到通过 layoutData
聚合放置在 FlexBox 内的控件。 例如,布局方向在 FlexBox 中通过如下属性设置:
var oMyFlexbox = new sap.m.FlexBox({
items: [
new sap.m.Button({text: "Button 1"}),
new sap.m.Button({text: "Button 2"})
],
direction: "Column"
});
效果如下:
FlexBox 控件是 CSS 中灵活框布局属性的包装器。控件呈现器在适当的 HTML 元素上设置 CSS 属性(包括必要时的前缀版本)。实际的布局是由浏览器完成的。
开发人员放置在 FlexBox 控件中的控件分别包装在 DIV 或 LI 元素中,具体取决于 renderType 属性。 所有元素都放置在另一个 DIV 或 UL 容器内,同样取决于 renderType。 如果使用 Bare 作为 renderType,则元素将在没有包装 HTML 标记的情况下呈现。 最外层的元素代表所谓的弹性容器,而其子元素是弹性项目。 上述所有示例生成的 HTML 结构如下所示:
<div class="sapMFlexBox">
<div class="sapMFlexItem">
<button id="__button1">Button 1</button>
</div>
<div class="sapMFlexItem">
<button id="__button2">Button 2</button>
</div>
</div>
相关文章
- 132. SAP UI5 Simple Form 控件的使用方法介绍
- SAP UI5 应用 FlexBox 控件 growFactor 的使用方法
- SAP UI5 SimpleForm 里在水平方向显示多组 Form 元素的实现方法试读版
- SAP UI5 应用开发教程之六十二 - 基于 OData V4 的 SAP UI5 表格控件使用方法介绍试读版
- SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods
- SAP UI5 应用 filter 功能不能正常工作时的单步调试方法
- SAP ui5 ABAP repository handler class的 get_webcontent方法
- SAP UI5里xml fragment getContent方法的实现
- SAP ABAP 方法调用里传值(Pass Value)和传引用(Pass Reference)的区别试读版
- SAP ABAP 一个有用的程序正确性辅助工具,Checkpoint group 的使用方法介绍试读版
- SAP ABAP Application Log 的使用方法
- SAP ABAP 系统进行数据库表查询的几种常用方法的试读版
- 一种获取SAP HANA数据库表条目数的另类方法
- SAP ABAP实用技巧介绍系列之已知某个signature查找定义的方法
- SAP CRM中间件调试的一些重要方法
- SAP CRM WebClient UI控制器方法DETACH_STATIC_OVW_VIEWS的作用
- SAP UI5 应用开发教程之一百零三 - 如何在 SAP UI5 应用中消费第三方库试读版
- SAP UI5 应用开发教程之四十二 - SAP UI5 自带的 Diagnostics 诊断工具使用方法介绍
- 各种 SAP 产品的自定义 UI 创建和集成方法一览
- 一个查看 SAP UI5 控件所有公有方法的小技巧