QML 自定义Button

最新推荐文章于 2024-09-12 21:51:06 发布
最新推荐文章于 2024-09-12 21:51:06 发布
阅读量3.5k 收藏 17
点赞数 1
分类专栏： QML 文章标签： qml 自定义 按钮 qml 自定义 button qml   button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21078557/article/details/86063632
版权

写在前面：
正如标题所说，本博客实现的是自定义 qml 中的Button。

一：实现效果
1、Button设置 flat 属性为false
在这里插入图片描述

2、Button 设置 flat 属性为 true
在这里插入图片描述

二、实现总结：
除了和原生qml自带的Button的外边框不一样外，其他的都是一样的，给需要的朋友参考一下。

三、代码下载地址：
点击这里下载代码

四、如何使用
4.1、文件结构
在这里插入图片描述

4.2 调用代码：

UserButton{
    width: parent.height * 0.5 - 5
    height: parent.height * 0.5 - 5
    anchors.horizontalCenter: parent.horizontalCenter
    icon: "\uf062"
    family: defaultIconFamily //这里使用的是FontAwesome字体库
    btnColor: "white"
    flat: true
    onClicked: {
         console.log("this is UserButton Cliecked...")
    	}
    }

五、各个文件实现：

1、首先需要实现按钮的水波纹效果，代码如下（Ripple.qml）：

/*
 * This file is part of Fluid.
 *
 * Copyright (C) 2018 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
 * Copyright (C) 2018 Michael Spencer <sonrisesoftware@gmail.com>
 *
 * $BEGIN_LICENSE:MPL2$
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * $END_LICENSE$
 */

import QtQuick 2.10
//import Fluid.Core 1.0
//import Fluid.Controls 1.0 as FluidControls
//import Fluid.Effects 1.0

/*!
   \qmltype Ripple
   \inqmlmodule Fluid.Controls
   \ingroup fluidcontrols

   \brief Represents a Material Design ripple ink animation used in various touchable components.

   This component is useful for including in Material Design-specific components, which should be implemented using the +material file selector. Eventually this should be upstreamed to QtQuick
   Controls 2.

    For more information you can read the
    \l{https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move}{Material Design guidelines}.
 */
