이전 예제에서 배운 모든 지식을 통합하고 가상의 운영 체제에 대한 로그인 화면을 만드는 방법을 배웁니다. 스타일 시트는 좋은 UI를 디자인하기 위해 마스터해야 하는 유일한 것이 아닙니다. Qt Designer의 레이아웃 시스템을 사용하여 위젯을 깔끔하게 배열하는 방법도 배워야 합니다.
- 작업을 시작하기 전에 그래픽 로그인 화면의 레이아웃을 디자인해야 합니다. 좋은 소프트웨어를 만들기 위해서는 기획이 매우 중요합니다. 다음은 로그인 화면이 어떻게 보이는지 보여주기 위해 만든 샘플 레이아웃 디자인입니다. 메시지를 명확하게 전달하는 한 다음과 같은 간단한 선 그리기로 충분합니다.
- 다시 Qt Designer로 돌아가십시오.
- 먼저 상단 패널에 위젯을 배치한 다음 그 아래에 로고와 로그인 양식을 배치합니다.
- 기본 창을 선택하고 너비와 높이를 각각 400과 300에서 800과 600으로 변경합니다. 모든 위젯을 배치할 더 큰 공간이 필요하기 때문입니다.
- 위젯 상자의 Display Widgets 아래에 있는 label을 클릭하여 Form편집기에 배치합니다.
- 레이블의 objectName 속성을 currentDateTime으로 변경하고 해당 text 속성을 2021년 08월 15일 일요일 오전 6시 20분과 같이 표시 목적으로만 현재 날짜 및 시간으로 변경합니다.
- 버튼 카테고리 아래의 PushButton을 클릭하여 Form편집기로 가져옵니다. 상단 패널에 두 개의 버튼이 있으므로 이 과정을 한 번 더 반복합니다. 두 버튼의 이름을 restartButton 및 shutdownButton으로 바꿉니다.
- Main window을 선택하고 양식 도구 모음에서 마우스를 가져갔을 때 Layout Vertical이라고 표시된 작은 아이콘 버튼을 클릭합니다. 위젯이 기본 창에 자동으로 정렬되는 것을 볼 수 있지만 아직 정확히 원하는 것은 아닙니다.
- 레이아웃 카테고리 아래의 Horizontal Layout 위젯을 클릭하고 메인 창으로 드래그하세요.
- 두 개의 Push Button과 텍스트 Label을 클릭하여 수평 레이아웃으로 드레그하여 옮깁니다. 세 개의 위젯이 가로 행으로 배열되는 것을 볼 수 있지만 세로로는 화면 중앙에 있습니다. 수평 배열은 거의 정확하지만 수직 위치는 완전히 벗어났습니다.
- Spacers 범주에서 Vertical Spacer를 클릭하고 끌어서 이전 단계에서 만든 수평 레이아웃 아래(빨간색 직사각형 윤곽 아래)에 놓습니다. 모든 위젯은 스페이서에 의해 맨 위로 밀려납니다.
- 텍스트 레이블과 두 버튼 사이에 Horizontal Spacer를 배치하여 서로 떨어져 있도록 합니다. 이렇게 하면 텍스트 레이블이 항상 왼쪽에 고정되고 버튼이 오른쪽에 정렬됩니다.
- 두 버튼의 Horizontal Policy 및 Vertical Policy 속성을 모두 Fixed로 설정하고 minimumSize 속성을 55 x 55로 설정합니다. 텍스트 대신 아이콘을 사용할 것이기 때문에 버튼의 text 속성을 공백으로 설정합니다.
- UI는 다음과 유사해야 합니다.
댓글 없음:
댓글 쓰기