3

我有一个基于 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"
                        }
                    ]
                },
                ...
            ]
        }
    ]
}

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

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

  2. 如果我隐藏了 component.element，组件就会消失，但会留下一个洞。也就是说，堆栈不会调整大小。

  3. 我在组件上的任何地方都找不到文档化的 hide() 方法，即使我将它包装在行、列或堆栈中也是如此。

  4. 如果我手动将 Stack 和 Component 之间的分隔符向下移动，我会得到我想要的（也就是说，几乎所有的高度都给 Stack）但是 setSize(?, ?) 的组合似乎没有以编程方式做同样的事情。

任何想法？谢谢！

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

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

只是高度被忽略（新堆栈的高度始终为 50%）并且淘汰赛模板在那里，但它没有通过淘汰赛运行。但这是另一个问题。

4

2 回答 2

1

一个类似的用例：

  1. 用户按下按钮
  2. 组件隐藏
  3. 用户看到空白区域但保持大小。

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

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

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

于 2017-12-17T16:22:21.077 回答
1

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

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

如果将大小设置为 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();
于 2018-03-22T21:53:53.273 回答