qml example: ListView

qml example: ListView

import QtQuick 2.0
import QtWebKit 3.0

Rectangle {
    width: 300
    height: 360

    ListView{
        id: myListView
        width: parent.width
        height: 100
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
        model: ["Sunday", "Monday", "Tuesday", "Wednesday",
            "Thursday", "Friday", "Saturday"]
        delegate: Text {text: model.modelData}
        onCurrentItemChanged: myText.text = currentItem.text
    }

    Text {
        id: myText
        anchors.centerIn: parent
    }
}

- This example haven't handle mouse click, you can select items in ListView by UP/DOWN in keyboard. To detect mouse click on ListView, refer to next example of Detect mouse click on ListView.

qml example: WebView

qml example: WebView

import QtQuick 2.0
import QtWebKit 3.0

Rectangle {
    width: 400
    height: 360

    WebView{
        id: myWebView
        url: "http://qteveloper.blogspot.com/"
        width: parent.width
        height: parent.height
    }

}

qml example: scale

qml example: scale

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World: " + parent.width + " x " + parent.height)
        scale: 0.8
        anchors.centerIn: parent
    }
    Image {
        id: myimage
        source: "http://goo.gl/J4xj0"
        scale: 2.1
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            onClicked: Qt.quit()
        }
    }

}

Anatomy of a Qt 5 for Android application

Eskil Abrahamsen Blomfeldt published a post "Anatomy of a Qt 5 for Android application" in Qt blog, give some insight into how the different pieces in the Qt 5 for Android port fit together.

Qt Quick Designer

This video shows how to create a ui using Qt Quick Designer.

qml example: Layout in parent's center

Example show how to place something (Text and Image in this example) in center of parent:

Text and Image in center

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World: " + parent.width + " x " + parent.height)
        anchors.centerIn: parent
    }
    Image {
        id: myimage
        source: "http://goo.gl/J4xj0"
        mirror: mouseArea.containsMouse ? true : false
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            onClicked: Qt.quit()
        }
    }

}

reference: http://qt-project.org/doc/qt-4.8/qml-anchor-layout.html

qml: handle mouse event

The default Hello World code generated in Qt Creator Project Wizard handle mouse click on the whole window, to quit the program. In this example code, we will handle mouse event on the Image only. When mouse over the Image, the Image will be mirrored. Once mouse click on the Image, it quit the program by calling Qt.quit().

qml: handle mouse event

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World: " + parent.width + " x " + parent.height)
        anchors.centerIn: parent
    }
    Image {
        id: myimage
        source: "http://goo.gl/J4xj0"
        mirror: mouseArea.containsMouse ? true : false
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            onClicked: Qt.quit()
        }
    }

}

qml: load Image from internet

Qt Quick example code to load Image from internet.

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World: " + parent.width + " x " + parent.height)
        anchors.centerIn: parent
    }
    Image {
        id: myimage
        source: "http://goo.gl/J4xj0"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

load Image from internet

Related:
- qml example: load image from internet and handle status changed

Get window size of Qt Quick 2 Application, and handle size changed.

This example of QML show how to get width and height of window, and implement handle of onWidthChanged and onHeightChanged, which will be called automatically once window width or height changed.

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World: " + parent.width + " x " + parent.height)
        anchors.centerIn: parent
    }
    onWidthChanged: print("onWidthChanged: " + width + " x " + height)
    onHeightChanged: print("onHeightChanged: " + width + " x " + height)
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

Hello Qt Quick 2 Application

Use Project Wizard of Qt creator to new a Qt Quick 2 Application, that can contain both QML and C++ code and includes a QQuickView.

Default main.qml generated:

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

OpenCV 2.4.6 is out! added Qt 5 support

OpenCV 2.4.6 is out! The brief list of changes:

• added video file i/o Windows RT and sample application using camera, enabled parallelization with TBB or MS Concurrency
• added CUDA 5.5 support for desktop and ARM systems
• added Qt 5 support
• added many new OpenCL algorithms ports, included OpenCL binaries into the Windows superpack
• iOS build scripts (together with Android ones) moved to ‘opencv/platforms’ directory
• added functions for UIImage <-> cv::Mat conversion
• correct front/back camera selection in Android app framework
• added Linaro NDK support and fixes for MIPS to Android CMake toolchain
• stability has been improved by a lot, numerous bug-fixes across all the library

See the full ChangeLog for more information.

Source: opencv.org

Qt Creator 2.8.0 released

Qt Creator 2.8 final released, refer to Qt Blog.

Add and select Qt version in Qt Creator

Qt Creator allows you to have multiple versions of Qt installed on your development PC and use different versions to build your projects. Qt Creator automatically detects the Qt versions that are registered by your system or by Qt SDK.

To view detailed information for each Qt version or add Qt versions, select Tools -> Options

Build & Run -> Qt Versions:

details: Adding Qt Versions

Introducing Qt Quick Controls in Qt 5.1

Qt 5.1 Available

Qt 5.1 is the latest release of the cross-platform C++ Application and UI framework. Qt 5.1 solidifies the modern multi-platform way of writing applications with Qt 5 by adding more flesh to the bone by boosting the UI technology and performance. You can now create native Qt-based cross-platform applications all with one framework and target all the most popular operating systems on desktop, embedded and mobile.


Qt is a cross-platform complete development framework with tools designed to streamline the creation of stunning native applications and amazing user interfaces for desktop, embedded and mobile platforms.

Application demonstrated in the video contains several Qt Quick 2 applications which you can launch by tapping the devices. This application highlights the versatility of Qt technology in bringing different user interface styles in several platforms and device types with one source code.

For more information about Qt, please refer to http://qt.digia.com

Qt 4.8.5 Released

Qt 4.8.5 released bringing close to 400 improvements over the previous release in the Qt 4.8 series, including important security updates and error corrections. As a patch release it does not add new functionality and maintains full compatibility with the Qt 4.8.x releases.

details: http://blog.qt.digia.com/blog/2013/07/02/qt-4-8-5-released/?utm_source=rss&utm_medium=rss&utm_campaign=qt-4-8-5-released