Qt4.8使用QtQuick开发桌面应用程序

最新推荐文章于 2024-07-20 05:56:49 发布

UbuntuKylin

最新推荐文章于 2024-07-20 05:56:49 发布

阅读量5k

点赞数

分类专栏： QML

本文链接：https://blog.csdn.net/ubuntukylin/article/details/9181903

版权

本文介绍了如何在Ubuntu上使用Qt4.8和QtQuick组件库开发桌面应用程序。通过安装Qt4.8及相关库，下载QtQuick桌面部件库并编译安装，设置QML_IMPORT_PATH，导入所需模块，可以轻松利用QtQuick桌面部件库中的控件。此外，文章还提供了创建deb包以便在其他机器上运行程序的方法。

摘要由CSDN通过智能技术生成

最近用Qt5.0和ubuntu-ui-toolkit来写个类似360的系统助手，这两样东西不太成熟，用起来实在是痛苦，只好重新回归到Qt4.8,这里介绍如何利用Qt4.8和qt component desktop在Ubuntu下来进行开发，希望对大家有帮助。

1、安装qt4.8,其中主要的是libqt4-dev, qt4-default，qtcreator和qt4-dev-tools（qdbus查看器）

2、安装QtQuick桌面部件库， http://qt.gitorious.org/qt-components/desktop ，在这里链接下载master。

3、执行命令qmake 和 sudo make install,这时会有个库libstyleplugin.so被拷贝到/usr/lib/i386-linux-gnu/qt4/imports/QtDesktop/plugin/目录下面，权限是755。

4、本地工程中注意写上：QML_IMPORT_PATH = /usr/lib/i386-linux-gnu/qt4/imports/QtDesktop/plugin

5、qml中写上import QtQuick 1.1和 import QtDesktop 0.1，就可以利用桌面部件库里面封装的各种控件了。

6、如果你想让其他机器也能运行你的程序，而你又不想利用同样的方法去编译安装QtQuick桌面部件库，你可以在你的工程中制作deb包时，把libstyleplugin.so被拷贝到/usr/lib/i386-linux-gnu/qt4/imports/QtDesktop/plugin/下面，把qt-components-desktop目录下的整个components文件夹拷贝到/usr/lib/i386-linux-gnu/qt4/imports/QtDesktop/下面，OK。

下面给出另外几个类似的参考链接给大家继续琢磨琢磨：

http://blog.qt.digia.com/blog/2011/03/10/qml-components-for-desktop/

Qt Quick Components for Desktop?

Published Thursday March 10th, 2011 | by Jens Bache-Wiig

While waiting for things to calm down a bit around here, I have been happily hacking on a new research project. Since most of you have probably guessed what it is about by now, I will start by pointing you to this video :

If for some reason YouTube fails to load, you can have a look at this pretty screenshot instead:

Qt Quick has been the main focus of Nokia for some time now. I wanted to see if we could bring some of the fun and joy of working with Qt Quick to the good old desktop. It is true that you can easily make your own widgets with Qt Quick, but obviously not everyone wants to do that. Having personally invested quite a bit of time in developing among others the GTK+ and Vista styles in Qt, I also wanted to prove that we could make use of that effort even in the brave new world of Qt Quick.

The result is basically a new set of widgets written from scratch in QML. The API is mostly aligned with our ongoing mobile SDK effort, but I also had to create some uniquely desktop-related widgets such as ScrollBar, ScrollArea and TabFrame. To give you a feel for what it looks like in practice, you can do things like this:

Button {
              id: button
              text: "Push me"
              onClicked: button.text = "Pressed"
        }

As an alternative to the built in Flickable element, there is a ScrollArea component which implicitly adjusts to whatever content you insert in it:

ScrollArea{
  frame: false
  Image {
    source: "wave.jpg"
  }
}

Another nice feature is that you can create desktop icons on platforms that support them:

ToolButton{
  iconSource: "image://desktoptheme/go-previous"
 }

There are of course some limitations to what you can do within Qt Quick at the moment. For instance, you cannot create new top level windows since everything is drawn client-side. (Though, I am still considering creating menu popups as true top level windows) In practice, what you get right now is a much more flexible drop-in replacement for your existing .ui files.

Getting started

Unfortunately, I haven’t actually gotten around to write a proper application using this framework yet and I am hoping someone else out there would be brave enough to step up to that challenge. An important thing to consider is that this is a labs research project and not a released or supported in any shape or form. Expect bugs, crashes, incomplete API, famine, war and no documentation. That said, I am certainly open to any feedback and bug reports you may have.

