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

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

本文介绍了一个实际项目中开发需求的详细实现过程。通过使用 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 布局的详细使用，本教程之前的步骤已经做过介绍：

• SAP UI5 应用开发教程之九十一 - 如何使用客户端 JSON 模型构建一个 Master-Detail-Detail 布局中的列表页面

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