Creating a login screen using style sheets
Next, we will learn how to put all the knowledge we learned in the previous example together and create a fake graphical login screen for an imaginary operating system. Style sheets are not the only thing you need to master in order to design a good UI. You will also need to learn how to arrange the widgets neatly using the layout system in Qt Designer.
How to do it…
- The first thing we need to do is design the layout of the graphical login screen before we start doing anything. Planning is very important in order to produce good software. The following is a sample layout design I made to show you how I imagine the login screen will look. Just a simple line drawing like this is sufficient as long as it conveys the message clearly:
We are not done with the login form yet. Now that we have created the container for the login form, it's time to put more widgets into the form:
- Place two horizontal layouts into the login form container. We need two layouts as one for the username field and another for the password field.
- Add a label and a line edit to each of the layouts you just added. Change the
textproperty of the upper label toUsername:and the one below asPassword:. Then, rename the two line edits asusernameandpasswordrespectively. - Add a push button below the password layout and change its
textproperty toLogin. After that, rename it asloginButton. - You can add a vertical spacer between the password layout and the login button to distance them slightly. After the vertical spacer has been placed, change its
sizeTypeproperty toFixedand change theHeightto5. - Now, select the
loginFormcontainer and set all its margins to 35. This is to make the login form look better by adding some space to all its sides. - You can also set the
Heightproperty of theusername,password, andloginButtonwidgets to 25 so that they don't look so cramped. - Now your UI should look something like this:
- After we've done the layout, it's time for us to add some fanciness to the UI using style sheets! Since all the important widgets have been given an object name, it's easier for us to apply the style sheets to it from the main window, since we will only write the style sheets to the main window and let them inherit down the hierarchy tree.
- Right click on MainWindow from the object inspector window and choose Change Stylesheet.
- Add the following code to the style sheet:
#centralWidget { background: rgba(32, 80, 96, 100); } - Now you will see that the background of the main window changes its color. We will learn how to use an image for the background in the next section, so the color is just temporary.
- In Qt, if you want to apply styles to the main window itself, you must apply it to its central widget instead of the main window itself because the window is just a container.
- Then, we will add a nice gradient color to the top panel:
#topPanel { background-color: qlineargradient(spread:reflect, x1:0.5, y1:0, x2:0, y2:0, stop:0 rgba(91, 204, 233, 100), stop:1 rgba(32, 80, 96, 100)); } - After that, we will apply black color to the login form and make it look semi-transparent. After that, we will also make the corners of the login form container slightly rounded by setting the
border-radiusproperty:#loginForm { background: rgba(0, 0, 0, 80); border-radius: 8px; } - After we're done applying styles to the specific widgets, we will apply styles to the general types of widgets instead:
QLabel { color: white; } QLineEdit { border-radius: 3px; } - The preceding style sheets will change all the labels' texts to a white color, which includes the text on the widgets as well because, internally, Qt uses the same type of label on the widgets that have text on it. Also, we made the corners of the line edit widgets slightly rounded.
- Next, we will apply style sheets to all the push buttons on our UI:
QPushButton { color: white; background-color: #27a9e3; border-width: 0px; border-radius: 3px; } - The preceding style sheet changes the text of all the buttons to a white color, then sets its background color to blue, and makes its corners slightly rounded as well.
- To push things even further, we will change the color of the push buttons when we mouse-over it, using the keyword
hover:QPushButton:hover { background-color: #66c011; } - The preceding style sheet will change the background color of the push buttons to green when we mouse-over them. We will talk more about this in the following section.
- You can further adjust the size and margins of the widgets to make them look even better. Remember to remove the border line of the login form by removing the style sheet that we applied directly to it earlier.
- Now your login screen should look something like this:
How it works...
This example focuses more on the layout system of Qt. The Qt layout system provides a simple and powerful way of automatically arranging child widgets within a widget to ensure that they make good use of the available space.
The spacer items used in the preceding example help to push the widgets contained in a layout outward to create spacing along the width of the spacer item. To locate a widget to the middle of the layout, put two spacer items to the layout, one on the left side of the widget and another on the right side of the widget. The widget will then be pushed to the middle of the layout by the two spacers.
The rest of the chapter is locked
83
Tech Concepts
36
Programming languages
73
Tech Tools
Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
50+ new titles added per month and exclusive early access to books as they are being written.
