Qt Quick メモpost

sharkpp/qtauthwith を実装中に調べメモした、 Qt Quick 関連の事をとりあえず記事にしました。

ListView タイプの特定項目へスクロールする

    listView.currentIndex = index

のような感じでインデックスを代入すればスクロールする

GridLayout と Grid

GridLayoutLayout.rowLayout.column が効く。

GridLayout.rowLayout.column が効かない。

モデルをテーブル上に並べる

[
    { foo: XXX1, bar: YYY1 },
    { foo: XXX2, bar: YYY2 }
]

を返すモデルが例。

import QtQuick.Layouts 1.11
         :
    GridLayout {
        id: grid
        anchors.fill: parent
        columns: 2
        rowSpacing: 5
        columnSpacing: 5
        anchors.margins: 5

        Repeater {
            model: hoge // [ { foo: XXX1, bar: YYY1 }, { foo: XXX2, bar: YYY2 } ]
            Label {
                Layout.row: index
                Layout.column: 0
                text: modelData.foo
            }
        }

        Repeater {
            model: hoge
            TextArea {
                Layout.row: index
                Layout.column: 1
                text: modelData.bar
            }
        }
    }

QMLで定数を利用する

定数が大量にある場合は

// hoge.js
var xxx = "aa";
var yyy = "bb";

と登録したソースを import して

// fuga.qml
import "hoge.js" as Hoge
          :
        Label {
            text: Hoge.xxx
        }
        Label {
            text: Hoge.yyy
        }
          :

のような感じで利用すると管理が楽そう。 他の QML で使い回すならなおさら。

qml側から呼び出す関数の引数にオブジェクトを渡した場合の動き

// xxx.qml
   var xxx = { aa: 10, bb: "bb" };
   hoge(xxx);

と QML 側で C++ で定義した関数を呼び出す場合は

#include <QJSValue>
            :
   Q_INVOKABLE void hoge(const QJSValue& abc);

という関数定義にする必要がある。

qml で空っぽのオブジェクトを定義する

Item {
    property var badSyntax:   {}   // ng, empty block statement
    property var emptyObject: ({}) // ok
}

その他の JavaScript 標準な型のプロパティを定義

Item {
    property var aNumber: 100
    property var aBool: false
    property var aString: "Hello world!"
    property var anotherString: String("#FF008800")
    property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
    property var aRect: Qt.rect(10, 10, 10, 10)
    property var aPoint: Qt.point(10, 10)
    property var aSize: Qt.size(10, 10)
    property var aVector3d: Qt.vector3d(100, 100, 100)
    property var anArray: [1, 2, 3, "four", "five", (function() { return "six"; })]
    property var anObject: { "foo": 10, "bar": 20 }
    property var aFunction: (function() { return "one"; })
}

参考


   /   変更履歴  /   Permalink  /  このエントリーをはてなブックマークに追加 
 カテゴリ: ブログ  /   タグ: C++, Qt, 雑記, QtQuick