Question

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

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 parent（保存在某处）将组件添加为Stack的子级。不是我想要的。
如果我隐藏了component.element，则组件会消失，但是会消失洞仍然存在。也就是说，Stack不会调整大小。
我找不到任何记录的hide（）方法组件，即使我将它包装在行，列或堆栈中。
如果我在Stack和。之间手动移动分隔符组件向下我获得我想要的东西（也就是说，给予我堆叠几乎所有高度）但没有setSize（？，？）的组合似乎以编程方式做同样的事情。

有什么想法吗？谢谢！

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

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

简单地忽略高度（新堆栈的高度始终为50％）并且淘汰模板在那里，但它不会通过淘汰赛运行。但这是另一个问题。

Answer 1

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

我发现如果你只是调用show / hide，updateSize不会做任何事情，留下一个大的空洞，所以你应该把大小设置为0 / [无论如何]。

如果将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();

Answer 2

类似的用例：

用户按下按钮
组件隐藏
用户看到空白区域，但维护的大小。

现在我希望能够关闭或隐藏Component并制作它再次按下工具栏按钮（即以编程方式）。

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

另一个用例非常简单，你以编程方式关闭一个，其周围的其他所有内容都会占用空间。把它带回来也只是把它重新加入。我不认为你指的是这个。让我知道。

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

2 个答案: