해커를 꿈꾸는 개발자

QT qml의 TextField, Button을 이용한 문구 출력

QML을 이용해 GUI 프로그램을 만들기 위해 프로젝트 생성은 아래 링크를 참고하시면 됩니다.

https://zidarn87.tistory.com/9?category=415008 

Button을 눌렀을 때 TextField에 입력된 text를 label에 업데이트하는 것을 구현해 봅니다.

Qt의 Cpp 쪽으로 데이터를 보내지 않고, qml에 내에서만 코드를 작성해 볼게요.

"Name : " 문구를 표시한 Label과 TextField로부터 받아온 문구를 표시할 Label을 생성하였습니다. 

displayname Label의 위치는 namelabel의 아래 쪽에 위치하도록 하였습니다.  

    Label{
        id : namelabel
        x: parent.x
        font.pointSize: 20
        text : "Name : "
    }

    Label{
        id : displayname
        y: namelabel.height + 30
        font.pointSize: 20
        text : "No input"
    }

text를 입력받을 TextField를 생성하였습니다. 

위치는 namelabel의 오른쪽에 위치하도록 하였습니다. 

    TextField {
        id:textfield
        x:namelabel.width
        width: 200
        placeholderText: qsTr("Enter name")
        font.pointSize: 20
    }

Buttom 컴포넌트를 생성하였습니다. 

위치는 textfield의 오른쪽에 위치하도록 하였고, button을 클릭하였을 때, displayname Label의 문구를 업데이트 하도록 구현하였습니다. 

    Button{
        x: textfield.x + textfield.width + 10
        text: "Button"
        onClicked: buttonClickProcess()

        function buttonClickProcess(){
            displayname.text = "my name is " + textfield.text
        }
    }

전체 qml의 코드는 아래와 같습니다. 

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("First Program")

    Label{
        id : namelabel
        x: parent.x
        font.pointSize: 20
        text : "Name : "
    }

    Label{
        id : displayname
        y: namelabel.height + 30
        font.pointSize: 20
        text : "No input"
    }

    TextField {
        id:textfield
        x:namelabel.width
        width: 200
        placeholderText: qsTr("Enter name")
        font.pointSize: 20
    }

    Button{
        x: textfield.x + textfield.width + 10
        text: "Button"
        onClicked: buttonClickProcess()

        function buttonClickProcess(){
            displayname.text = "my name is " + textfield.text
        }
    }
}