QML学习 创建带图标的按钮 一

初次学习QML,想实现一个带图标的按钮来练练手.

创建新的空项目

填写项目名称

生成了默认的完整工程.这是一个"Hello Wrold"的工程.

添加新文件,设计图标按钮组件

点击完成后直接进入设计界面

点击编辑,进入编辑界面,可以看到工程增加了两个文件

这两个文件就是我们要设计组件KRichButton的两个设计文件,KRichButtonForm.ui.qml是组件界面部分文件,KRichButton.qml是要实现组件的逻辑部分文件,这样把界面和业务分开,比较清晰容易管理.
KRichButton.ui.qml的代码如下

import QtQuick 2.4

Item {
    width: 400
    height: 400
}

没有什么具体内容,就是一个Item元素作为根节点
KRichButton.qml的代码如下:

import QtQuick 2.4

KRichButtonForm {
}

这里内容更少,以我们要设计的组件的界面作为根节点.

编写界面文件

我要实现的按钮需要显示图片,要有文字,还需要响应鼠标的电机,所以需要用到Rectangle,Image,MouseArea和Text元件,这部分在ui部分代码编辑如下:

在这里插入代码片import QtQuick 2.4

Item {
    id:_root
    
    Rectangle{
        id:_background
        anchors.fill: parent
        border.color: "gray"
        border.width:1
        radius:5
        gradient:Gradient {
            GradientStop {
                position: 0.0
                color: "#999999"
            }
            GradientStop {
                position: 1.0
                color: "#CCCCCC"
            }
        }
    }
    //图片
    Image {
        id:_image
        width:_background.width
        height: _background.height - 50
        fillMode: Image.PreserveAspectFit
        source: "images/AudioPlayer_48.png"
    }
    //文本显示
    Text {
        id:_text
        anchors.fill:parent
        anchors.topMargin: _image.height
        anchors.horizontalCenter: _background.horizontalCenter
        horizontalAlignment: Text.AlignHCenter
        text:"KRichButton"
        color:"white"
        font.pointSize: 18
        font.bold: true
    }
    
    //鼠标点击区域
    MouseArea {
        id:_mousearea
        anchors.fill: parent
    }
}

切换到设计界面,可以看到如下效果

编写业务代码

业务代码的编写在独立的KRichButton.qml文件中,不与界面代码嬲在一起,方便维护.

业务代码比较简单,就是接收鼠标的点击位置,并在控制台中打印出来,为了响应鼠标点击,设置一个clicked信号,传入鼠标作为参数
,鼠标事件由父亲的点击事件触发.

import QtQuick 2.4

KRichButtonForm {
    id:_root
    
    signal clicked(var mouse)
    
    mouseArea.onClicked: {
        //由父的鼠标点击事件触发
        //_root.clicked(mouse)
        console.log(_root.mouseArea.mouseX,_root.mouseArea.mouseY)
    }
}
在这里插入代码片

在主页面中例化KRichButton

在main.qml中添加一个KRichButton

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    
    KRichButton{
        anchors.fill: parent
        anchors.margins: 100
        
        //onClicked: console.log(mouse.x,mouse.y)
    }
}

运行,显示如下效果

点击时,在输出窗体打印出来了鼠标点击的位置
这是第一次用QML,记录备忘.