Using OpenGL to draw a picture in a custom QQuickItem, the picture appears incomplete in the window

[petterPan]

I want to render my image in QQuickItem using OpenGL. I refer to the example provided by QT at https://doc.qt.io/qt-6.5/qtquick-scenegraph-openglunderqml-example.html
However, my image is not completely displayed in the window, its top and bottom seem to be obscured by other QML elements in the window. What can I do to make the image display complete.

Here is my OpenGL initialization and drawing code

void VideoGLRenderer::initRenderer()
{
    QString vertexSource = R"(
        #version 330 core
        layout(location = 0) in vec3 vPosition;
        layout(location = 1) in vec2 vTexCoord;
        out vec2 TexCoord;
        uniform mat4 zoomMatrix; 
        void main() { 
            gl_Position = zoomMatrix * vec4(vPosition, 1.0); 
            TexCoord = vTexCoord; 
        }
        )";

    QString fragSource = R"(
        #version 330 core 
        in vec2 TexCoord; 
        out vec4 FragColor; 
        uniform sampler2D frameTexture; 
        uniform bool IsTextureValid; 
        void main() { 
            if(!IsTextureValid) 
            { 
                FragColor = vec4(0.0,0.0,0.0,1.0); 
            } else { 
                FragColor = texture(frameTexture, TexCoord); 
            } 
        }
        )";

 
    initializeOpenGLFunctions();

.........

    QVector<GLfloat> vertices = {
        // positions         // texture coords
        -1.0f, 1.0f,  0.0f, 0.0f, 1.0f, // top left
        -1.0f, -1.0f, 0.0f, 0.0f, 0.0f, // bottom left
        1.0f,  -1.0f, 0.0f, 1.0f, 0.0f, // bottom right
        1.0f,  1.0f,  0.0f, 1.0f, 1.0f, // top right
    };

    QVector<GLuint> indices = {
        0, 1, 2, 2, 3, 0,
    };
......
 
    this->video_frame_texture = new QOpenGLTexture(QOpenGLTexture::Target2D);
    this->video_frame_texture->setMagnificationFilter(QOpenGLTexture::Linear);
    this->video_frame_texture->setMinificationFilter(QOpenGLTexture::Linear);
    this->video_frame_texture->setWrapMode(QOpenGLTexture::Repeat);
}

void VideoGLRenderer::paint()
{
    bool isTextureValid;
    QMatrix4x4 zoom;

    this->quick_window->beginExternalCommands();

    glDisable(GL_DEPTH_TEST);

    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

    if (frame != nullptr) {
        QMutexLocker locker(&mutex);

        QImage img(frame->data[0], frame->width, frame->height, QImage::Format_BGR888);
        if (img.isNull()) {
            spdlog::error("QImage is null");
            return;
        }

        video_frame_texture->destroy();
        video_frame_texture->create();

        video_frame_texture->setData(img.mirrored());

        isTextureValid = true;

        // 计算16:9比例下的目标尺寸
        float targetWidth  = this->window_size.width();
        float targetHeight = targetWidth * 9.0f / 16.0f;

        // 如果计算出的高度超出窗口高度，则按照高度计算宽度
        if (targetHeight > window_size.height()) {
            targetHeight = window_size.height();
            targetWidth  = targetHeight * 16.0f / 9.0f;
        }

        // 计算缩放比例
        float scaleX = targetWidth / this->window_size.width();
        float scaleY = targetHeight / this->window_size.height();

        zoom.scale(scaleX, scaleY, 0.0f);

    } else {
        isTextureValid = false;
    }

    this->shader_program->bind();
    this->shader_program->setUniformValue("IsTextureValid", isTextureValid);

    this->vao->bind();
    if (isTextureValid) {

        this->video_frame_texture->bind(0);
    }
    this->shader_program->setUniformValue("zoomMatrix", zoom);

    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

    this->vao->release();
    this->shader_program->release();
    if (isTextureValid)
        this->video_frame_texture->release();

    this->quick_window->endExternalCommands();
}

This is my UI

ApplicationWindow {
    id: appWindow

    menuBar: MenuBar {
...........

    }

    footer: Rectangle {
  
......

    }


    VideoWidget {
        id: videoView
        objectName: "videoView"

        anchors.left: parent.left
        anchors.leftMargin: 5
        anchors.right: parent.right
        anchors.rightMargin: 5
        anchors.top: appWindow.menuBar.bottom
        anchors.topMargin: 5
        anchors.bottom: playDrawer.top
        anchors.bottomMargin: 5
       
    }

    PlayDrawer {
        id: playDrawer
        objectName: "playDrawer"

        anchors.bottom: appWindow.footer.top
        anchors.left: parent.left
        anchors.right: parent.right

        implicitHeight: 80
    }
}

[petterPan]

It feels obscured when the picture is displayed

[petterPan]

The complete picture looks like this