sap.m.Select 忽略 ObjectPageLayout 的 headerContent 中的 sapUiSizeCozy

Question

编辑：
github

上的错误报告 Bug Report

情况：
我正在使用 ObjectPageLayout 编写应用程序。
在 header 内容中，我有一个 sap.m.Select 和一个 sap.m.MultiComboBox，每个都有一个重置按钮。
我想将它们放在 header 中，因为它们会过滤不同选项卡的所有图表和表格。 我设置了 css class，因为它在 Workthrough 中有描述。 当由于设备类型而将样式设置为紧凑模式时，一切都很好。

问题：
当css class 舒适时， select 仍然具有紧凑的风格。 MultiComboBox 和按钮以及其他一切都采用舒适的风格。
--> 看起来很糟糕

有没有人知道，为什么 select 也没有舒适的风格？

我什至尝试在 XML 中设置 css 样式，但它不起作用。 如果我更改 MultiComboBox 的 css class 或它起作用的按钮， 但我不想因为 select 不能继续舒适而总是把所有东西都放在紧凑的...

要重现该问题，您只需在网页端创建一个新项目（UI5 版本 1.71）并将视图替换为我的：

<mvc:View
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:core="sap.ui.core"
        xmlns="sap.uxap"
        xmlns:layout="sap.ui.layout"
        xmlns:m="sap.m"
        xmlns:f="sap.f"
        controllerName="TEST.TestingSelects.controller.Home"
        height="100%"
    >

    <ObjectPageLayout
        id="ObjectPageLayout"
        enableLazyLoading="true"
        useIconTabBar="true"
        showTitleInHeaderContent="false"
    >
        <headerTitle>
            <ObjectPageHeader
                id="headerForTest"
                objectTitle="{i18n>home.title}"
            >
            </ObjectPageHeader>
        </headerTitle>
        <headerContent>


            <m:VBox>
                <m:HBox>
                    <m:Select
                        id="idStoreSelect"
                        selectedKey="{homeModel>/storeSelectKey}"
                        change="onStoreSelectChange"
                        items=""
                    >
                        <core:Item
                            key=""
                            text=""
                        />
                    </m:Select>

                    <m:Button
                        icon="sap-icon://redo"
                        press="onResetStoreButtonPress"
                        tooltip="{i18n>home.store.redo.tooltip}"
                        type="Transparent"
                    />
                </m:HBox>

                <m:HBox>
                    <m:MultiComboBox
                        id="idCatMCB"
                        selectedKeys=""
                        selectionChange="onCatMBCChange"
                        items=""
                    >
                        <core:Item
                            key=""
                            text=""
                        />
                    </m:MultiComboBox>

                    <m:Button
                        icon="sap-icon://redo"
                        press="onResetCatButtonPress"
                        tooltip="{i18n>home.cat.redo.tooltip}"
                        type="Transparent"
                    />
                </m:HBox>
            </m:VBox>



        </headerContent>
        <sections>
            <ObjectPageSection title="2014 Goals Plan">
                <subSections>
                    <ObjectPageSubSection title=" ">
                        <blocks>
                            <m:Button
                                icon="sap-icon://redo"
                                press="onResetCatButtonPress"
                                tooltip="{i18n>home.cat.redo.tooltip}"
                                type="Transparent"
                            />
                        </blocks>
                    </ObjectPageSubSection>
                </subSections>
            </ObjectPageSection>

            <ObjectPageSection title="Personal">
                <subSections>
                    <ObjectPageSubSection title="Connect">
                        <blocks>
                            <m:Button
                                icon="sap-icon://redo"
                                press="onResetCatButtonPress"
                                tooltip="{i18n>home.cat.redo.tooltip}"
                                type="Transparent"
                            />
                        </blocks>
                    </ObjectPageSubSection>

                    <ObjectPageSubSection id="paymentSubSection" title="Payment information">
                        <blocks>
                            <m:Button
                                icon="sap-icon://redo"
                                press="onResetCatButtonPress"
                                tooltip="{i18n>home.cat.redo.tooltip}"
                                type="Transparent"
                            />
                        </blocks>
                    </ObjectPageSubSection>
                </subSections>
            </ObjectPageSection>
        </sections>
    </ObjectPageLayout>
</mvc:View>

硬设置css样式时select代码：

<m:Select
    id="idStoreSelect"
    class="sapUiSizeCozy"
    selectedKey="{homeModel>/storeSelectKey}"
    change="onStoreSelectChange"
    items=""
>
  
    <core:Item
        key=""
        text=""
    />
</m:Select>

Answer 1

要固定 Select 的宽度，您可以添加聚合 layoutData

<m:layoutData>
    <m:FlexItemData growFactor="1" />
</m:layoutData>

要固定Button的高度，您需要设置内容密度（如官方Walkthrough (Step 37)所述）。

基本上，您在 Component.js 中提供了一个方法，其中 returns 正确的密度（并且不要忘记在顶部导入 "sap/ui/Device"！）

getContentDensityClass : function () {
    if (!this._sContentDensityClass) {
        if (!Device.support.touch) {
            this._sContentDensityClass = "sapUiSizeCompact";
        } else {
            this._sContentDensityClass = "sapUiSizeCozy";
        }
    }
    return this._sContentDensityClass;
}

然后在你的根视图的控制器中（定义在manifest.json > sap.ui5 > rootView）你可以调用这个方法

onInit: function() {
    this.getView().addStyleClass(
        this.getOwnerComponent().getContentDensityClass()
    );
}

我整理了一个小样本： https://plnkr.co/edit/h1JZiyYrWLmuck46

Answer 2

SAP 修复了 UI5 bug with the version 1.95 (commit 4c7fffe)。 在这里您可以看到，sap.m.Select 不再在 ObjectPageHeaderContent 中设置自己的高度，而是根据密度 class:

应用高度

UI5≥1.95

UI5≤1.94

---

截图来自：https://plnkr.co/edit/gTxIx9BvTChZovBZ?preview