设计列表-明细应用程序

学习目标

  • 使用 sap.f.FlexibleColumnLayout 设计列表-明细应用程序。

在 SAPUI5 中，您也可以实现列表-明细模式。遵循该模式的应用程序使用一个划分为两个或三个区域的布局：一个列表区域和两个明细区域。列表区域显示用户可用的项目。第一个明细区域显示在列表区域中所选项目的详细信息。有时该区域除其他数据外还包含一个项目列表。用户可以从该列表中选择一个项目，以在第二个明细区域中获取更多信息。

在本单元中，我们将仅关注与上一单元“实现全屏应用程序”不同的设计和实现方面。

sap.f.FlexibleColumnLayout 控件

对于某些用例而言，在通常的逐页导航之上实现页面之间的流畅导航非常重要。因此，SAPUI5 提供了 sap.f.FlexibleColumnLayout 控件。灵活列布局提供了最多包含三列的多种布局。用户可以展开其想要聚焦的列、在不同布局之间切换，并以全屏模式查看最右侧的列。

在本视频中，请了解如何使用包含三列的 sap.f.FlexibleColumnLayout。

视频：本节含 SAP 官方视频（视频 ID 1_xe8utc0h），需在 learning.sap.com 在线观看。

MVC 方法

使用 sap.f.FlexibleColumnLayout 控件的应用程序设计也将从一个通常命名为 App 的视图开始。然而，与全屏应用程序不同，App 视图的实现不仅仅包含一个 sap.m.App 类型的控件。sap.f.FlexbileColumnLayout 将被添加到 sap.m.App 中。

App.view.xml 的结构，包含一个 FlexiblecolumnLayout 以及分别对应 begin、mid 和 end Column Pages 的三个页面。

布局控件的 beginColumnPages、midColumnPages 和 endColumnPages 聚合用于聚合内容实体。

内容实体可以是 sap.f.DynamicPage、sap.ui.core.View、sap.m.Carousel 类型，或任何其他具有全屏/页面语义的控件。

使用列表-明细模式

何时使用列表-明细模式：

您需要以最少的导航快速查看和处理不同的项目。

何时不使用列表-明细模式：

  • 您需要为项目列表提供复杂的过滤器。

  • 您需要查看列表中每个项目的不同属性，并在项目之间比较这些值。

  • 您想要显示单个对象。不要使用列表来显示同一对象的不同侧面。