Python 在QML中生成隐藏/灵活项

在这个人的使用QML时，你是否可以复制这种类型的隐藏/伸缩效果？我还使用QT Creator来帮助构建UI，因此在我下面处理的基线示例中，我有一个按钮，当按下该按钮时，将显示一个白色矩形，该矩形将来将包含更多内容。而当这个白色矩形出现时，白色矩形里面的灰色矩形也相应地加长，基本上把它包裹起来。在这个过程中，一些文本也会像after.png一样被按下，当再次按下按钮时，白色矩形会消失，一些文本会向上移动

除了使用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），但不确定是否需要编写某种控制器来控制元素。

---

（请注意，您在before.png中看到的白色只是白色背景）

您似乎在寻找一种类似于可展开以显示通常不可见内容的东西。在您描述的场景中，一种简单的方法是在灰底

矩形

内部设置一个

列布局

，在这里可以切换中间内容的可见性。以下是一个完整的独立示例：

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
            }
        }
    }
}

需要注意的是：

• 可见的项目：false

  不会占用

  ColumnLayout

  /

  RowLayout

  中的空间，但是，不同的定位器

  Column

  和

  Row

• 包含所有内容的基本

  矩形

  从

  ColumnLayout

  获取其高度，后者又从其子项获取其高度
• 您提到的方法似乎不符合您描述的设计，因此此方法不一定适用于该场景，但其中的某些部分可以工作，例如切换可见性

---

请提供您的尝试。或者一些你想应用这种效果的代码。@folibis我只是从我的项目中添加了一些简化的代码，并对我的问题进行了更多的编辑，希望我的意图更加清晰。我明白了，我认为一般原则仍然是一样的，但我不想创建一个灵活的选项卡栏。我想你的手风琴设计图案一针见血，因为那正是我要找的。这真的很有帮助；感谢您解释工作示例和关于

列

/

行

与

列布局

/

行布局

的额外说明，因为我不确定这些。{希望我能在得到15个代表后投票支持你的答案）我投票支持你的问题，所以现在你应该有足够的代表：）