Since all of this is developed as a plugin to Qt itself, all you need to get started is the Qt 4.7.2 SDK. Just check out thehttp://qt.gitorious.org/qt-components/desktop and do the equivalent of a “qmake && make install” on your system.

使用QtQuick开发桌面应用程序

从最开始接触Qt的时候就已经知道有QtQuick这个东西，但是一直没有敢尝试研究，一来是天资不足，没有办法涉略太多的东西。二来是自我感觉还未到时机。

最近这几天一直在研究QtQuick，说是研究，实际上仅仅是打通了学习过程中最大的障碍，并没有能够写出拿得出手的东西。很多人在讲，既然要学习一个东西嘛，一定要做出个样子来，我个人对此观点不敢苟同，虽然实践是检验真理的标准，但是什么时候实践还是值得推敲的，如果在没有扎实的基础的时候就一头扎进编码中，我想效果多半是“一叶障目而不见泰山”。

因此我结合自己多年搞底层开发的经验，结合之前快速学习Qt开发的过程，开始了QtQuick的学习之旅。

首先出现在脑海中的是几个至关重要的问题：

1.QtQuick是干嘛用的？
2.QtQuick有什么好玩儿的？
3.QtQuick是针对什么平台的开发架构？
4.如果要研究QtQuick，需要学习其他的什么东西吗？

直到现在，上述的问题基本都可以回答了，所以我认为我已经入门了，并且在以后的实践中，必然不会走向任何极端了。

那么我就先用我的理解来回答一下上述的几个问题：

1.QtQuick是一种全新的架构，其目的是能够让程序员快速开发Qt应用程序。很简单的理解，至于是否有偏差，暂不去追究。
2.QtQuick使用一种全新的Qml语言作为开发主体，结合js，html，原生Qt库等可以开发很多很炫的界面。最开始的认识就是这样的，仅仅是觉得其界面好看。
3.到现在的话，随着学习的深入，慢慢的发现其实QtQuick是涵盖多个平台的开发的，包括移动平台，包括desktop平台。由于我自己的开发平台多是针对desktop的，所以着重介绍下使用QtQuick进行桌面应用程序的开发，这也是这篇文章的主旨。
4.显而易见的，要熟悉qml这种语言，同时js语言也是有所接触，但是qml语言实际上是比较容易掌握的。

明白了以上的4个问题，我们就可以开始了。

我学习QtQuick大概经历了这么几个阶段：

1.学习qml语言
2.使用纯qml原生组件进行简单的编码
3.简单使用js文件来实现逻辑
4.研究c++和qml的交互
5.自己开发简单的qml部件
6.使用现有的QtQuick开源部件库实现较为好看的界面开发
7.使用官方提供的QtQuick部件库进行桌面程序开发

前5个过程我就不做演示了，官方文档有很多的介绍，QtSdk中有很多的例子供参考.
第6个过程其实和第7个过程一样的，我主要侧重于研究如果用QtQuick快速的开发桌面应用程序。

另外要说明的是，很多大牛自己开发了部件库，效果也相当令人满意，如果你能够深入的研究开源部件库的架构及部分编码，自己也可以开发出来，但是我实在是精力有限，就没有做着方面的工作。

接下来进入正题，介绍如何使用QtQuick进行桌面应用程序的开发。

1.安装Qt5
2.安装QtQuick桌面部件库
1）获取源码包。（git clone https://git.gitorious.org/qtplayground/qtdesktopcomponents.git qtdesktopcomponents）
2）编译并且安装。（qmake && make install）
注意:如果你在安装Qt5的过程中安装了mingw，那么你可以在D:\Qt\Qt5.0.1\Tools\MinGW\bin目录下找到mingw32-make.exe,使用该程序即可完成编译安装（mingw32-make.exe install），如果没有安装，那么去安装一个mingw，在其安装目录的bin目录下下可以找到make.exe或者mingw32-make.exe。
安装完成后，在D:\Qt\Qt5.0.1\5.0.1\mingw47_32\qml目录下回创建一个QtDesktop文件夹，其中存放了该组件库的所有生成文件。

3.使用该部件库进行桌面应用程序开发。

以上就是该部件库的完整安装步骤，确实很简单，但是很多人搞不明白。下面我就使用该部件库中自带的实例来讲解几个在使用过程中需要注意的关键点。

在下载回来的源码包中，我们可以找到这样的一个实例，这个实例展示了多数控件的效果。
（E:\kaiyuan\qtdesktopcomponents\examples\gallery）

main.qml完整的代码:

