通过在设置紧凑型 Null 时删除 React Grid 布局的空间来修复布局

Question

我正在使用 react-grid-layout 包进行布局设计。

我想对在布局上移动的免费项目使用 compactType=null 配置。但是，当我更改尺寸或连续移动项目时，屏幕上会出现大间隙，如屏幕截图所示。

有什么方法可以通过移动项目后消除间隙来固定布局？

Answer 1

好的，我通过修改 onLayoutChange 函数

中的布局数组找到了解决方案

 <ResponsiveGridLayout
                        layouts={{ lg: layout }}
                       
                        cols={{
                            lg: colCount,
                            md: colCount,
                            sm: colCount,
                            xs: colCount,
                            xxs: colCount
                        }}
                        rowHeight={46}
                        isResizable={isAlignFieldsModeOn}
                        isDraggable={isAlignFieldsModeOn}
                        isBounded={isAlignFieldsModeOn}
                        onLayoutChange={newLayout => {
                            if (isAlignFieldsModeOn) {
                                let _layout = newLayout;

                                if (compactType === null) {
                                    const fixedLayout = newLayout.map(item => {
                                        // the row before the field row
                                        const upperRow = Math.max(item.y - 1, 0);

                                        const upperRowIsEmpty =
                                            newLayout.filter(f => f.y === upperRow).length === 0;

                                        // If there are no fields on the upper row then move up the fields to the upper row.
                                        if (upperRowIsEmpty) {
                                            return {
                                                ...item,
                                                y: upperRow
                                            };
                                        }
                                        return item;
                                    });

                                    _layout = [...fixedLayout];
                                }

                                // Set the new layout for instant effect
                                setLayout(_layout);
                            }
                        }}
                        margin={[3, 7]}
                        compactType={compactType}
                        useCSSTransforms={false}
                        id={tab?.id}
                        key={tab?.id}
                        measureBeforeMount
                        width={width}
                        preventCollision={false}
                >
                    {generateForm}
                </ResponsiveGridLayout>

通过在设置紧凑型 Null 时删除 React Grid 布局的空间来修复布局

Fixing Layout by Removing Spaces of React Grid Layout When Set Compact Type Null

reactjs

react-grid-layout