qml自定义界面定制(一)统一风格的Dialog对话框

/*统一风格的dialog对话框
*/
import QtQuick 2.0
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3
 
Rectangle {
    z: 65535;
    visible: true
    color: "#00000000"
    property alias dialogTitle: title.text
    property alias contextRect: contextRect.children
    property alias controlTextLeft: controlLeft.text
    property alias controlTextRight: controlRight.text
    signal controlLeftClicked();
    signal closeBtnClicked();
    signal controlRightClicked();
    width: mainWindow.width
    height: mainWindow.height
    MouseArea { anchors.fill: parent; hoverEnabled: true
        acceptedButtons: Qt.LeftButton|Qt.RightButton
        property point clickPos: "0,0"
        onPressed: {
            clickPos  = Qt.point(mouse.x,mouse.y)
        }
        onReleased: {
            clickPos  = Qt.point(mouse.x,mouse.y)
        }
        onPositionChanged: {
            if (pressed) {
                var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y);
                mainWindow.setX(mainWindow.x+delta.x);
                mainWindow.setY(mainWindow.y+delta.y);
            }
        }
    }
 
    Rectangle {
        id:container
        anchors.centerIn: parent
        width: 418; height: 240
 
        Rectangle {
            id: titleContainer
            width: parent.width
            height: title.height + 8
            anchors.top: parent.top
            anchors.left: parent.left
 
            Text {
                id: title
                font.pixelSize: 18
                color: "#3B3E50"
                anchors.top: parent.top
                anchors.topMargin: 20
                Component.onCompleted: {
                        anchors.left = parent.left;
                        anchors.leftMargin = 24; 
                  }
            }
 
            Image {
                id: closeBtn
                MouseArea {
                    hoverEnabled: true
                    anchors.fill: parent
                    acceptedButtons: Qt.LeftButton
                    onReleased: {
                        closeBtnClicked();
                            parent.source = "qrc:/ui/images/icon_pop_cancel.png" 
                    }
                    onPressed: {
                            parent.source = "qrc:/ui/images/btu_close_pressed.png";
                    }
                    onEntered: {
                            parent.source = "qrc:/ui/images/icon_pop_cancel_p.png"; 
                    }
                    onExited: {
                            parent.source = "qrc:/ui/images/icon_pop_cancel.png";
                    }
                }
 
                Component.onCompleted: {
                        closeBtn.anchors.right = titleContainer.right;
                        closeBtn.anchors.rightMargin = 12;
                        closeBtn.anchors.top = titleContainer.top;
                        closeBtn.anchors.topMargin = 20;
                        closeBtn.source = "qrc:/ui/images/icon_pop_cancel.png";
                }
            }
        }
 
        Rectangle{
            id : contextRect
            anchors.top: titleContainer.bottom
            anchors.left: titleContainer.left
            anchors.leftMargin: 40
        }
        Rectangle {
            id: okBtn
            width: 72; height: 36
            radius: 2; color: "#4184f3"
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 24
            Text {
                id: controlRight
                color: "#FFFFFF"
                font.pixelSize: 16
                anchors.centerIn: parent
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    controlRightClicked();
                }
                onEntered: {
                    okBtn.color = "#155DD5";
                }
                onExited: {
                    okBtn.color = "#4184F3";
                }
            }
        }
 
        Text {
            id: controlLeft
            color: "#747474"
            font.pixelSize: 16
            anchors.right: okBtn.left
            anchors.rightMargin: 20
            anchors.verticalCenter: okBtn.verticalCenter
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    controlLeftClicked();
                }
            }
        }
 
    } // container
 
    //绘制阴影
    DropShadow {
        anchors.fill: container
        cached: true
        radius: 15
        samples: 31
        color: "#50000000"
        smooth: true
        source: container
    }
}
 
发布了206 篇原创文章 · 获赞 18 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/lvmengzou/article/details/104044444