20190403 QT从Button开始(1)

    Qt版本5.6.2  目前将要部署的系统自身支持，建议大家自己下载http://download.qt.io/archive/qt/

    为了兼顾开发与部署的系统  qt-opensource-windows-x86-mingw492-5.6.2.exe  建议下载这个开发版  安装过程点击 下一步  安装哪些  全选

    Button 所有图形化开发工具都会有的一个控件。

    现在我们来自己实现一个Button，我把已经实现好的例子放到桌面和优快云下载里面   取名CreateButton

    main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;  \\后面讲两种加载QML的方式，这里先不管，直接到QML
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));  \\加载main.qml   

    return app.exec();
}

main.qml

import QtQuick 2.6
import QtQuick.Window 2.2

Window {       \\QML window 控件 可以理解为QtWidget 的QWidget 或者其他语言的Form
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")   \\windowtitle  窗口标题

    CButton{  \\自己实现的Button 将CButton.qml 与main.qml 放到一起就可以调用
        x:0   \\位置
        y:0
        width: 200   \\ 大小
        height: 40
        MouseArea {   \\鼠标区域 接受鼠标事件
            anchors.fill: parent   \\   anchors 是位置控制   fill  parent  理解为全部填充父类，就是CButton区域就好
            onClicked: {  \\  鼠标点击事件   关闭窗口
                Qt.quit();
            }
        }
    }
}

 

CButton.qml

import QtQuick 2.6

Rectangle {   \\  QML 最基础的控件 所有的实现都可以基于此
    color: "#00000000"  \\ 方形颜色   rgba  透明  支持  “red”
    Image {
        id: buttonBackGroundImage  // 可以理解为Image 类的对象名，通过id 改变其属性 source 值
        anchors.fill: parent
        source: "qrc:/image/Button.png"
    }
    Text {
        id: buttonContext
        text: qsTr("text")  
        anchors.verticalCenter: parent.verticalCenter    //居中
        anchors.horizontalCenter: parent.horizontalCenter
    }
    MouseArea{  \\这里的和main.qml 中的MouseArea并不会冲突，相同的会覆盖，不同事件类型叠加
        anchors.fill: parent
        hoverEnabled: true   //支持鼠标悬停事件
        onEntered: {
            buttonBackGroundImage.source = "qrc:/image/Button_hover.png"   \\改变iamge的图元，达到鼠标进入变色效果
        }
        onExited: {
            buttonBackGroundImage.source = "qrc:/image/Button.png"
        }
    }
}