6

QML 内に多くの Rectangular を描画したい。Rectangulars (x,y) の座標は C++ 内部で計算され、QML に渡す必要があります。

ListView または Column または Row 要素 (Repeater を使用) を検索しようとしましたが、要素が「テーブル」のように配置されているため、これでは問題が解決しないようです... Web の例に関する情報の欠如に直面しましたそのような場合。

より具体的には:
1. Rectangular の多くの座標を QML に渡す方法は? (どのようなデータ構造)
2. それらを表示するには、どのメカニズムを使用すればよいですか?

4

1 に答える 1

17

あなたは簡単にできます：

import QtQuick 2.0

Rectangle {
    id: root
    height: 500
    width: 500

    property string sc: 'import QtQuick 2.0; Rectangle {width: 20; height: 20; color: "red"; Component.onCompleted: {x = Math.random() * parent.width; y = Math.random() * parent.height;}}'

    Component.onCompleted: {
        for (var i = 0; i < 10; ++i) Qt.createQmlObject(sc, root, 'obj' + i);
    }
}

このコードは、指定された数の長方形を作成し、それらを親の長方形の上にランダムに配置します。

C++ で位置を生成する必要がある場合は、カスタム C++ 要素を作成する必要があります。基本的な例を次に示します。

class Positioner : public QObject
{
    Q_OBJECT
public:
    explicit Positioner(QObject *parent = 0) : QObject(parent) {}

public slots:
    QPointF getPosition() {
        return QPoint(qrand() % 500, qrand() % 500);
    }    
};

main.cpp に登録します。

qmlRegisterType<Positioner>("TestComponent", 1, 0, "Positioner");

最後にそれを使用します。今回はポジショナーのgetPosition()C++ スロットを使用します。

    import QtQuick 2.0
    import TestComponent 1.0

    Rectangle {
        id: root
        height: 500
        width: 500

        Positioner {id: myPositioner}

        property string sc: 'import QtQuick 2.0; Rectangle {width: 20; height: 20; color: "red"; Component.onCompleted: {var pos = myPositioner.getPosition(); x = pos.x; y = pos.y;}}'

        Component.onCompleted: {
            for (var i = 0; i < 10; ++i) Qt.createQmlObject(sc, root, 'obj' + i);
        }
    }

文字列の代わりに既存の QML ファイルを使用することもできます。これは、オートコンプリートが得られるため、もう少し便利です。それが TestItem コンポーネントであり、楽しみのために、クリックするとそのインスタンスが削除されます。

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "black"

    MouseArea {
        anchors.fill: parent
        onClicked: parent.destroy()
    }

    Component.onCompleted: {
        var pos = myPositioner.getPosition()
        x = pos.x
        y = pos.y
    }
}

そして、メインの QML ファイルでインスタンス化します:

var component = Qt.createComponent("TestItem.qml")
component.createObject(root)

QML でポジショナーをインスタンス化せず、代わりに QML で単一のオブジェクトをインスタンス化して使用したくない場合は、次のことを実行できます (main.cpp で)。

Positioner p;
view.rootContext()->setContextProperty("sPositioner", &p);

そしてQMLで使用します：

var pos = sPositioner.getPosition()
于 2013-04-14T20:34:46.500 に答える