【QML】实现一个炫酷小键盘

个人声明：
   由于之前发现有人将博客转载到私人博客上，并没有标记博文转载出处，所以在此将个人声明放置在最文章的最开头，希望转载的博主能够通知我一声，尊重一下别人的成果。以下内容，纯属个人观点，不喜勿喷。未经本人同意，不得私自转载。博客中出现的代码仅供学习参考，不得有其他用途。若文中存在纰漏，或读者有更好的建议，欢迎留言探讨。也可邮箱联系：yxyx_0212@163.com

   前段时间，在知乎上看到了一篇关于Qt实现小键盘的博文，觉得挺有趣的，便照着玩了一下，其效果如图1所示。

图1 小键盘效果示意图    由于忘记了文章链接，加之Qt实现部分也是照抄的，在此就不详细讲述实现过程了，毕竟是用了别人的劳动成果。关于Qt实现UI功能，除了用Qt Designer拖拽窗体实现UI绘制，并结合C++实现功能外，也可用QML实现UI绘制，配合C++实现功能。如果用Qt Designer设计过大型项目就知道，光UI逻辑就需要花费大量的代码篇幅，费时费力。如果需求变更频繁，UI的更改和版本维护就会存在很大问题。作为一个半路出家的程序员，也不是专门学UI设计的，并不懂MVC模式，也是最近刷哔站视频时才了解到。不过用QML实现UI逻辑，目前学习资料较少，学习成本较高，基本上都是凭借C++开发经验，结合Qt官方文档，学习并使用QML的。

   写篇文章的时候，我也是第一次使用QML实现UI逻辑，也是实现一个小键盘，不过效果与图1还是存在较大差异的，其效果如图2所示。在键盘显示时，会有动态的辉光效果，鼠标悬停在某个键时，会变成灰色，由于在制作gif的时候漏掉了，悬停效果显示不出来。
   话不多说，直接上代码，以下便是实现图2效果的全部代码

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtGraphicalEffects 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("QtKeyBoard")
	// 窗体背景填充黑色
    Rectangle {
        id: background
        anchors.fill: parent
        color: "black"
    }
	// Grid布局
    Grid {
        id:grid
        columns: 3
        rows: 4
        spacing:8
        anchors.centerIn: parent
        // 绘制键盘
        Repeater {
            model: ["7", "8", "9", "4", "5", "6", "1", "2", "3", "*", "0", "#"]
            Button {
                id: btn
                width: 100
                height: 50
                // 设置键盘文字显示
                Text {
                    text: qsTr(modelData)
                    anchors.centerIn: parent
                    font.pointSize: 25
                    color: "red"
                }
				// 设置键盘背景以及辉光效果
                background: Rectangle {
                    id: bckRect
                    anchors.centerIn: parent
                    color: btn.hovered ? "#555555" : "#101010"
                    radius: 4
                    layer.enabled: true
                    layer.effect: Glow{
                        id: glow
                        anchors.fill: bckRect
                        radius: 10
                        samples: 17
                        color: "#840000"
                        source: bckRect
                        SequentialAnimation{
                            running: true
                            loops: Animation.Infinite
                            NumberAnimation {
                                target: glow
                                property: "spread"
                                to: 0
                                duration: 1000
                            }
                            NumberAnimation {
                                target: glow
                                property: "spread"
                                to: 0.5
                                duration: 1000
                            }
                        }
                    }
                }

            }
        }
    }
}

   代码中，主要涉及Rectangle，Grid，Repeater，Button，Glow，SequentialAnimation等方法的使用。其属性，信号等都可以在Qt助手中查到，学习使用并不是太难。不过对于刚入手QML的人来讲，可能会存在诸多疑惑，不知道怎么实现功能，或者用什么方法实现，这也是我当下面临的问题。希望有懂行的大佬能够指点一二，不过个人觉得，了解常见控件属性并熟练使用，应该是唯一能走的捷径了。