凹みTips

C++、JavaScript、Unity、ガジェット等の Tips について雑多に書いています。

Qt Quick Controls でデスクトップ用アプリの UI を簡単に作る

Qt

はじめに

Qt Quick では Qt Quick Controls というモジュールを利用することで、クロスプラットフォーム対応のデスクトップアプリ（ボタンやタブなどのインターフェースを備えたアプリ）を簡単に作成することが出来ます。
これにより、UI 周りのロジックは QML でプラットフォーム依存することなく記述することが可能となり、コア部分だけ各プラットフォーム向けに C++ で書くだけで良くなります。

環境

  • Mac OS X 10.8.4
  • Qt 5.1.1
  • Qt Creator 2.8.1

ドキュメント

概要

Overview に書いてあるコードを実行してみます。

import QtQuick.Controls 1.0

ApplicationWindow {
    title: "My Application"

    Button {
        text: "Push Me"
        anchors.centerIn: parent
        onClicked: Qt.quit()
    }
}

たったこれだけのコードで上記の様なボタン付きの画面が出来ます。こういった Button や Slider といったカスタマイズの自由なデスクトップ用コンポーネントが大量に含まれているモジュールが Qt Quick Controls になります。

サンプル

タブが欲しいとなったら TabView、入力欄が欲しくなったら TextField、横や縦に並べたいとなったら QtQuick.Layouts のドキュメントを参照しながらモリモリしていけば所望の画面を作成することが出来ます。ただサンプルがないと何をどうすれば良いか分からないと思います。そこで、Qt Quick Controls では幾つかのサンプルを用意してくれています。

また、このサンプルは gitorious に上がっています。

$ git clone https://git.gitorious.org/qt/qtquickcontrols.git
$ cd qtquickcontrols
$ qmake
$ make

例えば、ギャラリーのサンプル（examples/quick/controls/gallery）を見てみます。





パーティクルがキラキラするプログレスバー等、クオリティの高い UI が紹介されています。例えば、タブの形状を Styles タブで紹介されているものに差し替えたい！と考えた場合には、該当のコードを参照して必要な部分を抜き出します。

コードを見ると、QtQuick.Controls.Styles というモジュールを利用して TabView に画像つきのスタイルを設定しているようです。必要な部分だけ抜粋してみると以下のようになります。

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0

ApplicationWindow {
    title: "My Application"
    TabView {
        anchors.fill: parent
        Tab { title: "One" ; Item {}}
        Tab { title: "Two" ; Item {}}
        Tab { title: "Three" ; Item {}}
        Tab { title: "Four" ; Item {}}
        style: tabViewStyle
    }

    property Component tabViewStyle: TabViewStyle {
        tabOverlap: 16
        frameOverlap: 4
        tabsMovable: true

        frame: Rectangle {
            gradient: Gradient{
                GradientStop { color: "#e5e5e5" ; position: 0 }
                GradientStop { color: "#e0e0e0" ; position: 1 }
            }
            border.color: "#898989"
            Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
        }
        tab: Item {
            property int totalOverlap: tabOverlap * (control.count - 1)
            implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width)
            implicitHeight: image.sourceSize.height
            BorderImage {
                id: image
                anchors.fill: parent
                source: styleData.selected ? "images/tab_selected.png" : "images/tab.png"
                border.left: 30
                smooth: false
                border.right: 30
            }
            Text {
                text: styleData.title
                anchors.centerIn: parent
            }
        }
        leftCorner: Item { implicitWidth: 12 }
    }
}


UI のロジックがプロパティバインディングで綺麗にまとめられていて美しいです。

おわりに

QML のプロパティバインディングやファイル名でモジュール化出来る機能は他に類を見ない手軽さで UI 構築を可能にしてくれます。そうして利用できるこういった UI パーツの資産が今後も増え続け、広く利用できるようになっていって欲しいですね。
なお、Qt 5.2 からはタッチデバイス（Android、iOS、Tizen）にも対応するとのことで今後が楽しみです。

参考