QML(一)：自定义圆角按钮的处理

设计自己的按钮作为组件使用

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.运行效果