在 QML 中制作 Hide/Flex 项目

Posted 2023-02-14

【中文标题】在 QML 中制作 Hide/Flex 项目

【英文标题】：Make Hide/Flex Items in QML

【发布时间】：2021-06-02 20:11:24

【问题描述】：

是否可以使用 QML 复制您可以在此人的 question 中看到的这种隐藏/弹性效果？我还使用 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)，但不确定是否必须编写某种控制器来控制元素。 after.png before.png（注意你在 before.png 中看到的白色只是白色背景）

【问题讨论】：

请提供您的尝试。或者你想应用这个效果的一些代码。

@folibis 我刚刚从我的项目中添加了一些简化的代码，并进一步编辑了我的问题，以便更清楚我的意图。

【参考方案1】：

您似乎正在寻找类似accordion design pattern 的东西，您可以在其中展开以显示通常不可见的内容。在您描述的场景中，一种简单的方法是在灰色基础Rectangle 内使用ColumnLayout，其中切换中间内容的可见性。这是一个完整的独立示例：

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，而ColumnLayout 的高度又来自其子项 您提到的other question 似乎没有遵循您描述的设计，因此这种方法不一定适用于该场景，但它的某些部分会起作用，例如切换可见性。

【讨论】：

我明白了，我认为大体原理还是一样的，但我并不是要创建一个灵活的标签栏。我认为您使用手风琴设计模式一针见血，因为这正是我正在寻找的。这真的很有帮助；感谢您解释工作示例以及对Column/Row 与ColumnLayout/RowLayout 的额外说明，因为我不确定这些。 希望我能在达到 15 次代表时为您的答案投票）

我赞成你的问题，所以现在你应该有足够的代表了 :)