GoldenLayout，如何hide/show组件？

Question

我有一个基于 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 父级（保存在某处）将组件添加为 Stack 的子级。不是我想要的。
如果我隐藏 component.element，组件就会消失，但是孔仍然存在。也就是说，Stack 不会调整大小。
我在组件，即使我将它包装在行、列或堆栈中。
如果我手动移动 Stack 和组件方式下降我得到了我想要的（也就是说，给堆叠几乎所有高度）但没有组合 setSize(?, ?) 似乎以编程方式执行相同的操作。

有什么想法吗？谢谢！

更新： 如果我将组件包装到另一个 Stack 中，容器 Column 不会消失，所以我可以将其添加回去：

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

只是忽略了高度（新堆栈的高度始终为 50%）并且存在淘汰模板，但不是运行通过淘汰。但这是另一个问题。

Answer 1

一个类似的用例：

用户按下了一个按钮
组件隐藏
用户看到空白区域但大小保持不变。

Now I want to be able to close or hide the Component and made it reappears pushing a toolbar button (i.e. programmatically).

在这种情况下，我要做的是在其中包含一个堆栈的列或行。通过 headerhieght itemconfig 维度设置隐藏堆栈 headers。这个栈里面有 2 个项目，其中一个是空的。然后，当用户单击按钮时，您将空项目设置为活动状态。然后，当您希望它重新出现时，只需将原件设置为活动状态即可。

另一个用例非常简单，您以编程方式关闭一个，它周围的所有其他东西都会调整大小，占用 space。把它带回来也只是把它加回去。我不认为你指的是这个。让我知道。

Answer 2

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

我发现如果你简单地调用 show/hide，updateSize 不会做任何事情，留下一个很大的空洞，所以你也应该将大小设置为 0/[whatever]。

如果将size设置为0，调用updateSize()而不调用hide()，元素会变成细条。

为了获得完整效果，您必须同时执行这两项操作。

    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();

GoldenLayout，如何hide/show组件？

GoldenLayout, how to hide/show component?

jquery

golden-layout