Qt自定义组件

       近来用qml写界面,经常要用到特定样式的Button,而且要用很多次,因此总会重复.本人因为不知道怎么改变系统自定义的Button的图标大小及其它属性,所以干脆用Rectangle来实现Button的功能,但缺点就是代码太多,而且重复,将其作为一个自定义组件放在单独的Qml文件中直接调用就方便且简单很多了,还不容易出错.

       新建一个Qml文件,文件名首字母大写,即是调用时的控件名称,如我用的CustomButton.qml,文件内容如下:

import QtQuick 2.2Rectangle {    id: bkgnd;    implicitWidth: 120;    implicitHeight: 50;    color: "transparent";    property alias iconSource: icon.source;    property alias iconWidth: icon.width;    property alias iconHeight: icon.height;    property alias textColor: btnText.color;    property alias font: btnText.font;    property alias text: btnText.text;    //radius: 6;    //property bool hovered: false;//    border.color: "#949494";//    border.width: hovered ? 2 : 0;    signal clicked;    Image {        id: icon;        width:parent.width        height: parent.height        source: "./images/touch.png"        fillMode: Image.PreserveAspectCrop   //deng bi suo fang        clip:true      //limits area    }    Text {        id: btnText;        anchors.top: icon.bottom        anchors.horizontalCenter: icon.horizontalCenter    }    MouseArea {        id: ma;        anchors.fill: parent        onPressed: {            bkgnd.scale=0.8        }        onClicked: {            //console.log("aaa")            bkgnd.scale=1            bkgnd.clicked()        }    }}

       根据需要改变其中的属性即可.

       调用格式如下:

CustomButton{                id:btn3                color:"blue"                width:main.width*0.1                height:main.height*0.16                iconSource: "./images/touch.png"                text:qsTr("TouchTest")            }

      需要在要调用的qml文件头部写上一句 import "路径名"

      比如我的CustomButton.qml放在main.qml文件同目录的controls文件夹下,导入语句为:import "./controls".

      这样就大功告成了,自定义组件中还可以添加一些其他的属性,比如动画,可以拓展试试.