仅显示 Qt Qml Drawer 的一部分

Question

我只想显示 QML Drawer 的一半。这个想法是在抽屉的可见部分保留一些重要信息，然后让用户显示完整的抽屉并提供更多信息。

从文档中我认为

position 属性应该适合这个：

Drawer {
  modal: false
  interactive: false
  position: 0.5 // does not work
}

但是设置位置没有效果。是否可以只显示抽屉的一部分？

Answer 1

正如我的评论中提到的，您可能希望将您的概念从里到外，让Drawer 从其内容中继承其大小，并更改内容，而不是对其大小进行硬编码并操纵其位置。

这里有一个完整的例子来展示这个想法。抽屉包含一个包含“信息”和“额外信息”的 RowLayout - 额外信息的可见性通过交互切换，从而改变抽屉的大小，它始终保持在 100% 的打开位置，但会自动改变宽度。

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

Window {
    id: root
    width: 640
    height: 480
    visible: true

    Drawer {
        id: drawer
        height: root.height
        // width automatically derived from RowLayout child's implicitWidth

        onClosed: detailed.visible = false

        RowLayout {
            height: parent.height
            spacing: 0

            Rectangle {
                id: detailed
                color: "lightcyan"
                Layout.fillHeight: true
                Layout.preferredWidth: 200
                visible: false // when not visible, this does not add to the RowLayout's implicitWidth

                Text {
                    anchors {
                        centerIn: parent
                    }
                    text: "Extra Info\n Click to close"
                }

                MouseArea {
                    anchors {
                        fill: parent
                    }

                    onClicked:  {
                        detailed.visible = false
                    }
                }
            }

            Rectangle {
                color: "lightpink"
                Layout.fillHeight: true
                Layout.preferredWidth: 200

                Text {
                    anchors {
                        centerIn: parent
                    }
                    text: "Regular Info\n Click to open extra info"
                }

                MouseArea {
                    anchors {
                        fill: parent
                    }

                    onClicked:  {
                        detailed.visible = true // toggling visibility automatically makes the Drawer wider
                    }
                }
            }
        }
    }

    MouseArea {
        id: mouse
        anchors {
            fill: parent
        }

        onClicked:  {
            drawer.open()
        }
    }

    Text {
        anchors {
            centerIn: parent
        }
        text: "Click to open drawer"
    }
}