【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.0ApplicationWindow {visible: truewidth: 640height: 480title: qsTr("QtKeyBoard")// 窗体背景填充黑色Rectangle {id: backgroundanchors.fill: parentcolor: "black"}// Grid布局Grid {id:gridcolumns: 3rows: 4spacing:8anchors.centerIn: parent// 绘制键盘Repeater {model: ["7", "8", "9", "4", "5", "6", "1", "2", "3", "*", "0", "#"]Button {id: btnwidth: 100height: 50// 设置键盘文字显示Text {text: qsTr(modelData)anchors.centerIn: parentfont.pointSize: 25color: "red"}// 设置键盘背景以及辉光效果background: Rectangle {id: bckRectanchors.centerIn: parentcolor: btn.hovered ? "#555555" : "#101010"radius: 4layer.enabled: truelayer.effect: Glow{id: glowanchors.fill: bckRectradius: 10samples: 17color: "#840000"source: bckRectSequentialAnimation{running: trueloops: Animation.InfiniteNumberAnimation {target: glowproperty: "spread"to: 0duration: 1000}NumberAnimation {target: glowproperty: "spread"to: 0.5duration: 1000}}}}}}}
}

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

【QML】实现一个炫酷小键盘相关推荐

一个炫酷的仿雷达扫描和扩散效果——自定义View就是这么简单
高仿雷达扫描效果和仿水波纹中心扩散效果,手把手教你撸一个炫酷的自定义view. 于亚豪的博客地址: blog.csdn.net/androidstar- 我们先看效果图吧 Markdown Markd ...
java比较炫的登录界面_教你写一个炫酷的Material Design 风格的登录和注册页面
每个人都会喜欢漂亮的登录界面,一个App 给人们的第一印象是非常重要的. 这篇文章将教你使用谷歌材料设计规范(Material design spec )和谷歌的新的设计支持库( design sup ...
一个炫酷的二维码生成项目附源码
前阵子打算换一个炫酷的公众号二维码,无奈市面上很多的二维码修改器都不尽人意. 草料二维码也挺炫酷的,但是也没有满意的效果. 于是又去万能的github逛了一下,终于找到了一款开源的二维码修改器. 这个 ...
如何做一个炫酷的动画网站-css实现图片上下浮动效果
目前网站制作技术已经非常成熟.所以要实现一个炫酷的动画网站还是非常容易,现在通过js和css就都能实现.直接css就能实现各种效果,下面我们来通过一个小动画看看如何用css来实现让你的网站图片上下浮动 ...
python实现动态壁纸_流弊了！竟然用Python做一个炫酷的小姐姐动态壁纸
原标题:流弊了!竟然用Python做一个炫酷的小姐姐动态壁纸公众号关注 " 菜鸟学Python" 设为 "星标",每天带你玩转Python! (女神IU,图片 ...
一个炫酷的flash网站模板
这是一个炫酷的flash欧美网站模板,它包括首页,公司简介,留言等五个页面,界面转换非常的炫酷!他还有时间.全屏.背景音乐开关的功能!有兴趣的朋友可以看看!贴几张网站图片给大家看看! 下载后直接找到s ...
元旦到了，手把手教你用 Python 制作一个炫酷烟花秀
大家好,我是小张, 今天是2021 的最后一天,到了这个时间点,部分小伙伴已经开始复盘这一年的得与失.比如今年增加了多少技能点,看了多少本书,写了多少篇文章或者年前的小目标实现进度大概多少等等:做一个 ...
proj Java_proj 一个炫酷的飞机大战java游戏,很好玩的，很酷炫用了的图形界面 Games 256万源代码下载- www.pudn.com...
文件名称: proj下载收藏√ [ 5 4 3 2 1 ] 所属分类: Games 开发工具: Java 文件大小: 3435 KB 上传时间: 2016-05-11 下载次数: 0 提 ...
【Doxygen】为项目生成一个炫酷的说明文档
[Doxygen]为项目生成一个炫酷的说明文档目录 [Doxygen]为项目生成一个炫酷的说明文档 1 Doxygen简介 2 安装 Doxygen 3 基本使用方式 3.1 从命令行生成 3.1. ...

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

【QML】实现一个炫酷小键盘相关推荐

最新文章

热门文章