仅显示 Qt Qml Drawer 的一部分

Posted 2023-02-16

【中文标题】仅显示 Qt Qml Drawer 的一部分

【英文标题】：Show only part of Qt Qml Drawer

【发布时间】：2021-08-27 17:28:42

【问题描述】：

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

从文档中我认为

position 属性应该适合这个：

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

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

【问题讨论】：

由于弹出窗口/抽屉通常从其内容继承其大小，是否有某些原因您希望通过抽屉定位来执行此操作，而不是切换抽屉内容的可见性/大小？

【参考方案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"
    

【讨论】：

虽然这不是我想要的，但它是一个很好的解决方法谢谢！。