사용자가 변수에 입력한 값을 어떻게 저장합니까?

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 구성 요소 외부에서 텍스트 속성을 재사용할 수 있습니다.

Text 요소가 입력 텍스트 + 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)
        }
    }
}

업데이트:

두 텍스트 입력의 합계를 전역적으로 저장하려면 상위 요소에 속성을 정의할 수 있습니다. 다음 코드를 살펴보세요.

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" 구성 요소의 속성을 사용합니다.