[QML] Toggle Button / 토글 버튼 (1)

폴더 구조

├ ─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())

 

Toggle Button ?

토글 버튼이란 무었일까

구글에서 toggle button 검색결과

이렇게 생긴 버튼이다.

간단하게 on / off 스위치 라고 생각해도 무방하다.

 

나는 토글 버튼을 QML로 제작할 생각이다. 

내 계획은 이렇다.

큰 사각형 - 검정 테두리

그 안에 토글 버튼 (왼쪽 빨간색, 오른쪽으로 가면 파란색)

그리고 중앙에 Text를 넣어 on / off 를 표시해보겠다.

 

위치 잡기

// view.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

ApplicationWindow{
    visible : true
    width : 320
    height : 240
    
    Rectangle{
   		id : toggleButton
        width : 80
        height : 30
        x : parent.width/2 - width /2
        y : parent.height/2 - height /2
        border.color : "black"
        border.width : 1
    }
}

 

너비 80, 높이 30짜리 사각형을 만들었다.

위치는 중앙으로 옮겼고, 테두리는 검정색 1px로 설정 ( 추후 지울 예정 )

 

자리잡기

 

배경 만들기

파란색으로 칠한 부분

// view.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

ApplicationWindow{
    visible : true
    width : 320
    height : 240
    
    Rectangle{
        id : toggleButton
        width : 80
        height : 30
        x : parent.width/2 - width /2
        y : parent.height/2 - height /2
        border.color : "black"
        border.width : 1

        Rectangle{
            id : toggleBackground
            width : parent.width - 10
            height : parent.height - 10
            color : "lightgrey"
            radius : width/2
            x : 5
            y : 5
        }
    }
}

 

미리 만들어진 사각형 안에 사각형을 생성하고

둥근 모서리를 높이의 2 분의 1로 설정하여 좌우로 둥그런 모양을 만들었다.

컬러는 lightgrey

너비는 toggleButton 너비의 - 10px 만큼

높이도 toggleButton 높이의 - 10px 만큼 설정하였다.

 

 

 

막대기 만들기 ? cursor ?

// view.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

ApplicationWindow{
    visible : true
    width : 320
    height : 240
    
    Rectangle{
        id : toggleButton
        width : 80
        height : 30
        x : parent.width/2 - width /2
        y : parent.height/2 - height /2
        border.color : "black"
        border.width : 1

        Rectangle{
            id : toggleBackground
            width : parent.width - 10
            height : parent.height - 10
            color : "lightgrey"
            radius : height/2
            x : 5
            y : 5
            Rectangle{
                id : toggleCircle
                width : toggleBackground.height - 4
                height : toggleBackground.height - 4
                x : 2
                y : 2
                color : "red"
                radius : height/2
            }
        }
    }
}

 

toggleBackground 안에 또 사각형(Rectangle)을 생성후

toggleBackground  의 높이보다 4픽셀 작게 변경,

x와 y 좌표를 2로 수정후 둥근 모서리를 깍아서 원형으로 수정하였다.

 

 

얼추 모양은 만들어진듯 하다.

 

on off 글자 넣기

모양 잡는데 신경 쓰느라 on off 표시해줄 글자를 넣지 못했다.

toggleBackground 의 중앙에 글자를 넣어서 on off 를 표시해야겠다.

// view.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

ApplicationWindow{
    visible : true
    width : 320
    height : 240
    
    Rectangle{
        id : toggleButton
        width : 80
        height : 30
        x : parent.width/2 - width /2
        y : parent.height/2 - height /2
        border.color : "black"
        border.width : 1

        Rectangle{
            id : toggleBackground
            width : parent.width - 10
            height : parent.height - 10
            color : "lightgrey"
            radius : height/2
            x : 5
            y : 5

            Text{
                id : toggleState
                text : "OFF"
                anchors.centerIn : parent
            }

            Rectangle{
                id : toggleCircle
                width : toggleBackground.height - 4
                height : toggleBackground.height - 4
                x : 2
                y : 2
                color : "red"
                radius : height/2
            }
        }
    }
}

 

Text를 추가하고 아이디는 toggleState, 

텍스틑 OFF, 글자는 중앙으로 이동했다.

 

 

오늘은 여기까지만 하고 다음은 클릭시 반응하게 수정하는 작업을 진행해보겠다.