[QML] Button / 버튼

폴더 구조

├ ─QML/

│       ├ ─ qml/

│               └ view.qml

└ main.py

 

# main.py

import sys

from PySide6.QtCore import QUrl
from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine

if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    engine.load(QUrl("qml/view.qml"))

    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(app.exec())

 

 

기본적인 버튼

// view.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

ApplicationWindow{
    visible : true
    width : 320
    height : 240
    
    Button{
        text : "Click me"
        x : parent.width/2 - width/2
        y : parent.height/2 - height/2
    }
}

 

기본적인 버튼이다.

text를 "click me" 로 변경하고

x 좌표와  y좌표를 중앙으로 옮겼다.

 

Click 이벤트

버튼 클릭시 원하는 작업을 하고 싶을때

// view.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

ApplicationWindow{
    visible : true
    width : 320
    height : 240
    
    Button{
        text : "Click me"
        
        x : parent.width/2 - width/2
        y : parent.height/2 - height/2

        onClicked : {
            console.log("Button clicked")
        }
    }
}

 onClicked : { console.log("Button clicked") } 로  특정 작업을 진행할수 있다.

본인은 "Button clicked" 라는 문자열을 출력해보았다.

 

 

추가적으로 더블클릭

// view.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

ApplicationWindow{
    visible : true
    width : 320
    height : 240
    
    Button{
        text : "Click me"
        x : parent.width/2 - width/2
        y : parent.height/2 - height/2
        onDoubleClicked : {
            console.log("Button double clicked")
        }
    }
}

 

길게 누르고 있기 등이 있다.

// view.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

ApplicationWindow{
    visible : true
    width : 320
    height : 240
    
    Button{
        text : "Click me"
        x : parent.width/2 - width/2
        y : parent.height/2 - height/2
        onPressAndHold : {
            console.log("Pressed and hold")
        }
    }
}