GoldenLayout隐藏/显示组件(再次)

Question

我在显示/隐藏类似以下问题的组件时遇到了问题：

GoldenLayout, how to hide/show component?

我的布局如下：

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，但都不能正常工作--屏幕底部有一个顶行大小的间隙。

任何帮助都非常感谢。

Answer 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;
        }

HTH

Answer 2

扩展@jmc42的答案。很好的变通方法，但是有一次它不做的事情是隐藏拆分器，当在窗格上展开到100%，而另一个折叠到0%。

作为一种变通办法，我想到了两个选择：

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

1. 当窗格隐藏时，如果您检测到调整大小，请始终将顶部窗格重新应用为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‘语句条件比上面的条件更复杂，因为我正在执行其他检查，但这将给你提供它的要点。对我来说效果很好。