SAP UI5 ObjectPageLayout 控制元件允許應用程式輕鬆顯示與業務物件(Business Object)相關的資訊的佈局。

ObjectPageLayout 佈局由一個抬頭區域(標題和內容)、一個可選的 `anchor bar` 區域和 `block content`區域組成。

其中 block content 被包裹在 sections 和 子 sections 中，這些 section 共同組成了 BO 的結構化資訊顯示。

換言之，ObjectPageLayout 控制元件用於將物件頁面的所有部分放在一起——標題、可選的錨條和節/子節區域。

下圖是一個例子：

- headerTitle
- headerContent
- sections
- subSections

![](https://img-blog.csdnimg.cn/img_convert/88887c580a85661849a159a546c596a6.png)

# header

ObjectPageLayout實現捕獲頭( `snapping header`)的概念。這意味著頁首的上部(頁首標題)始終是可見的，而下部(頁首內容)可以滾動出檢視。
標題顯示在標題的頂部，並且始終在頁面可滾動內容的上方可見。它包含物件的標題和最突出的細節。
頁首內容與頁面內容一起滾動，直到它消失(摺疊頁首)。當滾動回頂部時，它再次變得可見(擴充套件標題)。它包含物件的所有附加資訊。
 
如下圖所示：
![](https://img-blog.csdnimg.cn/img_convert/6a60d9238690fce5b2e610426a5acc27.png)

# Anchor Bar

中文翻譯為錨欄，這是一個自動生成的內部選單，它顯示了各個節和子節的標題，並允許使用者滾動到各自的節和子節內容。

# Sections, Subsections, Blocks

這些出現在頁首下方的頁面內容，由結構成節和子節的塊組成。

如下圖所示，定義了 `General Information` 和 `Suppliers` 兩個 section，分別各自包含一個 `SimpleForm` 和 `Table`：

![](https://img-blog.csdnimg.cn/img_convert/d3e4b38ee81e33ef8f6373ae386a485e.png)

# ObjectPageLayout 的使用場景

- 使用者需要檢視、編輯或建立具有所有詳細資訊的條目。
- 使用者需要了解物件的概況，並與物件的不同部分進行互動。

最後執行時的效果如下：
![](https://img-blog.csdnimg.cn/img_convert/6b4de8436ecdfbcce82dcbf6b7f53a85.png)

SAP UI5 ObjectPageLayout 控制元件使用方法分享

相關文章