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

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

Alt


图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的时候漏掉了,悬停效果显示不出来。Alt
   话不多说,直接上代码,以下便是实现图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的人来讲,可能会存在诸多疑惑,不知道怎么实现功能,或者用什么方法实现,这也是我当下面临的问题。希望有懂行的大佬能够指点一二,不过个人觉得,了解常见控件属性并熟练使用,应该是唯一能走的捷径了。