前段时间接触了一下QML,深深地被这门强大易用的语言所吸引。
QML的语法类似CSS,可以引入javascript作为逻辑,还能够和C++对象交互。
QML带来的好处至少有以下几点:
- 分工更明确:设计师可以专攻QML制作UI,C++工程师也能专注于自己的本职工作。
- 开发更高效:重新编写的QML不需要编译(因为它是一门脚本语言),所以只需要刷新一下你的QML Viewer就可以了。
- 界面更精美:QML开发和网页开发很相似,所以我们可以比较容易地把一个精美的网页效果移植到本地程序。
- 风格更一致:Qt本身是一个跨平台的开发框架,所以我们在Window XP上看到的是一个样子,Win7上看到的是另一个样子,到了Ubuntu或者Mac更是变了模样,使用QML可以屏蔽这些不一致。
下面带来一个简单的示例,希望对读者们有帮助。
谷歌桌面相信很多人都用过,双击ctrl可以呼出一个浮动的搜索框,非常方便。我们将使用QML仿制这一效果。先看效果图:
怎么样?很炫吧~
好的,首先打开你的Qt Creator(QML是Qt4.7以后才有的特性,请升级你的SDK到最新版本
)。然后新建一个项目。接着新建一个C++ Class,命名为FloatBox。现在你的工程的目录结构应该像这样:
接着,再新建一个QML文件:
我们将这个QML文件命名为TextBox。这个QML文件主要是实现搜索框中的文本框。
输入以下代码:
import Qt 4.7
FocusScope {
id: focusScope
width: 600; height: 40
focus:true
BorderImage {
source: "../images/lineedit-bg.png"
width: parent.width; height: parent.height
border { left: 4; top: 4; right: 4; bottom: 4 }
}
Text {
id: typeSomething
anchors.fill: parent; anchors.leftMargin: 8
verticalAlignment: Text.AlignVCenter
text: "\u8BF7\u8F93\u5165\u7F51\u5740"
color: "gray"
}
MouseArea {
anchors.fill: parent
onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel(); }
}
TextInput {
id: textInput
anchors { left: parent.left; leftMargin: 8; right: clear.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
focus: true
font.pixelSize:20
}
Image {
id: clear
anchors { right: parent.right; rightMargin: 8; verticalCenter: parent.verticalCenter }
source: "../images/clear.png"
opacity: 0
MouseArea {
anchors.fill: parent
onClicked: { textInput.text = ''; focusScope.focus = true; textInput.openSoftwareInputPanel(); }
}
}
states: State {
name: "hasText"; when: textInput.text != ''
PropertyChanges { target: typeSomething; opacity: 0 }
PropertyChanges { target: clear; opacity: 1 }
}
transitions: [
Transition {
from: ""; to: "hasText"
NumberAnimation { exclude: typeSomething; properties: "opacity" }
},
Transition {
from: "hasText"; to: ""
NumberAnimation { properties: "opacity" }
}
]
}
你也许会注意到,在Text的text属性中,我输入的是utf编码的汉字。事实上,想要在QML文件里显示中文还是有一点小麻烦的,要么就是用utf编码过的汉字,要么使用Qt翻译家来转换。直接在QML中输入中文将无法显示。
接着,新建ShadowRectangle文件。该文件实现的是阴影效果。代码如下:
import Qt 4.7
Item {
property alias color : rectangle.color
BorderImage {
anchors.fill: rectangle
anchors { leftMargin: 0; topMargin: 0; rightMargin: -8; bottomMargin: -8 }
border { left: 10; top: 10; right: 10; bottom: 10 }
source: "../images/shadow.png"; smooth: true
}
Rectangle { id: rectangle; anchors.fill: parent; radius:5}
}
最后新建main.qml文件,该文件实现的是整个搜索栏的效果。其代码如下:
import Qt 4.7
Rectangle {
id: page
width: 614; height: 54
color: "#7bffffff"
radius:5
MouseArea {
anchors.fill: parent
onClicked: page.focus = false;
}
ShadowRectangle {
color: "#434343"
transformOrigin: "Center"
opacity: 0.97
visible: true
anchors.centerIn: parent; width: 610; height: 50
}
TextBox {
id: search;
visible: true
opacity: 1
anchors.centerIn: parent
}
}
QML的代码通俗易懂,这里就不去解释每一行代码的意思了。
好的,下面让我们把QML制作的搜索栏放置到桌面程序的窗体上。
在你的floatbox.h中添加一个私有变量:
private:
QDeclarativeView *ui;
然后在你的floatbox.cpp的构造函数中输入以下代码:
// 使窗体透明而控件不透明
setWindowFlags(Qt::FramelessWindowHint);
setAttribute(Qt::WA_TranslucentBackground, true);
setStyleSheet("background:transparent;");
ui = new QDeclarativeView;
ui->setSource(QUrl("qrc:/resources/qml/main.qml"));
setCentralWidget(ui);
resize(QSize(630, 60));
细心的你可以发现,我将qml文件加入了Qt的资源系统。这里要说明一点,非常重要:
在QML文件中如果引入了其他文件(包括js文件、图片文件等),要么都加入Qt的资源系统,要么都不加入,因为Qt的资源文件无法和本地文件相互访问。
所以,如果你也和我一样新建了qrc文件,请将qml文件和图片文件一并加入到资源系统中去。如下图:
到了这一步,我们的搜索工具栏差不多要完工了,想要运行,千万不要忘记在pro文件添加declarative模块。
QT += core gui declarative
好的,现在你就可以按下ctrl+R欣赏一下成果了。
最后,老规矩,附上源代码。
- 大小: 5.3 KB
- 大小: 7.4 KB
- 大小: 83.2 KB
- 大小: 3.5 KB
- 大小: 15.9 KB
分享到:
相关推荐
这是我使用qml做的一个小音乐播放器,目前只实现了基本功能,其他的诸如显示歌词,播放列表会在以后的版本添加.如果遇到播放不了的文件可能是缺少解码器,程序在ubuntu14.04下测试通过
而KDDockWidget中其实是支持Tab合并效果,但是在实际使用过程中遇到很多问题,该功能并不是很完善,所以索性自己使用QML来实现tabbar效果,然后结合KDDockWidget,可将每个tab页面进行单独的浮动和缩放。本Demo使用...
qml完美实现异型按钮,本项目是在Qt5.11.1上建立的,需要的朋友请在高版本Qt上运行
利用QML实现树形组件。自带的TreeView不太好用感觉,就参考别人的写了一个
Qt qml 实现毛玻璃效果
QT开发qml实现grideView的翻页效果
qml实现简单的时间选择控件
环境Ubuntu16.04 + Qt5.7.1,使用qml实现的侧边弹窗demo。
Qt5 QML实现,详见博客:https://blog.csdn.net/caoshangpa/article/details/112195530
QCustomPlot 默认是QWidget实现,该demo可以很好的学习QWidget如何转换qml,详情查看博客 https://blog.csdn.net/CLinuxF/article/details/98208351
通过 QML 的PathView来实现酷炫的 Cover Flow 图片轮播效果,http://blog.csdn.net/luoyayun361/article/details/77659386
qml 实现gridview带滚动条和翻页,通过滚动可以实现页数变化,通过点击页数或翻页键可以实现滚动条变化
用QML实现圆形进度条
高仿360安全卫士 9.2 界面 (纯qml实现) 源码
用QML 写的一个界面,天蓝色,自我感觉良好,后续还要与c++交互
可以通过代码学习qml如何与C++打交道,实现不同虚线效果,纯QML无法实现虚线效果,有需要的朋友可以下载
用 QML 实现阴影字体,详情见https://blog.csdn.net/luoyayun361/article/details/80687430
在Qt quick中简单实现界面跳转和单选框的应用
基于qt5.14.2 qml实现锁屏以及解锁
高仿360安全卫士9.2界面(使用Qt中的qml实现) 可执行文件