8. QML封装控件 --- 椭圆按钮

最新推荐文章于 2024-07-15 20:05:59 发布

山间点烟雨

最新推荐文章于 2024-07-15 20:05:59 发布

阅读量304

点赞数

分类专栏： QT_QML自封装控件库文章标签： QML 自定义控件

本文链接：https://blog.csdn.net/FY_13781298928/article/details/130502508

版权

QT_QML自封装控件库专栏收录该内容

15 篇文章 4 订阅

订阅专栏

该文章展示了如何使用QtQuick创建一个自封装的椭圆形状按钮，包括设置颜色属性、点击事件、文字内容和尺寸。代码中利用ShapePath绘制了左右两个半圆形成椭圆按钮，并添加了点击时的缩放动画效果。同时，按钮具备可配置的文字颜色和大小。

摘要由CSDN通过智能技术生成

1. 效果展示：

自封装椭圆按钮

2. 整体代码：

import QtQuick 2.12
import QtQuick.Shapes 1.15

Rectangle {
    id:root
    anchors.centerIn: parent
    implicitWidth: 50
    implicitHeight: 40
    color: btnColor

    //颜色属性
    property color btnColor: "lightgray"
    //点击事件属性
    property var btnFunc:function(){}
    //按钮文字属性
    property string btnText:"Button"
    //文字颜色属性
    property color textColor:"black"
    //文字尺寸属性
    property int textSize:16

    //绘制左半圆
    Shape {
        anchors.left: parent.left
        width: root.height
        height: root.height
        ShapePath {
            strokeWidth: 1
            strokeColor: root.btnColor
            fillColor: root.btnColor
            //指定绘制起点
            startX: 0
            startY: 0
            PathArc {
                //指定绘制终点
                x: 0
                y: root.height
                radiusX: root.height * 0.5
                radiusY: root.height * 0.5
                useLargeArc: true
                //指定绘制方向为逆时针
                direction: PathArc.Counterclockwise
            }
        }
    }
    //绘制右半圆
    Shape {
        anchors.right: parent.right
        width: root.height
        height: root.height
        ShapePath {
            strokeWidth: 1
            strokeColor: root.btnColor
            fillColor: root.btnColor
            //指定绘制起点
            startX: root.height
            startY: 0
            PathArc {
                //指定绘制终点
                x: root.height
                y: root.height
                radiusX: root.height * 0.5
                radiusY: root.height * 0.5
                useLargeArc: true
                //指定绘制方向为顺时针
                direction: PathArc.Clockwise
            }
        }
    }
    //点击触发动画
    SequentialAnimation{
        id:anim
        running: false
        PropertyAnimation {
            id: scaleSAnim
            target: root
            property: "scale"
            to: 0.9
            easing.type: Easing.OutQuad
            duration: 50
        }
        PropertyAnimation {
            id: scaleLAnim
            target: root
            property: "scale"
            to: 1.0
            easing.type: Easing.OutQuad
            duration: 50
        }

    }
    //鼠标控制区域
    MouseArea {
        anchors.fill: parent
        onClicked: {
            anim.running = true
            root.btnFunc()
        }
    }
    //按钮文字
    Text {
        text: root.btnText
        color: root.textColor
        font.bold: true
        font.pixelSize: root.textSize
        anchors.centerIn: parent
    }
}