MouseArea {
    id: ripple

    /*!
        \qmlproperty color color

        The color of the ripple. Defaults to black with 12% opacity.
    */
    property color color: Qt.rgba(0,0,0,0.12)

    /*!
        \qmlproperty bool circular

        Set to \c true if the ripple is used on a circular component, such as a button in an
        action bar or a floating action button.
    */
    property bool circular: false

    /*!
        \qmlproperty bool centered

        Set to \c true if the ripple should be centered regardless of where the mouse/touch
        input came from.
    */
    property bool centered: false

    /*!
        \qmlproperty bool focused

        Set to \c true if the component is focused and should display a focus ripple.
    */
    property bool focused

    /*!
        \qmlproperty color focusColor

        The color of the focus ripple. Also used to determine the color of the focus background
        behind the ripple.

        \sa Ripple::focused
    */
    property color focusColor: "transparent"

    /*!
        \qmlproperty int focusWidth

        The width of the focus ripple.

        \sa Ripple::focused
    */
    property int focusWidth: width - 32

    /*!
        \qmlproperty Item control

        Control that that needs the ripple effect.
    */
    property Item control

    clip: true
    hoverEnabled: false

    Connections {
        target: control

        onPressedChanged: {
            if (!control.pressed)
                __private.removeLastCircle()
        }
    }

    onPressed: {
        __private.createTapCircle(mouse.x, mouse.y)

        if (control)
            mouse.accepted = false
    }

    onReleased: __private.removeLastCircle()
    onCanceled: __private.removeLastCircle()

    QtObject {
        id: __private

        property int startRadius: circular ? width/10 : width/6
        property int endRadius
        property bool showFocus: true

        property Item lastCircle

        function createTapCircle(x, y) {
            endRadius = centered ? width/2 : radius(x, y) + 5
            showFocus = false

            lastCircle = tapCircle.createObject(ripple, {
                "circleX": centered ? width/2 : x,
                "circleY": centered ? height/2 : y
            })
        }

        function removeLastCircle() {
            if (lastCircle)
                lastCircle.removeCircle()
        }

        function radius(x, y) {
            var dist1 = Math.max(dist(x, y, 0, 0), dist(x, y, width, height))
            var dist2 = Math.max(dist(x, y, width, 0), dist(x, y, 0, height))

            return Math.max(dist1, dist2)
        }

        function dist(x1, y1, x2, y2) {
            var distX = x2 - x1
            var distY = y2 - y1

            return Math.sqrt(distX * distX + distY * distY)
        }
    }

    Rectangle {
        id: focusBackground
        objectName: "focusBackground"

        width: parent.width
        height: parent.height

        color: focusColor.a > 0
                ? Qt.rgba(0,0,0,0.2) : Qt.rgba(0,0,0,0.1)

        opacity: __private.showFocus && focused ? 1 : 0

        Behavior on opacity {
            NumberAnimation { duration: 500; easing.type: Easing.InOutQuad }
        }
    }

    Rectangle {
        id: focusCircle
        objectName: "focusRipple"

        property bool focusedState

        x: (parent.width - width)/2
        y: (parent.height - height)/2

        width: focused
                ? focusedState ? focusWidth
                               : Math.min(parent.width - 8, focusWidth + 12)
                : parent.width/5
        height: width

        radius: width/2

        opacity: __private.showFocus && focused ? 1 : 0

        color: focusColor.a === 0 ? Qt.rgba(1,1,1,0.4) : focusColor

        Behavior on opacity {
            NumberAnimation { duration: 500; easing.type: Easing.InOutQuad }
        }

        Behavior on width {
            NumberAnimation { duration: focusTimer.interval; }
        }

        Timer {
            id: focusTimer
            running: focused
            repeat: true
            interval: 800

            onTriggered: focusCircle.focusedState = !focusCircle.focusedState
        }
    }

    Component {
        id: tapCircle

        Item {
            id: circleItem
            objectName: "tapRipple"

            property bool done

            property real circleX
            property real circleY

            property bool closed

            width: parent.width
            height: parent.height

            function removeCircle() {
                done = true

                if (fillSizeAnimation.running) {
                    fillOpacityAnimation.stop()
                    closeAnimation.start()

                    circleItem.destroy(500);
                } else {
                    __private.showFocus = true
                    fadeAnimation.start();

                    circleItem.destroy(300);
                }
            }

            Item {
                id: circleParent

                width: parent.width
                height: parent.height

                visible: !circular

                Rectangle {
                    id: circleRectangle

                    x: circleItem.circleX - radius
                    y: circleItem.circleY - radius

                    width: radius * 2
                    height: radius * 2

                    opacity: 0
                    color: ripple.color

                    NumberAnimation {
                        id: fillSizeAnimation
                        running: true

                        target: circleRectangle; property: "radius"; duration: 500;
                        from: __private.startRadius; to: __private.endRadius;
                        easing.type: Easing.InOutQuad

                        onStopped: {
                            if (done)
                                __private.showFocus = true
                        }
                    }

                    NumberAnimation {
                        id: fillOpacityAnimation
                        running: true

                        target: circleRectangle; property: "opacity"; duration: 300;
                        from: 0; to: 1; easing.type: Easing.InOutQuad
                    }

                    NumberAnimation {
                        id: fadeAnimation

                        target: circleRectangle; property: "opacity"; duration: 300;
                        from: 1; to: 0; easing.type: Easing.InOutQuad
                    }

                    SequentialAnimation {
                        id: closeAnimation

                        NumberAnimation {
                            target: circleRectangle; property: "opacity"; duration: 250;
                            to: 1; easing.type: Easing.InOutQuad
                        }

                        NumberAnimation {
                            target: circleRectangle; property: "opacity"; duration: 250;
                            from: 1; to: 0; easing.type: Easing.InOutQuad
                        }
                    }
                }
            }

            CircleMask {
                anchors.fill: parent
                source: circleParent
                visible: circular
            }
        }
    }
}

2、实现背景遮挡遮罩（CircleMask.qml）：

/*
 * This file is part of Fluid.
 *
 * Copyright (C) 2018 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
 * Copyright (C) 2018 Michael Spencer <sonrisesoftware@gmail.com>
 *
 * $BEGIN_LICENSE:MPL2$
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * $END_LICENSE$
 */

import QtQuick 2.10
import QtGraphicalEffects 1.0

/*!
  \qmltype CircleMask
  \inqmlmodule Fluid.Effects
  \ingroup fluideffects

  \brief Circular mask.
*/
Item {
    id: item

    /*!
        \qmlproperty variant source

        This property defines the source item that is going to be masked.
    */
    property alias source: mask.source

    Rectangle {
        id: circleMask

        width: parent.width
        height: parent.height

        smooth: true
        visible: false

        radius: Math.max(width/2, height/2)
    }

    OpacityMask {
        id: mask

        width: parent.width
        height: parent.height

        maskSource: circleMask
    }
}

