QML 多页面和自定义控件1

1.增加自定义控件myButton.qml

import QtQuick 2.8
import QtQuick.Controls 2.5


Rectangle {
    id:myButton

    width: 140
    height: 40

    color : "#E0E0E0"
    //设置边框的大小和颜色，倒角
    border.width: btnArea.containsMouse ? 1 : 0
    border.color: "red"
    //color: "transparent" 透明
    //设置渐变色，与color冲突？？
    //gradient: Gradient.NightFade
    radius: 5
    signal clickedLeft()
    signal clickedRight()
    //color: btnArea.pressed ? Qt.darker(btnColor, 1.2) : (btnArea.containsMouse ? Qt.lighter(btnColor, 1.2) : btnColor)
    Text {
        id: btnText
        anchors.centerIn: parent
        text: qsTr("我是一个按钮")
    }
    MouseArea {
        id: btnArea
        anchors.fill: parent
        hoverEnabled: true
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
            //这个地方的条件是 鼠标按下并且光标还停留在Rectangle区域？
            if(mouse.button === Qt.LeftButton){
                console.log(qsTr("Left按钮被按了"))
                myButton.clickedLeft()
            }
            else if(mouse.button === Qt.RightButton){
                console.log(qsTr("right按钮被按了"))
                myButton.clickedRight()
            }
        }
        onPressed: {
            color = "#606060"
            console.log(qsTr("onPressed"))
        }
        onReleased: {
            color = "#B0B0B0"
            console.log(qsTr("onReleased"))
        }
        onEntered: {
            color = "#B0B0B0"
            console.log(qsTr("onEntered"))
        }
        onExited: {
            color = "#E0E0E0"
            console.log(qsTr("onExited"))
        }
    }
}

2. 增加自定义page myButtonPage.qml

import QtQuick 2.8
import QtQuick.Controls 2.1

Page {

    id:buttonWindow
    title: qsTr("设置")
    visible: true

    property StackView stack: null
    height: 600

    MyButton{
        id:button1
        x: 200
        y:10
        anchors.topMargin: 10
        anchors.leftMargin : 5
        onClickedLeft: {
            console.log("MyButton onClickedLeft")
        }
    }

    Label {
        id: text1
        width: parent.width - 80
        height: 35
        text: qsTr("Butotn page")
        anchors.bottom: parent.bottom
        //anchors.bottomMargin: 5
        font.bold: false
        font.pixelSize: 18
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        background: Rectangle{
            color: "#E0E0E0"
        }

    }

    Button {
        x: 562
　　　　 //退出当前页面操作
        height: 35
        width: 80
        text: "<-"
        anchors.rightMargin: 0
        anchors.bottom: parent.bottom
        //anchors.bottomMargin: 5
        anchors.right: parent.right
        onClicked: stack.pop()

    }


}

 3.在main.qml中增加StackView和Page

Window {
    visible: true
    width: 700
    height: 600
    title: qsTr("Page Test")

    StackView {
        id: stack
        initialItem: mainView
        anchors.fill: parent
    }

    Page {
        id: mainView

        Text {
            id: text1
            x: 9
            y: 549
            width: 251
            height: 33
            text: qsTr("Control page")
            anchors.bottom: parent.bottom
            //anchors.bottomMargin: 5
            font.bold: false
            font.pixelSize: 18
        }

        Button{
            x: 15
            y: 14
            text: "myButton"
            onClicked: {
                myButtonPage.visible = true
                myButtonPage.stack = stack;
                stack.push(myButtonPage)
            }
        }
//        Set{
//            id:page_set
//            visible: false
//        }
        MyButtonPage{
            id:myButtonPage
            visible: false
        }
    }

}