个人声明: 以下内容,纯属个人观点,不喜勿喷。 未经本人同意,不得私自转载。 博客中出现的代码仅供学习参考,不得有其他用途。 若文中存在纰漏,或读者有更好的建议,欢迎留言探讨。 也可邮箱联系:[email protected]
由于之前发现有人将博客转载到私人博客上,并没有标记博文转载出处,所以在此将个人声明放置在最文章的最开头,希望转载的博主能够通知我一声,尊重一下别人的成果。
前段时间,在知乎上看到了一篇关于Qt实现小键盘的博文,觉得挺有趣的,便照着玩了一下,其效果如图1所示。
关于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的人来讲,可能会存在诸多疑惑,不知道怎么实现功能,或者用什么方法实现,这也是我当下面临的问题。 希望有懂行的大佬能够指点一二,不过个人觉得,了解常见控件属性并熟练使用,应该是唯一能走的捷径了。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)