第三代软件开发-自定义Button
[toc]
关键字： 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 系统开发，那可以到声音控制下面看看，是不是多出一堆音轨来，虽然在当下没有什么问题，不过我也不知道在未来会不会存在问题，也考虑使用一个指针，但是如果一个对象的话，那同时就只能播放一种声音了，所以，在当下，我认为他是合适的。后期随着需求再说。
