ユーザーが入力した値を変数に保存するにはどうすればよいですか?

Question

ユーザーが入力した値を変数に保存するにはどうすればよいですか?

たとえば、次のようなコードがあります:

TextField {width: 37; height: 19
                       var 
                       id: q1
                       x: 91
                       y: 29
                       anchors.horizontalCenter: parent.horizontalCenter
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.centerIn: parent
                       placeholderText: "0"
                       font.pixelSize: 12
                       text: ""
                       anchors.verticalCenterOffset: 26
                       anchors.horizontalCenterOffset: -115
                       validator: IntValidator{}
                       horizontalAlignment: TextInput.AlignHCenter
                       style: TextFieldStyle {
                           textColor: "black"
                           background: Rectangle { width: 45; height: 25; radius: 20.0

                               color: "#F0EBEB"
                               implicitWidth: 40
                               implicitHeight: 24
                               border.color: "#000000"
                               border.width: 1
                           }
                       }
                       onTextChanged: {console.log(parseInt(text,10) + 1000)}
                   }

ID を使用して後で合計や乗算を行うことはできますか? できる場合、その方法は?

Answer 1

TextField コンポーネントの外部でテキスト プロパティを再利用できます。

テキスト要素に入力テキスト + 5 の結果が表示される次の例をご覧ください。

対応するコード:

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

MainView {
    id: main
    width: 300
    height: 150

    Row {
        width: 37;
        height: 19
        spacing: units.gu(3)

        TextField {
            id: q1
            placeholderText: "0"
            font.pixelSize: 12
            text: "0"
            validator: IntValidator{}
            horizontalAlignment: TextInput.AlignHCenter

            style: TextFieldStyle {
                textColor: "black"
                background: Rectangle {
                    width: 45;
                    height: 25;
                    radius: 20.0
                    color: "#F0EBEB"
                    implicitWidth: 40
                    implicitHeight: 24
                    border.color: "#000000"
                    border.width: 1
                }
            }
        }

        Text {
            height: 25;
            text: "TextField + 5 = "+(parseInt(q1.text, 10) + 5)
        }
    }
}

アップデート:

2 つのテキスト入力の合計をグローバルに保存するには、親要素にプロパティを定義します。次のコードを参照してください。

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

MainView {
    id: main
    width: 300
    height: 300
    property var sum_q1_q2: parseInt(q1.text, 10) + parseInt(q2.text, 10)

    Column {
        width: 37;
        height: 19
        spacing: units.gu(3)

        TextField {
            id: q1
            placeholderText: "0"
            font.pixelSize: 12
            text: "0"
            validator: IntValidator{}
            horizontalAlignment: TextInput.AlignHCenter

            style: TextFieldStyle {
                textColor: "black"
                background: Rectangle {
                    width: 45;
                    height: 25;
                    radius: 20.0
                    color: "#F0EBEB"
                    implicitWidth: 40
                    implicitHeight: 24
                    border.color: "#000000"
                    border.width: 1
                }
            }
        }

        TextField {
            id: q2
            placeholderText: "0"
            font.pixelSize: 12
            text: "0"
            validator: IntValidator{}
            horizontalAlignment: TextInput.AlignHCenter

            style: TextFieldStyle {
                textColor: "black"
                background: Rectangle {
                    width: 45;
                    height: 25;
                    radius: 20.0
                    color: "#F0EBEB"
                    implicitWidth: 40
                    implicitHeight: 24
                    border.color: "#000000"
                    border.width: 1
                }
            }
        }

        Text {
            height: 25;
            text: "Q1 + Q2 = "+main.sum_q1_q2
        }
    }
}

新しい Text 要素は、「main」コンポーネントのプロパティを使用します。