如何实现Qt QML Drawer仅部分展示 默认显示一半抽屉的效果

原有代码失效原因 #

• interactive: false配置直接禁用了Drawer的拖拽交互，既无法支持用户后续拉出完整抽屉的操作，也会阻断position属性的自定义赋值逻辑
• Drawer默认的开关状态机会自动接管position属性的数值，直接静态赋值会被状态机的默认逻辑覆盖，因此不会生效

实现代码 #

以下为左侧弹出半开展示的示例，可根据需求调整弹出方向、尺寸、停靠位置等参数：

import QtQuick.Controls 2.15

Drawer {
    id: leftDrawer
    width: 300 // 抽屉完全展开的总宽度
    edge: Qt.LeftEdge // 弹出方向，可选Qt.RightEdge/Qt.TopEdge/Qt.BottomEdge
    modal: false
    interactive: true

    // 初始默认停靠在半开位置
    Component.onCompleted: {
        positionAnim.to = 0.5
        positionAnim.start()
    }

    // 拖拽释放逻辑：拖拽超过0.7则完全展开，否则回到半开状态
    onDragReleased: {
        positionAnim.to = position > 0.7 ? 1 : 0.5
        positionAnim.start()
    }

    // 位置切换动画
    PropertyAnimation on position {
        id: positionAnim
        duration: 200
        easing.type: Easing.OutCubic
    }

    // 抽屉内容区域
    Column {
        width: parent.width
        // 半开状态下可见的常驻信息区
        Rectangle {
            width: parent.width
            height: 150
            color: "#f5f5f5"
            Text {
                anchors.centerIn: parent
                text: "常驻展示的重要信息"
            }
        }
        // 完全展开后可见的更多内容区
        Rectangle {
            width: parent.width
            height: 150
            color: "#eeeeee"
            Text {
                anchors.centerIn: parent
                text: "更多内容，完全展开后可见"
            }
        }
    }
}

适配说明 #

• 若抽屉从顶部/底部边缘弹出，只需将代码中的width配置替换为height，逻辑完全一致
• 可自行调整半开position数值、拖拽判定阈值、动画参数等，匹配业务需求
• 建议使用Qt Quick Controls 2.12及以上版本，避免低版本属性兼容性问题

内容的提问来源于stack exchange，提问作者Hyndrix