时间戳

首页 > 解决方案 > StackView 项目被推到边界外

qt - StackView 项目被推到边界外

问题描述

我有以下主应用程序窗口的 QML 布局。我需要为无边框窗口创建阴影，这就是为什么内部矩形比应用程序边框小一点（我之前在 StackOverflow 上找到了这个解决方案）。问题是当一个新项目被推送到嵌套的 StackView 时，它会从内部矩形的外部移动。我应该如何解决它？

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0

import org.b2soft.qml 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 800
    height: 600
    title: qsTr("Test")

    color: "#00000000"
    flags: Qt.FramelessWindowHint | Qt.Window
  
    Rectangle {
        id: rect
        width: 700
        height: 500
        anchors.centerIn: parent

        Column {
            id: column
            anchors.fill: parent

            Row {
                id: topbar
                anchors.left: parent.left
                anchors.right: parent.right
                height: 24

                Rectangle {
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    width: parent.width
                    color: "#37373a"
                }
            }

            StackView {
                id: rootStackView
                anchors.left: parent.left
                anchors.right: parent.right
                height: parent.height - topbar.height
                initialItem: Qt.resolvedUrl("login.qml")
            }

            Connections {
                target: QMLWrapper
                onLoginCompleted: rootStackView.push(Qt.resolvedUrl("main_stack.qml"))
            }
        }
    }

    DropShadow {
        anchors.fill: rect
        radius: 40
        samples: 32
        verticalOffset: 14
        source: rect
        color: "#40000000"
    }  
}

以下是有问题的 GIF： 边界重叠

标签： qtqml

解决方案

我会冒险并假设这是默认的预期行为。默认情况下，QML 元素不会裁剪，因为担心这可能是一项繁重的操作。

并且堆栈视图通常包含在应用程序窗口内，因此这个问题不会很突出。

但是你的嵌套在一个较小的元素中，为工件的显现留出了空间。

您所要做的就是clip: true为rect.

推荐阅读