/****************************************************************************
**
** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** You may use this file under the terms of the BSD license as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
**   * Redistributions of source code must retain the above copyright
**     notice, this list of conditions and the following disclaimer.
**   * Redistributions in binary form must reproduce the above copyright
**     notice, this list of conditions and the following disclaimer in
**     the documentation and/or other materials provided with the
**     distribution.
**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
**     of its contributors may be used to endorse or promote products derived
**     from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/

import QtQuick 2.0
import QtDesktop 1.0
import "content"

ApplicationWindow {
    title: "Component Gallery"

width: 580
    height: 400
    minimumHeight: 400
    minimumWidth: 340
    property string loremIpsum:
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor "+
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor "+
            "incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud "+
            "exercitation ullamco laboris nisi ut aliquip ex ea commodo cosnsequat. ";

ToolBar {
        id: toolbar
        width: parent.width
        height: 40
        RowLayout {
            spacing: 2
            anchors.verticalCenter: parent.verticalCenter
            ToolButton {
                iconName: "window-new"
                iconSource: "images/window-new.png"
                anchors.verticalCenter: parent.verticalCenter
                onClicked: window1.visible = !window1.visible
                Accessible.name: "New window"
                tooltip: "Toggle visibility of the second window"
            }
            ToolButton {
                iconName: "document-open"
                iconSource: "images/document-open.png"
                anchors.verticalCenter: parent.verticalCenter
                onClicked: fileDialogLoad.open()
                tooltip: "(Pretend to) open a file"
            }
            ToolButton {
                iconName: "document-save-as"
                iconSource: "images/document-save-as.png"
                anchors.verticalCenter: parent.verticalCenter
                onClicked: fileDialogSave.open()
                tooltip: "(Pretend to) save as..."
            }
        }

FileDialog {
            id: fileDialogLoad
            folder: "/tmp"
            title: "Choose a file to open"
            selectMultiple: true
            nameFilters: [ "Image files (*.png *.jpg)", "All files (*)" ]

onAccepted: { console.log("Accepted: " + filePaths) }
        }

FileDialog {
            id: fileDialogSave
            folder: "/tmp"
            title: "Save as..."
            modal: true
            selectExisting: false

onAccepted: { console.log("Accepted: " + filePath) }
        }

ChildWindow { id: window1 }

Action {
            id: openAction
            text: "Open"
            shortcut: "Ctrl+O"
            onTriggered: fileDialogLoad.open();
        }

Action {
            id: copyAction
            text: "Copy"
            shortcut: "Ctrl+C"
            iconName: "edit-copy"
        }

Action {
            id: cutAction
            text: "Cut"
            shortcut: "Ctrl+X"
            iconName: "edit-cut"
        }

Action {
            id: pasteAction
            text: "Paste"
            shortcut: "Ctrl+V"
            iconName: "edit-paste"
        }

ContextMenu {
            id: editmenu
            MenuItem { text: "Copy" ;  iconName: "edit-copy" }
            MenuItem { text: "Cut" ;   iconName: "edit-cut" }
            MenuItem { text: "Paste" ; iconName: "edit-paste" }
        }
        MouseArea {
            anchors.fill:  parent
            acceptedButtons: Qt.RightButton
            onPressed: editmenu.showPopup(mouseX, mouseY)
        }

CheckBox {
            id: enabledCheck
            text: "Enabled"
            checked: true
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
        }
    }

menuBar: MenuBar {
        Menu {
            text: "File"
            MenuItem {
                text: "Open"
                shortcut: "Ctrl+O"
                onTriggered: fileDialogLoad.open();
            }
            MenuItem {
                text: "Close"
                shortcut: "Ctrl+Q"
                onTriggered: Qt.quit()
            }
        }
        Menu {
            text: "Edit"
            MenuItem {
                text: "Copy"
            }
            MenuItem {
                text: "Paste"
            }
        }
    }

SystemPalette {id: syspal}
    StyleItem{ id: styleitem}
    color: syspal.window
    ListModel {
        id: choices
        ListElement { text: "Banana" }
        ListElement { text: "Orange" }
        ListElement { text: "Apple" }
        ListElement { text: "Coconut" }
    }

TabFrame {
        id:frame
        enabled: enabledCheck.checked
        position: controlPage.tabPosition
        anchors.top: toolbar.bottom
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.margins: styleitem.style == "mac" ? 12 : 0
        Tab {
            title: "Control"
            Controls { id: controlPage }
        }
        Tab {
            title: "Itemviews"
            ModelView { }
        }
        Tab {
            title: "Range"
            RangeTab { }
        }
        Tab {
            title: "Styles"
            Styles { anchors.fill: parent}
        }
        Tab {
            title: "Sidebar"
            Panel { anchors.fill:parent }
        }
    }
}