[PyQt5]글자를 입력하고 이곳 저곳으로 옮겨봅시다! - QLineEdit

안녕하세요, Dibrary입니다.

이번에는 글자 입력란을 만들어서 사용해 볼 겁니다.

버튼은 바로 앞전에 팝업을 띄우면서 해 봤죠? 거기서 배운 '이벤트' 연결만 잘 하면 됩니다

혹시라도 까먹으셨을까봐 이벤트를 사용한 글입니다.

2021.07.12 - [프로그래밍/PyQt5] - [PyQt5]버튼으로 팝업 띄워보기! - QMessageBox

[PyQt5]버튼으로 팝업 띄워보기! - QMessageBox

 

이번에 제가 해 볼 것은

• 글자를 입력 해 보고 (근데 입력은 그냥 키보드만 있으면 됩니다 ;)
• 지우고,
• 팝업에 입력한 글자가 나오게 하고,
• 글자를 옮겨보고!

이렇게 총 4가지를 해 볼 겁니다.

 

# 글자 입력하고, 지워보기

입력은 아주 쉽습니다. 그냥 키보드로 넣으면 그만이니까요. 그럼 어디에다가 입력을 해야 할까요?

입력을 받는 요소가 Qt Designer에 있습니다. 바로 QLineEdit 과 QTextEdit 이렇게 두 개입니다.

먼저 Qt Designer를 켜면 왼쪽에 버튼과, edit 위젯이 있습니다. 

드래그 해서 원하는 대로 화면 구성을 하시면 됩니다.

전 간단히 이렇게 만들었습니다.

네 QLineEdit 하나, QTextEdit 하나, 나머지는 버튼들이고, 버튼들 이름을 각각 용도에 맞게 바꿨습니다.

이제 소스코드를 작성 합니다. 전에도 말해드렸지만, 위에 드래그앤 드롭으로 갖다 놓은 요소의 '이름'을 절대 잊어버리시면 안 됩니다. 코드에 필요하니까요.

코드가 팝업 띄우는 연습 한 코드랑 별반 차이가 없죠?

네 사실 PyQt5의 코드는 기본 틀만 기억하시면, 나머지는 자신이 원하는대로 연결만 해 주시면 됩니다.

코드를 간략히 설명 해 보겠습니다.

1. self.del_btn.clicked.connect(self.delete)

del_btn이라는 이름을 가진 버튼을 누르면 delete라는 함수로 이어진다는 것이네요

2. self.lineEdit.setText("") 

lineEdit이라는 이름을 가진 요소에 아무것도 없는 것을 setting 하겠다는 의미입니다.

setText가 글자를 써 넣는 것입니다. 이 곳에 "미음" 글자를 넣으시면 '지우기'버튼을 눌렀을 때, lineEdit 요소에 "미음"이라는 글자가 나옵니다.

지금은 지우는 기능을 구현하려고 빈칸을 set 한 것이죠.

 

화면이 어떻게 나오나 볼까요?

입력 된 모습

지우기 버튼을 누른 뒤의 모습

아주 정상적으로 우리가 원하는 구현이 되었습니다. 글자 입력은 그냥 마우스로 갖다댄 후에 키보드로 누르시면 됩니다.

 

# 팝업에 입력한 글자 나오게 하기

버튼을 눌러서 팝업창이 뜨는데, 그 안에 들어가는 글자가 '내가' 입력한 글자라면 어떨까요?

재밌겠죠?

 

코드는 정말 몇 개 추가되지 않습니다.

아까 지우기 버튼 코드에 딱 popup_btn 관련 이벤트 연결 코드 하나만 생성되었네요.

근데 아래 popup 메서드에는 뭔가 모르는 코드가 있죠?

1. text = self.lineEdit.text( )

lineEdit요소에 있는 '글자'를 가져와서 text라는 변수에 저장한다는 겁니다.

뭔가 입력한 글자가 있다면 그 글자가 text에 저장되는것이죠.

2. QMessageBox.information(self, "팝업", text)

팝업 화면에서 글자가 들어갈 곳에 text를 넣었습니다. 즉, 아까 입력한 글자를 담아둔 text를 사용한 것이므로,
입력한 글자가 팝업에 보입니다.

결과를 한 번 보죠.

네 입력한 글자가 팝업에 뜨네요! 

 

# 글자 옮기기

이제 위에 lineEdit에 입력한 글자를 아래 textEdit으로 옮기게 해 보겠습니다.

어느정도 코드가 익숙해 지시나요? 버튼을 누르면 옮기게 하는 겁니다.

네 move_btn을 누르면 move 메서드가 실행되게 했습니다. 코드도 간단하죠? 비슷해 보이는 부분도 있네요.

 

1. text = self.lineEdit.text( )

아까와 같이 내가 입력한 값을 text에 저장합니다.

2. self.textEdit.setText(text)

textEdit 요소에 내가 입력한 값을 저장한 text를 setting 합니다.

즉, 내가 입력한 값이 표현됩니다.

 

결과는 어떤지 한번 보죠.

lineEdit에만 입력한 화면

옮기기 버튼 누른 후의 화면

네 똑같이 글자가 옮겨졌네요.

사실 아래꺼 지우기 버튼을 만들었지만, 구현은 하지 않았습니다.
맨 위에 있던 지우기 버튼하고 똑같이 구현하면 됩니다. 대신 lineEdit이 textEdit으로 바뀌기만 하면 되는 것이죠.

 

이상으로, 굉장히 쉽게 버튼만으로 입력한 글자를 이곳, 저곳에 띄우는 것을 해 보았습니다.

 

지금 버튼을 눌러서 어떤 형식으로 내가 입력한 데이터를 이동시키는지 '감'을 잡으시는 것이 중요합니다.

이 '감'이 곧 구현으로 이어지는 단초니까요.