python - 在 QML 中制作隐藏/弹性项目

Question

无论如何，是否可以复制这种类型的隐藏/弯曲效果，您可以在此人的 question 中看到这种效果使用 QML？我还使用 QT Creator 来帮助构建 UI，因此在我在下面使用的基线示例的情况下，我有一个按钮，按下该按钮时，将显示一个白色矩形，将来会在其中包含更多内容.而当这个白色矩形出现的时候，白色那个里面的灰色矩形也相应的变长了，基本上就是把它包裹起来了。在这个过程中，Some 文本也像 after.png 一样被按下，当再次按下按钮时，白色矩形应该消失，Some 文本应该向上移动。
除了使用 hide 来编程部分功能之外，我不知道如何让对象像那样移动。下面是对应after.png的代码

import QtQuick 2.4
import QtQuick.Controls 2.12

Item {
    id: item1
    width: 800
    height: 600

    Page {
        anchors.fill: parent

        Rectangle {
            id: bound
            color: "#cad2d7"
            anchors.fill: parent
            anchors.bottomMargin: 0

            Button {
                id: button
                x: 8
                y: 8
                text: qsTr("Button")
            }

            Rectangle {
                id: rectangle
                x: 0
                y: 74
                width: 800
                height: 200
                color: "#ffffff"
            }

            Text {
                id: text1
                x: 14
                y: 293
                text: qsTr("Some text")
                font.pixelSize: 60
            }
        }
    }
}

我也在使用 Python (PySide6)，但不确定是否需要编写某种 Controller 来控制元素。
after.png
before.png (注意你在 before.png 中看到的白色只是白色背景)

Answer 1

看起来您正在寻找类似 accordion design pattern 的东西您可以在其中展开以显示通常不可见的内容。在您描述的场景中，一个简单的方法是 ColumnLayout灰底内部Rectangle ，中间内容的可见性被切换。这是一个完整的独立示例:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    width: 640
    height: 480
    visible: true

    Rectangle {
        color: "lightgrey"
        width: parent.width
        height: column.implicitHeight // note this rectangle derives its height from column, and column derives its height from its children's implicitHeight or Layout.prefererredHeight

        ColumnLayout {
            id: column
            width: parent.width
            spacing: 0

            Button {
                text: qsTr("Button")
                onClicked: {
                    middleRectangle.visible = !middleRectangle.visible // toggle middleRectangle visibility
                }
            }

            Rectangle {
                id: middleRectangle
                Layout.fillWidth: true
                Layout.preferredHeight: 100
                visible: false  // note default is NOT visible

                Text {
                    text: qsTr("New text")
                    font.pixelSize: 60
                }
            }

            Text {
                text: qsTr("Some text")
                font.pixelSize: 60
            }
        }
    }
}

需要注意的有:

visible: false 的项目不占空间ColumnLayout/RowLayout ，然而，不同定位器的情况并非如此Column和 Row

底座Rectangle包含一切的高度来自 ColumnLayout ，它反过来又从它的 child 中获得它的高度

other question你提到的似乎没有遵循你的描述的设计，所以这种方法不一定适用于那种情况，但它的某些部分可以工作，例如切换可见性。