SAP UI5 FlexibleColumnLayout 控件介绍

简介: SAP UI5 FlexibleColumnLayout 控件介绍

该控件位于命名空间 sap.f 之下。


该控件通过在不同的列中显示最多三页来实现主-细节-细节范式。


该控件在逻辑上类似于 sap.m.SplitContainer,不同之处在于它能够处理三列(称为Begin, Mid和End)而不是两列(Master, Detail)。这三列的宽度是可变的。


有几种可能的布局可以通过控件的API进行更改,也可以由用户通过布局箭头进行更改。


在内部控制使用三个 sap.m.NavContainer 实例,从而形成三列。


这三个实例如下图所示:

在需要同时显示多个逻辑层次的相关信息的应用程序中使用这个控件(例如,列表项、项、子项等)。从某种意义上说,该控件是灵活的,应用程序可以将用户的注意力集中在一个特定的列上,使其变得更大,甚至是全屏。


这些列可以通过 beginColumnPages、midColumnPages 和 endColumnPages 聚合访问。


通过方法 getBeginColumnPages 可以访问 beginColumnPages,其他的聚合以此类推。

这三列的相对大小和可见性是根据 layout 属性的值确定的。

由于用户交互而对布局的更改会通过 stateChange 事件传达给应用程序。

该控件根据设备大小和当前布局自动显示可能的最大列数。应用程序不需要考虑当前设备/屏幕的大小,但只需要添加内容到列和改变布局属性的值。

Layout 属性:

虽然FlexibleColumnLayout可以同时显示2或3个页面,但它们永远不能有相同的宽度(50%/50%或33%/33%/33%)。其中一个页面总是更大(展开),甚至占据控件的全宽度(全屏)。这是有意为之的,因为用户应该清楚地知道在任何给定的时刻应该关注什么,例如,一个项目列表、一个特定的项目、一个项目的详细信息。

关于 FlexibleColumnLayout 的更多介绍,请参考我的 SAP UI5 教程:SAP UI5 应用开发教程之九十七 - 如何使用客户端 JSON 模型构建一个 Master-Detail-Detail 布局中的明细页面

相关文章
|
2月前
|
API
在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
【2月更文挑战第28天】 在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
49 1
|
2月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
159 0
|
2月前
|
算法 API C++
【Qt UI】QT 窗口/控件置顶方法详解
【Qt UI】QT 窗口/控件置顶方法详解
165 0
|
2月前
|
算法 前端开发 C++
【Qt UI相关】Qt设置窗体或控件的背景色透明
【Qt UI相关】Qt设置窗体或控件的背景色透明
113 0
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
2月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
28天前
|
API Apache C#
推荐2款开源、美观的WinForm UI控件库
推荐2款开源、美观的WinForm UI控件库
|
2月前
|
XML Java Android开发
Android之UI基础控件
Android之UI基础控件
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性