Jquery GoldenLayout，如何隐藏/显示组件？

我有一个基于GoldenLayout（1.5.9）的应用程序。布局是包含两列的行。 下面是我感兴趣的专栏的配置

let config = {
    content: [
        {
            type: "row",
            content: [
                {
                    type: "column",
                    width: 31,
                    content: [
                        {
                            type: "stack",
                            isClosable: false,
                            content: [...]
                        },
                        {
                            type: "component",
                            height: 30,
                            title: "Filters",
                            componentName: "templateComponent"
                        }
                    ]
                },
                ...
            ]
        }
    ]
}

现在，我希望能够关闭或隐藏组件，并使其重新出现 按工具栏按钮（即以编程方式）。我做了各种不成功的尝试：

如果使用x按钮关闭组件，则父列 神奇地消失，因此组件上的后续addChild 父级（保存在某处）将组件添加为堆栈的子级。 不是我想要的

如果隐藏component.element，该组件将消失，但 洞仍然存在。也就是说，堆栈不会调整大小

我在上的任何地方都找不到记录在案的hide（）方法 组件，即使我将其包装成行、列或堆栈

如果我手动在堆栈和 我得到了我想要的东西（也就是说，给 堆叠几乎所有高度），但没有设置大小（？，）的组合 似乎以编程的方式做同样的事情

有什么想法吗？ 谢谢

更新： 如果我将组件包装到另一个堆栈中，容器列不会消失，因此我可以将其添加回：

{
    type: "stack",
    height: 30,
    id: "filtersFrame",
    isClosable: true,
    content: [
        {
            type: "component",
            title: "Filters",
            componentName: "templateComponent",
            componentState: { template: "filter-template" }
        }
    ]
}

只需忽略高度（新堆栈的高度始终为50%），敲除模板就在那里，但它不会在敲除中运行。但这是另一个问题。

类似的用例：

用户按下按钮

组件隐藏

用户看到空白区域，但大小保持不变

现在，我希望能够关闭或隐藏组件，并使其 按工具栏按钮（即以编程方式）重新出现

在这种情况下，我要做的是让一列或一行中有一个堆栈。通过

headerhight

itemconfig维度设置隐藏堆栈标题。此堆栈中有2个项目，其中一个为空。然后，当用户单击按钮时，您将空项设置为活动。然后，当您希望它重新出现时，只需将原始设置为活动

---

另一个用例非常简单，您可以通过编程方式关闭一个用例，而它周围的所有内容都会调整大小以占用空间。把它带回来也就是把它放回去。我想你指的不是这个。让我知道。

我遇到了同样的问题，并找到了一个简单的解决方案：注意，我使用的是Angular5，所以这是在typescript中，但代码很容易翻译成vanilla JS

我发现，如果您只调用show/hide，updateSize不会做任何事情，留下一个很大的空洞，因此您也应该将大小设置为0/[whatever]

如果将大小设置为0并在不调用hide（）的情况下调用updateSize（），则元素将变为细条

你必须两者兼而有之，才能达到最佳效果

    let smartFormsRow = this._goldenLayout.root.getItemsById("smartformsrow");
    var isHidden = smartFormsRow[0].config.height == 0;
    if (isHidden) {
        smartFormsRow[0].element.show(); //jquery hide
        smartFormsRow[0].config.height = 30; //30%
    } else {
        smartFormsRow[0].element.hide(); //jquery show
        smartFormsRow[0].config.height = 0;
    }

    this._goldenLayout.updateSize();

---

第二个用户案例正是我所做的。问题是，添加的后堆栈忽略了高度设置（同时，淘汰问题已经解决）。我不知道你说的“忽略高度”是什么意思。你是说当你把它重新添加到堆栈中时，它会与其他选项卡重叠吗？如果您正确地添加回内容，则永远不会发生这种情况，因为添加子项应调用调整所有容器大小的

layout.resize（）

函数。至于问一个新问题，我会说是的，尤其是当它是一个不同的问题时。我的意思是，重新添加的堆栈具有

高度：30

（或任何其他百分比），并且始终占据50%的高度。当我创建布局时，堆栈遵循

高度：30

配置选项。只有在关闭并重新添加高度时，才会忽略高度。问题转移到“GoldenLayout:添加子项时忽略高度”是否显示用于隐藏/显示容器的代码？当然！查看关闭容器时，我依赖于X标题按钮。要重新打开它，请参见另一个问题。它可以工作！我忘记添加

[0]

。但有一件奇怪的事情：我必须将高度设置为21，以使最终高度等于初始构造的高度，在初始构造中它被设置为30。这很奇怪。它周围的部分有多大？重新显示后，它们的大小加起来是70%还是79%？打印

myLayout.toConfig（）

after

updateSize（）

为恢复的堆栈提供：

高度：29.577464788732392

和

70.4225352112676

。因此，不知何故，还原堆栈的高度已从21缩放到~30。在另一列中（这次可关闭堆栈位于下方，在上一列中已关闭的堆栈位于上方），我希望高度=27，但必须将其设置为21.4。

updateSize（）之后的两个高度是：
70.02801120448179
和
29.9719887955182
。距离27更远，但视觉效果与原始设置27相同。如果我将高度调整到19，我会看到较低的堆叠高度为27，但从视觉上看，它比初始设置短得多。这很奇怪。我没有经历过类似的事情。在调用updateSize（）之前，可以设置两个大小（30和70），看看它能做什么。对不起，希望我能给你一个答案。