通过 SAP UI5 IconTabBar 控件结合 FlexibleColumnLayout 实现多页面 Master-Detail 布局试读版

发布时间 2023-11-07 13:40:21作者: JerryWang_汪子熙

本文也是来源于网络上一位朋友的咨询,这是这位朋友实际项目中的真实需求。

本文介绍了一个实际项目中开发需求的详细实现过程。通过使用 SAP UI5 IconTabBar 控件,我们可以让逻辑上属于不同业务范畴的界面,通过点击对应的 Icon,以切换的方式,在同一块屏幕区域显示出来。

IconTabBar 结合 Flexible Column Layout 是一种比较专业和高级的 Fiori Master-Detail 布局实现方式。本文给出了这种布局实现方式的最佳实践步骤,对于实现者面临的常见问题,比如 Column 元素不能正常显示的问题,也给出了问题分析和解决方案。

我们先看按照需求实现后的实际效果:业务数据按照逻辑从属关系,划分为四个区域,比如:

  1. 抬头字段
  2. 行项目字段
  3. 产品明细字段
  4. 备注字段

这四个区域的界面,分别通过 SAP UI5 IconTabBar 控制。我们可以看到 IconTabBar 的展现形式是 4 个图标,每个图标下面是一个区域的界面展示,通过反复点击可以将该区域的界面进行展示和折叠隐藏。

我们点击第二个 Icon 后,显示的界面,是一个 Flexible Column Layout 布局,如下图所示。这个布局使用了 beginColumnPages 和 midColumnPages 两列,二者占据整个屏幕的宽度分别为 1/3 和 2/3.在这里插入图片描述

点击这两列分隔区域的按钮,可以将两列的宽度进行互换,效果如下图所示:


关于 Flexible Column Layout 布局的详细使用,本教程之前的步骤已经做过介绍:

下面是这个需求的详细实现步骤。