关于 SAP UI5 控件的 Densities 话题讨论

所有属于 ​

​sap.m​

​库的控件的默认设计是Cozy密度，这意味着更大的尺寸和间距。

如果我们的应用程序只使用 ​

​sap.m​

​​库，并且 Cozy的密度正是项目所需要的，这种情况下可以跳过设置CSS类。然而，属于其他库的控件也可能支持 ​

​Cozy​

​​的设计(如sap.ui.table.Table)，但默认值可能不同(如Compact密度)。因此，如果 SAP UI5 应用程序使用属于不同库的控件，则建议设置CSS类 ​

​sapUiSizeCozy​

​.

如何根据设备尺寸的不同，智能的设置对应的 Densities CSS 类？一个解决方案如下图所示：

(1) 使用 ​

​sap.ui.define​

​​ 导入 SAP UI5 标准的 Device API，并作为输入参数 Device，参看图例 (2) .

(3) Device.system.desktop 为 true，则说明是在桌面环境下。

sap.ui.define([
  'sap/ui/core/mvc/Controller',
  'sap/ui/model/odata/v2/ODataModel',
  'sap/rules/ui/services/ExpressionLanguage',
  'sap/ui/core/util/MockServer',
  'sap/m/MessageToast',
  'sap/ui/Device'
], function (Controller, ODataModel, ExpressionLanguage, MockServer, MessageToast,) {
  "use strict";

  return Controller.extend("sap.ui5.walkthrough.Page", {

    onInit: function () {

      this.getView().addStyleClass(Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy");      

SAP UI5 控件的 Densities 检测是由相关的CSS类触发的，例如，​

​sapUiSizeCompact​

​​ 用于Compact密度，设置在你想要使用控件的 UI 区域的​

​父元素​

​上。这意味着 UI 的某些部分或 sap.m. shell 中的不同应用程序可以使用 sap.m 控件的标准密度，而其他部分可以同时使用不同的密度。