1

Qt 5.4.1 を使用しています。

現在、QML でいくつかのボタンを設定しています。いくつかのボタンに同様の状態動作が必要です。非常によく似たコードの大きな塊が QML で繰り返されるのを避けるにはどうすればよいですか?

Rectangle {
        id: songFilterButton

        x: 0; width: 80
        y: 0; height: 60

        Text {
            anchors.centerIn: parent
            text: "Songs"
        }

        state: "on"; states: [
            State {
                name: "on"
                PropertyChanges{ target: songFilterButton; color: "steelblue" }
            },
            State {
                name: "on"
                PropertyChanges{ target: songFilterButton; color: "white" }
            }
        ]

        MouseArea { id: region; anchors.fill: parent; onClicked: songFilterButton.toggle() }

        function toggle() {
            if(state == "on") { state = "off" } else { state = "on" }
        }
    }

これは、いくつかのボタンに対して繰り返すにはかなりのコードであり、ボタン機能 (C++ やその他の動作へのシグナルの送信など) に追加するたびに、複数回実行する必要があります...

MrEricSir が提供するリンクを読み、次のコードで HKDRadioButton.qml を作成しました。

import QtQuick 2.0

Rectangle {
    property string text: label.text

    Text {
        id: label
        anchors.centerIn: parent
    }

    state: "on"; states: [
        State {
            name: "on"
            PropertyChanges{ target: songFilterButton; color: "steelblue" }
        },
        State {
            name: "off"
            PropertyChanges{ target: songFilterButton; color: "white" }
        }
    ]

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

    function toggle() {
        if(state == "on") { state = "off" } else { state = "on" }
    }
}

私のメインQMLファイルには、 

HKRadioButton {
        id: songFilterButton

        x: 0; width: 80
        y: 0; height: 60

        text: "Songs"
    }

動作（状態の変化）はわかりますが、テキストはわかりません...

4

2 に答える 2

2

独自のコンポーネントを定義します。コンポーネントを「その場で」作成し、コンポーネントのルート オブジェクトを右クリック -> リファクタリング -> コンポーネントを別のファイルに移動します。例えば：

Rectangle {
    id: button
    ...
}

それを Button.qml に移動したら、次を使用できます。

Button {
    ...
}

「インライン」コンポーネントを使用します。

Component {
    id: button
    Rectangle {
        ...
    }
}

次にbutton、Loaderまたはを使用して動的インスタンス化に使用できますbutton.createObject(parentItem)

他の回答が指摘したように、一部のサブオブジェクト プロパティを参照するコンポーネントのプロパティを作成する場合は、エイリアス プロパティを使用すると、不要なバインディングを回避できます。

Rectangle {
    property string text

    Text {
        id: label
        anchors.centerIn: parent
        text: parent.text // this is what you want
    }
    ...
}

しかし、それは不必要なバインディングを導入します。フォビビスが示唆するように、ルート コンポーネント プロパティからaliasラベルを直接参照するために を使用できます。text

于 2015-03-07T00:48:44.767 に答える