第三代软件开发-自定义Button

关键字： Qt、 Qml、 Button、 关键字4、 关键字5

项目介绍

欢迎来到我们的 QML & C++ 项目！这个项目结合了 QML（Qt Meta-Object Language）和 C++ 的强大功能，旨在开发出色的用户界面和高性能的后端逻辑。

在项目中，我们利用 QML 的声明式语法和可视化设计能力创建出现代化的用户界面。通过直观的编码和可重用的组件，我们能够迅速开发出丰富多样的界面效果和动画效果。同时，我们利用 QML 强大的集成能力，轻松将 C++ 的底层逻辑和数据模型集成到前端界面中。

在后端方面，我们使用 C++ 编写高性能的算法、数据处理和计算逻辑。C++ 是一种强大的编程语言，能够提供卓越的性能和可扩展性。我们的团队致力于优化代码，减少资源消耗，以确保我们的项目在各种平台和设备上都能够高效运行。

无论您是对 QML 和 C++ 开发感兴趣，还是需要我们为您构建复杂的用户界面和后端逻辑，我们都随时准备为您提供支持。请随时联系我们，让我们一同打造现代化、高性能的 QML & C++ 项目！

重要说明☝

☀该专栏在第三代软开发更新完将涨价

自定义Button

大家有没有这样的场景，一个页面有很多个样式一致的Button，他们有很多内容都是相同的，如果我们去实现他，按照传统的方法，那就是复制、粘贴、粘贴、粘贴，是不是？

那么如果我们把这些共同的东西，抽象出来，整个一个基类呢，是不是就可以不用粘贴、粘贴、粘贴呢了。

在或者，我们需要的某些功能基础的Button不能满足呢，所以就有了自定义Button的需求了。目前我的代码里面有三个类型的Button，这里分享一下

第一类型-加声音

import QtQml 2.14 as Qml
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Private 1.0
import QtMultimedia 5.15
/**
  重写Button，主要为了按钮按下时有声音
  其次，这是第一代Qml Button，为了使用里面的样式和排他属性
  其他地方尽量使用新的Button
 */
Button
{
    id:root
    SoundEffect {
        id: playSound
        source: "qrc:/Audio/T_Resource/T_Audio/T_Base/buttonTach.wav"
    }
    onClicked: playSound.play()
}

这个是最简单了吧，就是一个正常的Button，我给他加了一个播放声音的选项，并且在按钮对应的Clicked事件中触发了声音的播放，这里为啥没有用MediaPlayer，咱们前面也说过了，提示应，用SoundEffect才是正确的路子。

第二类型-加样式

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtMultimedia 5.15
/**
 重写Button，主要为了按钮按下时有声音
*/
Button
{
    id:root
    font.pointSize: 14
    property string source: ""
    background: Rectangle{
        anchors.fill: parent
        color: root.checked ?  "#00FF00"  : (root.pressed ? "#FFB743" :"#44ADA5")
        Image {
            anchors.fill: parent
            source: root.source
        }
    }
    contentItem: Text {
        text: root.text
        font: root.font
        opacity: enabled ? 1.0 : 0.3
        color: root.checked ?  "#000000"  : (root.pressed ? "#000000" :"#FFFFFF")
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    SoundEffect {
        id: playSound
        source: "qrc:/Audio/T_Resource/T_Audio/T_Base/buttonTach.wav"
    }
    onClicked: playSound.play()
}

第二个版本，就是在第一个的版本上面加上了样式，说道样式，这里又不得不说百度了，这个问题大家可以百度到多个版本，但是那个是正确的，哪个是合理的，没有人给出解释，因为在当时的环境下就是合理的，这里我推荐大家还是直接看帮助文档，那是最合理的法子，那么我这里分享的仅仅是Qt 5.15.2 下Qt帮助文档中的法子，这个是基于Quick 2 的路子。

import QtQuick 2.12
import QtQuick.Controls 2.12

 Button {
     id: control
     text: qsTr("Button")

     contentItem: Text {
         text: control.text
         font: control.font
         opacity: enabled ? 1.0 : 0.3
         color: control.down ? "#17a81a" : "#21be2b"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
     }

     background: Rectangle {
         implicitWidth: 100
         implicitHeight: 40
         opacity: enabled ? 1 : 0.3
         border.color: control.down ? "#17a81a" : "#21be2b"
         border.width: 1
         radius: 2
     }
 }

可对比下Quick 1 中的路子

 Button {
     text: "A button"
     style: ButtonStyle {
         background: Rectangle {
             implicitWidth: 100
             implicitHeight: 25
             border.width: control.activeFocus ? 2 : 1
             border.color: "#888"
             radius: 4
             gradient: Gradient {
                 GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
                 GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
             }
         }
     }
 }

而我想说的是这两种路子在百度里面都有，但是却没有人告诉你为什么，你也好奇，为啥有的是style，有的却不是。

第三类型-减声音

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtMultimedia 5.15
/**
 重写Button，主要为了按钮按下时有声音
*/
Button
{
    id:root
    font.pointSize: 14
    property string source: ""
    background: Rectangle{
        anchors.fill: parent
        color: root.checked ?  "#00FF00"  : (root.pressed ? "#FFB743" :"#44ADA5")
        Image {
            anchors.fill: parent
            source: root.source
        }
    }
    contentItem: Text {
        text: root.text
        font: root.font
        opacity: enabled ? 1.0 : 0.3
        color: root.checked ?  "#000000"  : (root.pressed ? "#000000" :"#FFFFFF")
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }
}

第三种也很好理解，就是在第一种的基础上，把声音去掉。因为有的按钮不需要声音。

总结一下

这里我根据自己的需求，把按钮分成了3个类型的按钮，分别实现，同样，我也可以这些合成一种按钮，完了在内部通过属性区分，所以程序的世界里面真的是条条大路同罗马，就看那个更适合。没有最好，只有最适合。

存在一点小问题

大家看到，我在第一个类型和第二个类型中是有一个SoundEffect的模块的，如果我这么写会发生什么，嘿嘿，聪明的你是不是发现问题了，这个SoundEffect会伴随我的按钮的创建出一堆了，如果你碰巧用的也是ubuntu 系统开发，那可以到声音控制下面看看，是不是多出一堆音轨来，虽然在当下没有什么问题，不过我也不知道在未来会不会存在问题，也考虑使用一个指针，但是如果一个对象的话，那同时就只能播放一种声音了，所以，在当下，我认为他是合适的。后期随着需求再说。

---