在scroolview qml中居中显示qml中的网格

import QtQuick 2.0
import QtQuick.Controls 2.0

ScrollView {
    width: 400
    height: 400
    flickableItem.interactive: false  // 禁止滑动

    Column {
        id: content
        anchors.horizontalCenter: parent.horizontalCenter  // 居中显示
        anchors.verticalCenter: parent.verticalCenter

        Grid {
            columns: 3
            rows: 3
            spacing: 10

            Image {
                source: "image1.png"
            }

            // 添加更多元素

        }
    }

    // 监听内容大小变化来动态调整位置
    onContentWidthChanged: {
        if (content.width < width) {
            content.x = (width - content.width) / 2
        } else {
            content.x = 0
        }
    }

    onContentHeightChanged: {
        if (content.height < height) {
            content.y = (height - content.height) / 2
        } else {
            content.y = 0
        }
    }
}