当前位置：首页 > article >正文

Qt/QML学习-Drawer

article 2025/2/28 2:55:49

QML学习

Drawer例程
视频讲解
代码

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Drawer")

    Drawer {
        id: drawer
        width: parent.width / 4
        height: parent.height

        // 从屏幕左边滑出来
        edge: Qt.LeftEdge
        // 可以从屏幕边缘拉出来
        interactive: true
        // 内部视图不能超出抽屉视图边界显示
        clip: true
        // 关闭策略
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
        // 设置模态
        modal: true
        // 模态背景变暗
        dim: true
        // 绘制抽屉背景视图
        background: Rectangle{
            anchors.fill: parent
            opacity: 0
        }
        // 绘制抽屉内部视图
        Rectangle {
            width: parent.width+30
            height: parent.height
            x: -30
            radius: 30
            opacity: 1
            Text {
                anchors.centerIn: parent
                text: "关注\n宅宅"
                font.pointSize: 30
                verticalAlignment: Text.AlignTop
            }
        }
    }

    Button {
        id: button
        x: drawer.width * drawer.position
        anchors.verticalCenter: parent.verticalCenter
        text: qsTr("打开")
        onClicked: {
            drawer.open()
        }
    }
}