Pyside6 designer사용해서 UI 만들어보기

소개

페이지 전환 연습
페이지1에서 radio박스로 과일 선택하면
페이지2에서 label에 선택된 과일 뜨도록 구현

설치

pip install pyside6

실행

pyside6를 설치하면 pyside6-designer도 같이 설치된다!

pyside6-designer

실행하면 다음과 같이 뜬다

UI구성

• Containers에 Stacked Widget을 끌어서 form 안으로 넣는다.
• 우클릭 -> Insert Page를 눌러 페이지를 추가한다(페이지1,2 생성 완료)
• 페이지1번 안에 label과 button, radio button을 추가하여 다음과 같이 구성한다!
• 페이지2번 안에 label, button을 추가하여 다음과 같이 구성한다.
• ui를 저장한다.

코드 구성

• VScode에 들어가서 ui가 저장된 폴더를 연다
• ui를 파이썬 코드로 변환해주어야한다!
  • 터미널을 열고 아래 명령어를 입력하면.py 파일이 생긴다.
  • pyside6-uic [파일명].ui -o [파일명].py
• .ui, .py파일이 저장된 폴더에 main.py 파일을 생성해준다.
• 라이브러리 세팅
  • 먼저 사용할 라이브러리들과 .py파일 속 Ui_From을 불러온다.
  • import sys from PySide6.QtWidgets import QApplication, QWidget, QMessageBox from PySide6.QtCore import Slot from fruit_ui import Ui_Form
• 메인 화면을 만들어보자!
  • Window라는 클래스를 생성 후 실행과 동시에 시작될 코드들을 적어준다.
  • self.ui.stackedWidget.setCurrentIndex(0): 초기 화면을 Stacked Widget의 0번 인덱스(=page1)으로 지정한다.
  • self.ui.pushButton.clicked.connect(self.page2): 버튼을 눌렀을 때 해당 페이지로 이동하도록 지정해준다.
  • class Window(QWidget): def __init__(self): super().__init__() self.ui = Ui_Form() self.ui.setupUi(self) self.ui.stackedWidget.setCurrentIndex(0) self.ui.pushButton.clicked.connect(self.page2) self.ui.pushButton_2.clicked.connect(self.page1)
• 페이지2 코드 구현
  • page2라는 함수를 만든다.
  • radios 변수에 지정한 radiobutton들을 넣어준다.
  • 만약 radiobutton 중 하나가 선택되면 select의 값이 선택된 radiobutton의 텍스트로 바뀐다.
  • 선택이 안된다면 과일을 선택하라는 알림이 뜬다
  • label4에는 select에 저장된 과일로 텍스트가 바뀌고 1번 인덱스(=page2)로 전환된다.

    def page2(self):
          radios = [self.ui.radioButton, self.ui.radioButton_2, self.ui.radioButton_3, self.ui.radioButton_4]
          select = None
          for rb in radios:
              if rb.isChecked():      
                  select = rb.text()      
                  break                
          if not select:
              QMessageBox.information(self, "알림", "과일을 하나 선택해 주세요.")
              return
          self.ui.label_4.setText(select)
          self.ui.stackedWidget.setCurrentIndex(1)

• 페이지1 코드 구현
  • 0번 인덱스(=page1)로 전환한다.
  • def page1(self): self.ui.stackedWidget.setCurrentIndex(0) if __name__ == "__main__": app = QApplication(sys.argv) w = Window() w.show() sys.exit(app.exec())

시연영상

전체 코드

import sys
from PySide6.QtWidgets import QApplication, QWidget, QMessageBox
from PySide6.QtCore import Slot
from fruit_ui import Ui_Form   


class Window(QWidget): 
    def __init__(self):
        super().__init__()
        self.ui = Ui_Form()
        self.ui.setupUi(self) 

        self.ui.stackedWidget.setCurrentIndex(0)
        self.ui.pushButton.clicked.connect(self.page2)       
        self.ui.pushButton_2.clicked.connect(self.page1)     

    def page2(self):
        radios = [self.ui.radioButton, self.ui.radioButton_2, self.ui.radioButton_3, self.ui.radioButton_4]
        select = None
        for rb in radios:
            if rb.isChecked():      
                select = rb.text()      
                break                
        if not select:
            QMessageBox.information(self, "알림", "과일을 하나 선택해 주세요.")
            return
        self.ui.label_4.setText(select)
        self.ui.stackedWidget.setCurrentIndex(1)

    def page1(self):
        self.ui.stackedWidget.setCurrentIndex(0)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = Window()
    w.show()
    sys.exit(app.exec())