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

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

前段时间接触了一下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.7FocusScope {    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.7Item {    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.7Rectangle {    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欣赏一下成果了。

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

查看更多 下一篇