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

폴더 구조

├ ─QML/

│       ├ ─ qml/

│               └ view.qml

└ main.py

 

이전에 여기까지 만들었는데 아직 기능이 없고 UI만 있으니 이젠 기능을 넣어 봅시다.

 

마우스 클릭

// 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
            }
        }

        MouseArea{
            id : toggleArea
            anchors.fill : parent
            onClicked : {
                if(toggleCircle.x == 2){
                    toggleCircle.x = toggleBackground.width - toggleCircle.width - 2
                    toggleCircle.color = "green"
                    toggleState.text = "ON"
                }else{
                    toggleCircle.x = 2
                    toggleCircle.color = "red"
                    toggleState.text = "OFF"
                }
            }
        }
    }
}

마우스 클릭시 toggleCircle이 오른쪽이동과 색상은 green 으로 변경되며 toggleState 의 text는 on으로 변경되게 코드를 수정하였습니다.

 

이젠 클릭시 ON OFF를 왔다 갔다하며 토글 버튼처럼 움직이는 것을 확인 할수 있지만 뭔가 2퍼센트 부족한 느낌입니다.

딱딱하게 움직이기 때문이죠 toggleCircle 이 순간이동하듯이 왼쪽 오른쪽 왔다 갔다하면서 움직이는걸 부드럽게 움직 일수 있도록 애니메이션 효과를 넣어 보겠습니다.

 

애니메이션 효과

 

// 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

                Behavior on x{
                    NumberAnimation{
                        duration : 500
                    }
                }
            }
        }

        MouseArea{
            id : toggleArea
            anchors.fill : parent
            onClicked : {
                if(toggleCircle.x == 2){
                    toggleCircle.x = toggleBackground.width - toggleCircle.width - 2
                    toggleCircle.color = "green"
                    toggleState.text = "ON"
                }else{
                    toggleCircle.x = 2
                    toggleCircle.color = "red"
                    toggleState.text = "OFF"
                }
            }
        }
    }
}

toggleCircle 안에

Behavior on x{
    NumberAnimation{
        duration : 500
    }
}

코드가 추가 되었습니다.

x라는 프로퍼티가 변경되면 NumberAnimation효과를 500마이크로세컨드 만큼 진행합니다.

(0.5초 동안 애니메이션 효과 발생)

으로 인해 부드럽게 움직이는 모습을 확인할수 있습니다.

 

이제 검은 테두리를 없에고 완성하면됩니다.

(좀더 깔끔하게 만들고 싶다면 toggleCircle이 지나가면 on off 변경, toggleCircle의 색상변화 자연스럽게, toggleBackground의 배경색을 그라데이션으로 변경등 여러가지 요소를 추가 할수 있습니다.)

 

// 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

            gradient : Gradient{
                GradientStop{
                    position : 0
                    color : "lightgrey"
                }
                GradientStop{
                    position : 1
                    color : "grey"
                }
            }

            Text{
                id : toggleState
                text : toggleCircle.x > toggleBackground.width/2 ? "ON" : "OFF"
                anchors.centerIn : parent
            }

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

                Behavior on x{
                    NumberAnimation{
                        duration : 500
                    }
                }
                Behavior on color{
                    ColorAnimation{
                        duration : 500
                    }
                }
            }
        }

        MouseArea{
            id : toggleArea
            anchors.fill : parent
            onClicked : {
                if(toggleCircle.x == 2){
                    toggleCircle.x = toggleBackground.width - toggleCircle.width - 2
                    toggleCircle.color = "green"
                }else{
                    toggleCircle.x = 2
                    toggleCircle.color = "red"
                }
            }
        }
    }
}