在qml

Question

有任何方法可以复制这种类型的hide/flex效果，您可以在此人的问题中看到qml？？

我还使用QT创建者来协助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
            }
        }
    }
}

后：

之前：

注意您在以前看到的白色只是白色的backgroud。
它似乎您正在寻找类似
AccordionDesign模式的东西，您可以在其中扩展以显示正常可视的内容。在您描述的情况下，一种简单的方法将是灰色底座内部的
ColumnLayout，其中中间内容的可见性被切换。这是一个完整的独立示例：

Rectangle

Answer 1

要注意的是：

但是，

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

中占用空间，但是，不同的定位器并非如此

基础compossing compass compossing the and the the the the the the the the the the the the the the the the的高度，进而从其儿童中得出了高度
您提到的其他问题似乎并不遵循您的描述的设计，因此这种方法不一定适用于这种情况，但是其中的某些部分将起作用，例如。切换可见度