3、实现自定义按钮（UserButton.qml）：

import QtQuick 2.9
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.3

/**
 * @Title: 子菜单按钮
 * @FileName: UserButton.qml
 * @Description: 子菜单按钮布局
 * @Autor: zhanghao kinderzhang@foxmail.com
 * @date: 2019-01-07 10:48:52
 * @update_author
 * @update_time
 * @version V1.0
*/

Pane {
    contentWidth: width
    contentHeight: height
    padding: 0
    Material.elevation: 2

    id: root
    property string icon    // 图标
    property string toolTipStr    // 文本指示字符串
    property string family  // 字体协议族名字
    property string backColor: "grey" //按钮背景颜色
    property double backOpacity: 0.2 //按钮背景透明度
    property bool flat: false //是否显示外边框
    property bool isToolTip: false // 是否显示提示信息
    signal clicked()  // 点击事件
    property string btnColor: "#616161"    // 按钮颜色

    property double tempopacity: 0.2
    onFlatChanged: {
        if(flat){
            Material.elevation = 0
            tempopacity = 0
        }else{
            Material.elevation = 1
            tempopacity = 0.2
        }
    }

    Rectangle{
        id: back
        anchors.fill: parent
        color: backColor//Material.background
        opacity: tempopacity
        radius: 5

        NumberAnimation{
            id: enterAnimation
            target: back
            property: "opacity"
            easing.type: Easing.OutQuad
            from: tempopacity
            to: backOpacity + tempopacity
        }

        NumberAnimation{
            id: exitAnimation
            target: back
            property: "opacity"
            duration: 500
            easing.type: Easing.OutQuad
            from: backOpacity + tempopacity
            to: tempopacity
        }

    }

    // 图标
    Text {
        anchors.fill: parent
        font.family: family
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        color: btnColor
        text: icon
        Component.onCompleted: font.pointSize = parent.height / 2
    }
    ToolTip {
        id: tooltip
        text: toolTipStr
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        Component.onCompleted: {
            this.clicked.connect(root.clicked)
        }
        // 水波纹
        Ripple {
            anchors.fill: parent
            color: Material.rippleColor
            control: parent
            focused: false
        }
        onEntered: {
            if(isToolTip)
                tooltip.visible = true
            back.color = backColor
            enterAnimation.start()
        }
        onExited: {
            if(isToolTip)
                tooltip.visible = false
            exitAnimation.start()
        }
    }
}
QML自定义Button样式
Allen Roson
08-29 955
QML Button样式；QtQuick自定义按样式；
QML 自定义button样式1
lys211的专栏
03-29 4871
QML 自定义button样式1 自己写的小按键，默认状态是： 点击一下： 动态图： (好像也不能动态显示....) 使用时可以这样： FenceButton{   id:fenceBotton;   x:5;   initX:5;   anchors.left: parent.left;   anchors.
qml Button 按钮
gopher9511的博客
09-12 487
你可以通过修改Button的contentItem和background属性来自定义按钮的外观。Button {radius: 5在QML中，Button控件的父类是AbstractButton。AbstractButton是一个抽象基类，提供了按钮控件的基本功能和接口，包括点击、按下、释放等事件的处理。Button继承了AbstractButton的所有属性和方法，并在此基础上添加了一些特定于按钮的属性和行为。AbstractButton 的主要属性和方法属性。
qml 自定义 button
01-08
此文件夹里面是实现qml 自定义 button的代码，具体的示例在我的博客里面可以查看，不好用不要下载。https://blog.csdn.net/qq_21078557/article/details/86063632
Qml之自定义Button
u014627020的博客
12-23 1493
自定义Button控件如何分为带图片的Iconbutton和原生控件重写的Button
QML 自定义 Button
YumOS的博客
06-30 1334
QML 中 QtQuick.Controls 模块提供的Button组件能购满足我们绝大多数的使用场景，但是很多情况下，尤其是在复杂页面的制作过程中，我们的按钮要保证和界面具有高度的统一性，就需要自己定义按钮的外观及响应动画，这个时候我们就需要自己封装一个按钮组件。
qml自定义Button按钮
热门推荐
Turbyun的博客
01-09 1万+
要使用button类，就必须 importQtQuick.Controls1.4 上面的代码创建了一个名字为Quit的按钮，并且在按钮单击的时候执行退出操作。 下面来看下Button有哪些属性吧。 text：按钮文字 checkable：设置button是否可选，如果可选，保存button选中状态。 iconName：图标的名字，iconName的优先级是高于iconSource的
QML中自定义button按钮
Imsansan的博客
04-25 1486
QML中自定义button按钮 在qml中自定义button控件需要用到ButtonStyle，头文件要引入QtQuick.Controls.Styles 本文以定义一个多边形按钮为例，实现效果 实现代码 在这里插入代码片 `import QtQuick 2.12 import QtQuick.Window 2.2 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 Window { id: mainWindow v
QML 自定义Button
06-29
QML 中 QtQuick.Controls 模块提供的`Button`组件能购满足我们绝大多数的使用场景，但是很多情况下，尤其是在复杂页面的制作过程中，我们的按钮要保证和界面具有高度的统一性，就需要自己定义按钮的外观及响应动画，...
QML的Button自定义样式
07-12
在QML中用ButtonStyle来自定义Button的样式，用到了states属性
qml控件：自定义图标按钮
04-21
Ubuntu16.04 + Qt5.7.1，qml实现的简易图标按钮控件。
QML_自定义按钮
会选科技的博客
07-21 539
QML_自定义按钮
【QML】QML自定义按钮
iriczhao的博客
11-17 3469
一、引言 在qml开发中，本文总结自己在开发中比较喜欢的实现自定义按钮的两种方式： （1）Button+states （2）Image + MouseArea 【效果如下】 — 二、自定义按钮 2-1、以贴图方式实现自定义按钮 （直接上码啦） //【Button + states 实现】 import QtQuick 2.10 import QtQuick.Templates 2.1 as T T.Button { id: control implicitWidth: Math.max(
【Qt QML入门】Button组件
wangyi463295828的博客
12-14 1595
Button表示一个推按钮控件，用户可以按下或单击它。
QML 自定义控件Button，采用QtQuick.Controls 1.0和2.0两版本实现
被封印的橘猫的博客
12-17 2851
QML 界面开发时，相同界面需要复用同种控件，此系列文章会完成大多常用的界面开发控件。
QML编写自定义控件：自定义按钮
友善啊，朋友的博客
09-26 3584
从0开始自定义一个按钮，按钮应该有如下功能： 1、按钮上有文字、按下时文字要有下沉的效果 2、按钮有交互效果，悬浮、按下按钮的颜色要变化 3、可以设置说明文字 4、按钮按下会发出信号 下面依次来实现 首先选择Rectangle作为按钮的区域，也可以用Item，不过Item没有颜色属性，还要在Item下面套一个Rectangle。设置圆角为6 给区域加上鼠标区域，并根据鼠标是否进入按钮区域、鼠标是否按下来设置区域的不同颜色 import QtQuick 2.0 import QtQuick.
QML之自定义Button
liuhongwei123888的专栏
06-18 8417
Button.qml-----------------------------import QtQuick 1.0Item { id: main width: 600 height: 300 Button { x: 80 y: 100 normalImage: "images/pause.
QML之Button学习
枫影竹韵的博客
12-22 446
通过帮助文档去学习QML的Button。 打开Qt Assistant，搜索Button，如下图。 需要引入对应的库
qml自定义button unkown
最新发布
10-16
在QtQuick的QML（Qt Meta Language）中，自定义按钮通常意味着创建一个扩展了`QtQuick.Controls.Button`基础类型的组件。如果你遇到"unknown"错误，这可能表示你正在尝试使用的属性、信号或方法在当前上下文中未被定义或者还没有被实现。 要自定义一个QML Button，你可以遵循以下步骤： 1. 创建一个新的`.qml`文件，并扩展`Button`基础类型： ```qml import QtQuick 2.0 import QtQuick.Controls 2.0 MyCustomButton.qml: Item { id: myButton width: 150 height: 50 // 自定义样式和行为 onClicked: { // 当按钮被点击时执行的逻辑 } property alias text: buttonText // 如果需要自定义文本属性 } ``` 2. 在`onCreated`或适当的地方注册你的新类型： ```javascript Component.onCompleted: { Qt.qmlRegisterType(MyCustomButton, "YourNamespace", 1, 0, "MyCustomButton"); } ``` 3. 在QML中使用你的自定义按钮： ```qml YourNamespace::MyCustomButton { anchors.centerIn: parent text: "我的定制按钮" } ``` 如果依然报"unkown"错误，可能是路径、命名冲突或者是自定义组件尚未注册到全局。检查你的导入语句，确保类型名称正确，以及组件是否已按照上述步骤进行了注册。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值