posts - 319, comments - 22, trackbacks - 0, articles - 11
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

使用QML实现浮动桌面搜索框

Posted on 2011-08-05 07:33 RTY 阅读(2653) 评论(0)  编辑 收藏 引用 所属分类: QML

使用QML实现浮动桌面搜索框

前段时间接触了一下QML,深深地被这门强大易用的语言所吸引。

QML的语法类似CSS,可以引入javascript作为逻辑,还能够和C++对象交互。

QML带来的好处至少有以下几点:

 

  1. 分工更明确:设计师可以专攻QML制作UI,C++工程师也能专注于自己的本职工作。
  2. 开发更高效:重新编写的QML不需要编译(因为它是一门脚本语言),所以只需要刷新一下你的QML Viewer就可以了。
  3. 界面更精美:QML开发和网页开发很相似,所以我们可以比较容易地把一个精美的网页效果移植到本地程序。
  4. 风格更一致:Qt本身是一个跨平台的开发框架,所以我们在Window XP上看到的是一个样子,Win7上看到的是另一个样子,到了Ubuntu或者Mac更是变了模样,使用QML可以屏蔽这些不一致。
下面带来一个简单的示例,希望对读者们有帮助。
谷歌桌面相信很多人都用过,双击ctrl可以呼出一个浮动的搜索框,非常方便。我们将使用QML仿制这一效果。先看效果图:

 
怎么样?很炫吧~
好的,首先打开你的Qt Creator(QML是Qt4.7以后才有的特性,请升级你的SDK到最新版本 )。然后新建一个项目。接着新建一个C++ Class,命名为FloatBox。现在你的工程的目录结构应该像这样:

接着,再新建一个QML文件:


 

我们将这个QML文件命名为TextBox。这个QML文件主要是实现搜索框中的文本框。

输入以下代码:

 

Qml代码  收藏代码
  1. import Qt 4.7  
  2.   
  3. FocusScope {  
  4.     id: focusScope  
  5.     width: 600; height: 40  
  6.     focus:true  
  7.   
  8.     BorderImage {  
  9.         source: "../images/lineedit-bg.png"  
  10.         width: parent.width; height: parent.height  
  11.         border { left: 4; top: 4; right: 4; bottom: 4 }  
  12.     }  
  13.   
  14.     Text {  
  15.         id: typeSomething  
  16.         anchors.fill: parent; anchors.leftMargin: 8  
  17.         verticalAlignment: Text.AlignVCenter  
  18.         text: "\u8BF7\u8F93\u5165\u7F51\u5740"  
  19.         color: "gray"  
  20.     }  
  21.   
  22.     MouseArea {  
  23.         anchors.fill: parent  
  24.         onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel(); }  
  25.     }  
  26.   
  27.     TextInput {  
  28.         id: textInput  
  29.         anchors { left: parent.left; leftMargin: 8; right: clear.left; rightMargin: 8; verticalCenter: parent.verticalCenter }  
  30.         focus: true  
  31.         font.pixelSize:20  
  32.     }  
  33.   
  34.     Image {  
  35.         id: clear  
  36.         anchors { right: parent.right; rightMargin: 8; verticalCenter: parent.verticalCenter }  
  37.         source: "../images/clear.png"  
  38.         opacity: 0  
  39.   
  40.         MouseArea {  
  41.             anchors.fill: parent  
  42.             onClicked: { textInput.text = ''; focusScope.focus = true; textInput.openSoftwareInputPanel(); }  
  43.         }  
  44.     }  
  45.   
  46.     states: State {  
  47.         name: "hasText"; when: textInput.text != ''  
  48.         PropertyChanges { target: typeSomething; opacity: 0 }  
  49.         PropertyChanges { target: clear; opacity: 1 }  
  50.     }  
  51.   
  52.     transitions: [  
  53.         Transition {  
  54.             from: ""; to: "hasText"  
  55.             NumberAnimation { exclude: typeSomething; properties: "opacity" }  
  56.         },  
  57.         Transition {  
  58.             from: "hasText"; to: ""  
  59.             NumberAnimation { properties: "opacity" }  
  60.         }  
  61.     ]  
  62. }  

 

 你也许会注意到,在Text的text属性中,我输入的是utf编码的汉字。事实上,想要在QML文件里显示中文还是有一点小麻烦的,要么就是用utf编码过的汉字,要么使用Qt翻译家来转换。直接在QML中输入中文将无法显示。
 接着,新建ShadowRectangle文件。该文件实现的是阴影效果。代码如下:

 

Qml代码  收藏代码
  1. import Qt 4.7  
  2.   
  3. Item {  
  4.     property alias color : rectangle.color  
  5.   
  6.     BorderImage {  
  7.         anchors.fill: rectangle  
  8.         anchors { leftMargin: 0; topMargin: 0; rightMargin: -8; bottomMargin: -8 }  
  9.         border { left: 10; top: 10; right: 10; bottom: 10 }  
  10.         source: "../images/shadow.png"; smooth: true  
  11.     }  
  12.   
  13.     Rectangle { id: rectangle; anchors.fill: parent; radius:5}  
  14. }  

 

 最后新建main.qml文件,该文件实现的是整个搜索栏的效果。其代码如下:

 

Qml代码  收藏代码
  1. import Qt 4.7  
  2.   
  3. Rectangle {  
  4.     id: page  
  5.     width: 614; height: 54  
  6.     color: "#7bffffff"  
  7.     radius:5  
  8.   
  9.     MouseArea {  
  10.         anchors.fill: parent  
  11.         onClicked: page.focus = false;  
  12.     }  
  13.     ShadowRectangle {  
  14.         color: "#434343"  
  15.         transformOrigin: "Center"  
  16.         opacity: 0.97  
  17.         visible: true  
  18.         anchors.centerIn: parent; width: 610; height: 50  
  19.     }  
  20.     TextBox {  
  21.         id: search;  
  22.         visible: true  
  23.         opacity: 1  
  24.         anchors.centerIn: parent  
  25.     }  
  26. }  

 

 QML的代码通俗易懂,这里就不去解释每一行代码的意思了。

 

好的,下面让我们把QML制作的搜索栏放置到桌面程序的窗体上。

在你的floatbox.h中添加一个私有变量:

 

Cpp代码  收藏代码
  1. private:  
  2.     QDeclarativeView *ui;  

 

 然后在你的floatbox.cpp的构造函数中输入以下代码:

 

Cpp代码  收藏代码
  1. // 使窗体透明而控件不透明  
  2. setWindowFlags(Qt::FramelessWindowHint);  
  3. setAttribute(Qt::WA_TranslucentBackground, true);  
  4. setStyleSheet("background:transparent;");  
  5.   
  6. ui = new QDeclarativeView;  
  7. ui->setSource(QUrl("qrc:/resources/qml/main.qml"));  
  8. setCentralWidget(ui);  
  9. resize(QSize(630, 60));  

 

 细心的你可以发现,我将qml文件加入了Qt的资源系统。这里要说明一点,非常重要:

在QML文件中如果引入了其他文件(包括js文件、图片文件等),要么都加入Qt的资源系统,要么都不加入,因为Qt的资源文件无法和本地文件相互访问。

所以,如果你也和我一样新建了qrc文件,请将qml文件和图片文件一并加入到资源系统中去。如下图:



 到了这一步,我们的搜索工具栏差不多要完工了,想要运行,千万不要忘记在pro文件添加declarative模块。

 

Cpp代码  收藏代码
  1. QT       += core gui declarative  

 

 好的,现在你就可以按下ctrl+R欣赏一下成果了。

最后,老规矩,附上源代码。


只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理