파이큐티공부_1 로그인창

뒷배경 바꾸기

우클릭 - styleSheet 바꾸기 클릭

background-color 클릭

변환하고 싶은 색상 클릭.

(참고: rgb 54 54 54는 보통 다크모드에서 사용하는 색상이다.)

 

확인 클릭

변한 모습 / 미리보기 창

배경색이 변한 모습을 확인할 수 있다.

만약 실행된 모습을 직접 보고 싶다면 ctrl + r을 눌러서 미리보기창을 볼 수 있다.

 

왼쪽에는 창에 추가할 수 있는 다양한 위젯과 항목들이 있다.

이러한 모든 항목에 익숙할 필요는 없고, 라벨과 버튼부터 시작하는 것이 좋다.

 

라벨: 기본적으로 화면에 쓰여진 텍스트로 대화형이 아니며 특정 위치에 있는 텍스트일 뿐이다. 

---

 

라벨 색상 변경하기

라벨을 추가하여 login 이라고 작성했다. 

검은색 배경이라 인식하기 쉽지 않으므로, 흰색으로 변경해주고 폰트 크기도 키워준다.

색추가 - color - (색 선택);
font-size: (원하는 폰트 사이즈) pt;

이메일과 비밀번호를 입력하는 창을 만들기 위해 

라벨을 하나 넣고 이메일을 작성하고 폰트 크기와 색상을 변경했다. 

(rgb 255, 0, 127은 마젠타 색상이다)

 

---

입력 위젯 넣기 - LineEdit

 

입력 위젯: 입력은 사용자가 작성하고 싶은 것들을 수정할 수 있는 곳이다.

우리는 이메일을 입력하고 싶으므로 기본적으로 lineEdit을 넣는다.

라인 에딧창은 input Widgets 내에 존재한다.

사용자가 입력하면 변경할 수 있다.

 

뒷 배경이 검은색이므로 사용자가 입력할 때도 흰색의 폰트를 입력하도록 해야 한다.

폰트 크기와 색을 변경해 준다.

ctrl + r 로 미리해서 확인했더니 흰색으로 바뀌는 모습을 확인할 수 있다.

 

밑에 동일하게 비밀번호를 만들고 싶으므로,

이메일 라벨과 입력 라벨을 복사한 후 

밑으로 붙여넣기 할 수 있다.

 

 

pushButton 추가

이제 이메일- 비밀번호를 만들었으니 확인 버튼을 만들어야 한다.

좌측 위젯 창에서 pushbutton을 가져와 끌어놓고

배경색을 변경한다.

영상에서는 a7a8a7으로 변경했다.

rgb로는 rgb(167, 168, 167)

폰트 사이즈도 14로 변경해준다.

 

---

파이참 파일과 연결하기

 

지금까지 만들었던 ui 파일을 수정할 폴더에 넣어주고, 

동일한 폴더 내에서 파이썬 (예: main.py)를 만들어 준다.

 

import os
import sys

from PyQt5.QtWidgets import *
from PyQt5 import uic
# 더 추가할 필요가 있다면 추가하시면 됩니다. 예: (from PyQt5.QtGui import QIcon)

def resource_path(relative_path):
    base_path = getattr(sys, "_MEIPASS", os.path.dirname(os.path.abspath(__file__)))    
    return os.path.join(base_path, relative_path)

form = resource_path('main.ui')
form_class = uic.loadUiType(form)[0]

class WindowClass(QMainWindow, form_class):
    def __init__(self):
        super( ).__init__( )
        self.setupUi(self)

        # 여기에 시그널, 설정 
    #여기에 함수 설정

if __name__ == '__main__':
    app = QApplication(sys.argv)
    myWindow = WindowClass( )
    myWindow.show( )
    app.exec_( )

이 틀에서 ui만 저장한 ui 이름으로 바꿔준다.

출처: https://wikidocs.net/160723

00-01. 기본 설정 - Ui파일을 class로 변환하여 사용.

 

---

 

객체 이름 변경하기

파이참에서 수정하기 위해 필드값들을 변경해 준다.

이미 ui를 main.py 로 로드했기 때문에 파이썬 코드에서 참조할 방법이 필요하기 때문이다.

이메일 LineEdit를 email로, 

비밀번호 LIneEdit를 password로,

확인 버튼을 btn_ok로 변경했다.

 

파이큐티 파일은 수정을 할 때마다 

ctrl + s(저장) 버튼을 눌러야 한다.

저장을 하지 않으면 수정사항이 바로 변경되지 않으므로 주의.

 

---

버튼 클릭했을 때 함수 설정하기

self.btn_ok.clicked.connect(self.loginFunction)
        # 로그인 버튼을 이 클래스의 속성인 것처럼 참조하고 있으므로 해당 ui 내의 모든 다른 개체가 이제 이 클래스의 속성이 된다.
        # 버튼을 클릭하면 특정 기능으로 연결하는 부분이다.

btn_ok를 클릭했을 때 loginFuction 함수에 연결되도록 한다.

 

    def loginFunction(self):
        email = self.email.text()  # 이메일 필드에서 텍스트 가져오기
        password = self.password.text()  # 패스워드 필드에서 텍스트 가져오기
        print("성공적으로 로그인되었습니다.", email, password)

밑에 loginFuction 함수를 만들어서 이메일 필드에서 텍스트를, 패스워드 필드에서 패스워드 텍스트를 가져오도록 하고

print문으로 잘 되는지 실험해 본다.

 

잘 실행된다.

 

---

암호화하는 부분 추가하기

두가지 방법이 있다.

1. qt디자이너에서 추가하기

QlineEdit창에서 우측 echoMode -> Password를 클릭하면 입력된 문자 대신 비밀번호 가림용 문자를 표시한다.

2. 코드 내에서 수정하기

상수	값	설명
QLineEdit::Normal	0	입력한 글자
QLineEdit::NoEco	1	창에 아무것도 보여주지 않음. 패스워드의 길이도 보여지지 말아야 할 때 적절함.
QLineEdit::Password	2	실제로 입력한 글자 대신 암호화된 글자 반환함
QLineEdit::PasswordEchoOnEdit	3	입력할 때는 암호화된 글자가 나타나고, 수정할 때는 글자가 나타남.

 

editor = QLineEdit()
editor.setEchoMode(QLineEdit.Password)

self.password.setEchoMode(QLineEdit.Password)

 

 

참고사이트

 

출처: https://doc.qt.io/qt-6/qlineedit.html#EchoMode-enum

QLineEdit Class | Qt Widgets 6.5.0

출처2: https://stackoverflow.com/questions/4663207/masking-qlineedit-text

Masking QLineEdit text

출처3: https://www.pythontutorial.net/pyqt/pyqt-qlineedit/

PyQt QLineEdit

---

 

로그인하기 / 회원가입 창

로그인창.txt

0.00MB