设计自己的按钮作为组件使用
1.设置相关属性,供外部组件调用时,直接更改属性改变组件样式
//定义不同圆角状态下的按钮
enum Style{
NormalButton,
LowRoundCornerButton,
HighRoundCornerButton,
CircleButton
}
radius:50
width: 200
height: 200
property alias imgItem:img //按钮图片实例对象
property alias imgUrl:img.source //按钮背景图片路径
property alias imgwidth:img.width //图片宽度
property alias imgheight:img.height //图片高度
property alias textItem: t //导出Text实例,方便外部直接修改
property alias text: t.text //导出文本
property alias textColor: t.color //导出文本颜色
property alias containsMouse: area.containsMouse //导出鼠标悬浮
property alias containsPress: area.containsPress //导出鼠标按下
property int currentStyle:TImgTextBtn.Style.CircleButton
signal clicked(); //自定义点击信号
2.给按钮设置背景图片和文字提示
Image {
id: img
visible: false
source: "qrc:/Img/3.jpg"
anchors.fill: parent
}
Text {
id: t
//默认坐标居中
anchors.centerIn: parent
font.family: "Microsoft Yahei"
//默认文字对齐方式为水平和垂直居中
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
//默认宽度为parent的宽度,这样字太长超出范围时自动显示省略号
font.pointSize: 30
text: "自定义按钮"
color: "blue"
}
3.设置圆角按钮遮罩图片适应,我们使用QtGraphicalEffects下的OpacityMask
Rectangle{
id:mask_rect
visible: false
anchors.fill: parent
radius: root.radius
}
OpacityMask{
id: mask_image
anchors.fill: img
source: img
maskSource: mask_rect
visible: true
antialiasing: true
}
4.加载组件时候判断类型
Component.onCompleted:{
switch(currentStyle)
{
case TImgTextBtn.Style.NormalButton:root.radius=0;break;
case TImgTextBtn.Style.LowRoundCornerButton:root.radius=10;break;
case TImgTextBtn.Style.HighRoundCornerButton:root.radius=50;break;
case TImgTextBtn.Style.CircleButton:root.radius=root.width/2;break;
default:break;
}
}
注意事项:文字属性必须在图片属性加载完全后才能正常现实,必须在Image后面
完整TImgTextBtn.qml代码
/*****************************************
* Author: God港
* Function:自定义QML按钮组件
* ***************************************/
import QtQuick 2.12
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.12
Rectangle {
id: root
//定义不同圆角状态下的按钮
enum Style{
NormalButton,
LowRoundCornerButton,
HighRoundCornerButton,
CircleButton
}
radius:50
width: 200
height: 200
property alias imgItem:img //按钮图片实例对象
property alias imgUrl:img.source //按钮背景图片路径
property alias imgwidth:img.width //图片宽度
property alias imgheight:img.height //图片高度
property alias textItem: t //导出Text实例,方便外部直接修改
property alias text: t.text //导出文本
property alias textColor: t.color //导出文本颜色
property alias containsMouse: area.containsMouse //导出鼠标悬浮
property alias containsPress: area.containsPress //导出鼠标按下
property int currentStyle:TImgTextBtn.Style.CircleButton
signal clicked(); //自定义点击信号
Image {
id: img
visible: false
source: "qrc:/Img/3.jpg"
anchors.fill: parent
}
Rectangle{
id:mask_rect
visible: false
anchors.fill: parent
radius: root.radius
}
OpacityMask{
id: mask_image
anchors.fill: img
source: img
maskSource: mask_rect
visible: true
antialiasing: true
}
MouseArea {
id: area
anchors.fill: parent;
hoverEnabled: parent.enabled;
onClicked: root.clicked(); //点击时触发自定义点击信号
cursorShape: Qt.PointingHandCursor //悬浮或点击时的鼠标样式
}
Text {
id: t
//默认坐标居中
anchors.centerIn: parent
font.family: "Microsoft Yahei"
//默认文字对齐方式为水平和垂直居中
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
//默认宽度为parent的宽度,这样字太长超出范围时自动显示省略号
font.pointSize: 30
text: "自定义按钮"
color: "blue"
}
Component.onCompleted:{
switch(currentStyle)
{
case TImgTextBtn.Style.NormalButton:root.radius=0;break;
case TImgTextBtn.Style.LowRoundCornerButton:root.radius=10;break;
case TImgTextBtn.Style.HighRoundCornerButton:root.radius=50;break;
case TImgTextBtn.Style.CircleButton:root.radius=root.width/2;break;
default:break;
}
}
}
6.在父界面进行调用,我们使用row布局显示4个不同的按钮
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 840
height: 400
title: qsTr("自定义按钮测试")
Row{
id:row_layout
anchors.fill: parent
spacing: 10
TImgTextBtn{
id:cusbtn_normal
currentStyle:TImgTextBtn.Style.NormalButton
text:"正常按钮"
textColor:"red"
}
TImgTextBtn{
id:cusbtn_lowround
currentStyle:TImgTextBtn.Style.LowRoundCornerButton
text:"低圆角按钮"
textColor:"red"
}
TImgTextBtn{
id:cusbtn_highround
currentStyle:TImgTextBtn.Style.HighRoundCornerButton
text:"高圆角按钮"
textColor:"red"
}
TImgTextBtn{
id:cusbtn_circle
currentStyle:TImgTextBtn.Style.CircleButton
text:"正圆形按钮"
textColor:"red"
}
}
}
7.运行效果