QML中Grid内元素能否填充空白并独立拖拽调整大小？

问题描述 #

我用以下QML代码创建了包含多个Rectangle的Grid组件：

Grid {
    columns: 3
    spacing: 2
    Rectangle { color: "red"; width: 80; height: 100 }
    Rectangle { color: "green"; width: 40; height: 100 }
    Rectangle { color: "blue"; width: 100; height: 40 }
    Rectangle { color: "cyan"; width: 100; height: 50 }
    Rectangle { color: "magenta"; width: 20; height: 20 }
    Rectangle { color: "cyan"; width: 100; height: 50 }
    Rectangle { color: "magenta"; width: 20; height: 20 }
}

这个Grid能正常按网格排列元素，但我希望元素能填充彼此间的空白区域。注意我不想用GridLayout，因为需要元素保持不同尺寸，而非布局提供的固定cellSize。我打算实现类似Splitter的鼠标拖拽调整大小功能，让它能在Grid内的元素间工作。请问该如何实现？Grid内的元素是否支持独立调整大小？

预期效果示意图：

关于Grid内元素的独立调整大小 #

Grid组件本身只是负责根据行列规则定位子元素，并不会限制子元素的大小修改——你完全可以独立调整每个Rectangle的width和height属性。但原生Grid的布局逻辑是固定的：它会按预设的columns/rows将元素依次排列，不会自动让元素填充空白区域，也不支持拖拽调整时的联动布局。所以要实现你要的效果，需要自己实现布局逻辑和拖拽交互。

实现步骤与示例代码 #

1. 替换原生Grid为自定义容器

放弃原生Grid的自动布局，改用Item作为容器，手动管理所有子元素的位置和大小，这样能完全控制布局逻辑。

2. 给元素添加拖拽调整功能

给每个Rectangle添加MouseArea，监听鼠标按下、移动事件，实现拖拽边缘调整大小的功能。同时需要处理相邻元素的位置或大小，避免重叠并填充空白。

以下是一个简化的实现示例：

Item {
    width: 400
    height: 300

    // 存储所有可调整的元素
    property var items: [redRect, greenRect, blueRect, cyanRect1, magentaRect1, cyanRect2, magentaRect2]

    Rectangle {
        id: redRect
        color: "red"
        width: 80; height: 100
        x: 0; y: 0

        // 右下角拖拽调整大小
        MouseArea {
            anchors.fill: parent
            anchors.margins: -10
            hoverEnabled: true
            cursorShape: Qt.SizeFDiagCursor

            property bool resizing: false
            property int startWidth: 0
            property int startHeight: 0

            onPressed: {
                resizing = true
                startWidth = redRect.width
                startHeight = redRect.height
            }

            onPositionChanged: {
                if (resizing) {
                    redRect.width = Math.max(20, startWidth + mouse.x - 10)
                    redRect.height = Math.max(20, startHeight + mouse.y - 10)
                    // 调整后触发重排逻辑
                    rearrangeItems()
                }
            }

            onReleased: resizing = false
        }
    }

    // 其他元素类似添加MouseArea，这里省略重复代码
    Rectangle { id: greenRect; color: "green"; width: 40; height: 100; x: redRect.width + 2; y: 0 }
    Rectangle { id: blueRect; color: "blue"; width: 100; height: 40; x: greenRect.x + greenRect.width + 2; y: 0 }
    Rectangle { id: cyanRect1; color: "cyan"; width: 100; height: 50; x: 0; y: redRect.height + 2 }
    Rectangle { id: magentaRect1; color: "magenta"; width: 20; height: 20; x: cyanRect1.width + 2; y: cyanRect1.y }
    Rectangle { id: cyanRect2; color: "cyan"; width: 100; height: 50; x: magentaRect1.x + magentaRect1.width + 2; y: cyanRect1.y }
    Rectangle { id: magentaRect2; color: "magenta"; width: 20; height: 20; x: 0; y: cyanRect1.height + cyanRect1.y + 2 }

    // 自定义重排逻辑，填充空白区域
    function rearrangeItems() {
        // 这里需要实现更复杂的布局算法，比如按行排列，自动填充空白
        // 以下是简单的行式重排示例，可根据需求扩展
        var currentX = 0
        var currentY = 0
        var rowMaxHeight = 0

        items.forEach(function(item) {
            if (currentX + item.width > parent.width) {
                // 换行
                currentY += rowMaxHeight + 2
                currentX = 0
                rowMaxHeight = 0
            }
            item.x = currentX
            item.y = currentY
            currentX += item.width + 2
            rowMaxHeight = Math.max(rowMaxHeight, item.height)
        })
    }

    // 初始化布局
    Component.onCompleted: rearrangeItems()
}

3. 完善布局逻辑

上面的rearrangeItems是一个简单的流式布局示例，你可以根据预期效果（类似网格但可调整大小）优化算法：

• 按行列分组，记录每列的宽度和每行的高度
• 调整某个元素大小时，同步更新对应行列的其他元素位置或大小
• 处理元素间的空白填充，确保没有间隙

注意事项 #

• 原生Grid无法满足你的需求，必须自定义容器和布局逻辑
• 拖拽调整时要处理边界限制（比如元素最小尺寸），避免出现异常大小
• 复杂布局可能需要使用QtQuick.Layouts中的辅助类，但你明确不想用GridLayout，所以手动管理是更合适的方式

内容的提问来源于stack exchange，提问作者ephemera