2

我在显示/隐藏类似于此问题的组件时遇到问题：

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

我的布局如下：

let config: Config = {
        settings: {
            showCloseIcon: false,
            showPopoutIcon: false
        },

        content: [
            {
                type: 'column',
                content: [
                    {
                        type: 'row',
                        height: 25,
                        content: [
                            {
                                title: 'A react component',
                                type: 'react-component',
                                component: 'searchContainer'
                            }
                        ],
                    },
                    {
                        type: 'row',
                        height: 75,
                        content: [
                            {
                                title: 'A react component',
                                type: 'react-component',
                                component: 'leftContainer'
                            },
                            {
                                title: 'Another react component',
                                type: 'react-component',
                                component: 'rightContainer'
                            }
                        ],
                    },
                ],
            }],
    };

我有一个 hideSearchBar 和 showSearchBar 函数，如下所示：

   function hideSearchBar() {
        let container: ContentItem = layout.root.contentItems[0];

        container.contentItems[1].config.height = 100;
        container.contentItems[1].contentItems[0].config.height = 100;
        container.contentItems[1].contentItems[1].config.height = 100;
        container.config.height = 0;
        container.contentItems[0].element.hide();
        layout.updateSize();
        //layout.updateSize($(window).width(), $(window).height());
    }

    function showSearchBar() {
        let container: ContentItem = layout.root.contentItems[0];

        container.contentItems[0].element.show();
        layout.updateSize();
    }

showSearchBar 完美运行并正确显示网格的两行。

hideSearchBar 正确隐藏了第一行，但留下第二行不占用整个屏幕。我已经尝试在不同的地方将 config.height 设置为 100，但无法让它工作 - 屏幕底部顶行的大小有一个间隙。

非常感谢任何帮助。

4

2 回答 2

1

我使用不同的布局配置解决了这个问题，其中搜索栏最初设置为 0：

let config: Config = {
            settings: {
                showCloseIcon: false,
                showPopoutIcon: false
            },

            content: [
                {
                    type: 'column',
                    content: [
                        {
                            type: 'row',
                            height: 0,
                            content: [
                                {
                                    title: 'A react component',
                                    type: 'react-component',
                                    component: LayoutComponent.SearchContainer
                                }
                            ],
                        },
                        {
                            type: 'row',
                            height: 100,
                            content: [
                                {
                                    title: 'A react component',
                                    type: 'react-component',
                                    component: LayoutComponent.WindowContainer
                                },
                                {
                                    title: 'Another react component',
                                    type: 'react-component',
                                    component: LayoutComponent.CollectionContainer
                                }
                            ],
                        },
                    ],
                }],
        };

showSearchBar 看起来像这样：

function showSearchBar() {
        let container: ContentItem = layout.root.contentItems[0];

        if (searchRowHeight == 0) {
            container.contentItems[0].config.height = SEARCH_HEIGHT;
        }
        else {
            container.contentItems[0].config.height = searchRowHeight;
            container.contentItems[1].config.height = containerRowHeight;
        }
        container.contentItems[0].element.show();
        layout.updateSize();
    }

和 hideSearchBar 看起来像这样：

function hideSearchBar() {
        let container: ContentItem = layout.root.contentItems[0];

        container.contentItems[0].config.height = 0;
        container.contentItems[1].config.height = 100;
        container.contentItems[0].element.hide();
        layout.updateSize();
    }

总之，配置使 searchBar 隐藏，当它打开时，高度被重新调整。

我使用事件侦听器来检查高度变化：

layout.on('stateChanged', () => {
        let updateConfig: Config = layout.toConfig();

        if (updateConfig.content[0].content[0].height != 0) {
            searchRowHeight = updateConfig.content[0].content[0].height;
            containerRowHeight = updateConfig.content[0].content[1].height;
        }

高温高压

于 2021-02-18T18:35:29.530 回答
0

扩展@jmc42 的答案。很好的解决方法，但是一旦它不做的事情就是在窗格上展开到 100% 并将另一个折叠到 0% 时隐藏拆分器。

作为一种解决方法，我想到了 2 个选择：

  1. 当窗格被隐藏时，在同一 div 中获取表示分隔条的相邻元素并将其隐藏。

  2. 当窗格被隐藏并且您检测到调整大小时，始终将顶部窗格的展开重新应用到 100%，将底部窗格重新应用到 0%。

我选择了选项 2，因为它实现起来更简单，而且我拥有的是：

if (updateConfig.content[0].content[0].height != 0) {
    searchRowHeight = updateConfig.content[0].content[0].height;
    containerRowHeight = updateConfig.content[0].content[1].height;
}
else {
    let container = gbl_Layout.root.contentItems[0].contentItems[0];
    container.contentItems[0].config.height = 100;
    container.contentItems[1].config.height = 0;
    layout.updateSize();
}

我的“if”语句条件比上面的条件更复杂，因为我正在执行其他检查，但这会给你它的要点。对我来说效果很好。

于 2021-03-10T00:48:56.453 回答