QML自定义控件(一)
学习背景:QML的界面开发其中最大一个意义在于,可以十分简单的创建一个属于自己的控件,而且能被重复的使用。今天我以Button为例简单介绍一下我在定义控件中所遇到的问题。我们都知道任何控件几乎都可以用Rectangle来开始,然后里面你想怎么画都可以。但我个人的观点是更喜欢用Button的,但是他们两个都有自己使用的场景。但是在一些特殊控件的自定义的时候,我这边一般还是喜欢使用相关功能的继承关系
目标实现
一个边框可以设定颜色,移动上去后有变化的button边框颜色高亮
第一种方式在Rectangle
/*-------------------------------
* Author:Teacher zeng
* Date : 2020.05
* Unit description: 用Rectangle自定义button控件
*/
import QtQuick 2.12
import QtQuick.Controls 2.12
import "../skin/CSkin.js" as CSkin
Rectangle {
id:root
property alias text: txt.text
property string txtcolor: ""
property string txthovercolor : ""
property alias containsMouse: area.containsMouse
property alias containsPress: area.containsPress
signal clicked
radius: 5
color: "transparent"
Text{
id:txt
color: containsMouse ? txthovercolor : txtcolor
font.pixelSize : CSkin.font_normalSize
font.family : CSkin.font_family
font.weight : CSkin.font_weight
anchors.centerIn: parent
}
MouseArea {
id: area
anchors.fill: parent;
hoverEnabled: parent.enabled;
onClicked: root.clicked();
cursorShape: Qt.PointingHandCursor
}
}
第二种方式 Button
/*-------------------------------
* Author:Teacher zeng
* Date : 2020.05
* Unit description: 用Button自定义Button控件
*/
import QtQuick 2.12
import QtQuick.Controls 2.12
import "../skin/CSkin.js" as CSkin
import QtQuick.Templates 2.12 as T
T.Button{
id: root
property alias txt:t.text
property alias border: bg.border
property alias color : bg.color
property string txtcolor: ""
property string txthovercolor : ""
property alias containsMouse: area.containsMouse
property alias containsPress: area.containsPress
CText {
id:t
anchors.centerIn: parent
color: containsMouse ? txthovercolor : txtcolor
}
background: Rectangle{
id:bg
anchors.fill: root
radius: 5
color: "transparent"
}
MouseArea {
id: area
anchors.fill: parent;
hoverEnabled: parent.enabled; //增加了这个效果才能使得area.containsMouse有效果
onClicked: root.clicked();
cursorShape: Qt.PointingHandCursor
}
}
两种写法的方式都很相识,原因在于我们在查看帮助文档的时候回发现。Button和Rectangle之间的属性差异不太多。各自没有太大的优势,所以都可以。
调用方式我用了两层,附上代码
// CGrayButton.qml
import QtQuick 2.12
import "../skin/CSkin.js" as CSkin
CButton {
border.color:enabled ? (containsMouse ?(containsPress ? CSkin.btn_gray_press_color : CSkin.btn_gray_hover_color )
:CSkin.btn_gray_normal_color ) : CSkin.btn_gray_disable_color
txtcolor: CSkin.txt_gray_color
txthovercolor: CSkin.txt_gray_color
}
//main.qml 中调用
CGrayButton{
x:210;y:100
width: 100
height: 50
txt: "test gray button"
onClicked:{
console.log("test ")
}
}
效果图:
需求变化:
现在我们鼠标移动上去需要使用不同的图片,这个时候我的就会使用image作为基础控件
import QtQuick 2.12
/*-------------------------------
* Author:Teacher zeng
* Date : 2020.05
* Unit description: imagebutton
*/
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4
Image {
id: root
//image
property string img_normal : ""
property string img_hover : ""
property string img_press : ""
property string img_disable: ""
//text color
property string txt_normal_color : "transparent"
property string txt_hover_color : "transparent"
property string txt_press_color : "transparent"
property string txt_disable_color: "transparent"
property alias text: t.text
property alias containsMouse: area.containsMouse
property alias containsPress: area.containsPress
width : sourceSize.width
height : sourceSize.height
source: enabled ? (containsMouse ?(containsPress ? img_press : img_hover )
:img_normal ) : img_disable
Text {
id: t
color: enabled ? (containsMouse ?(containsPress ? txt_press_color : txt_hover_color )
:txt_normal_color ) : txt_disable_color
anchors.centerIn: parent
}
MouseArea{
id: area
anchors.fill: parent;
hoverEnabled: parent.enabled;
onClicked: root.clicked();
cursorShape: Qt.PointingHandCursor
}
}
调用
CImageButton {
x:200;y:200
txt_normal_color:"blue"
txt_hover_color: "green"
img_normal : "qrc:/image/normal.png"
img_hover : "qrc:/image/over.png"
img_press : "qrc:/image/press.png"
img_disable : "qrc:/image/disable.png"
text: "button"
}
效果图
今天主要都是写一些码,没有相关的知识点分享,但是最后提一个问题吧,有兴趣的初学者可以试一试,如何自定义一个RadioButton?