QListWidget of Qt6 – Qt imitation ToDesk sidebar (1)

1. Overview of QLitWidget

Note: This article is not a simple translation of Qt documents or interface functions, but focuses on the demonstration and use of Qt Designer without code.

QListWidget, also known as the list box class, provides a list view similar to that provided by QListView, but it has a classic item-based interface for adding and removing items. In practical applications, it is often used in conjunction with the stack form class.

It is the most commonly used basic component of Qt. I think it is the most underestimated class. In fact, QListWidget is flexible, simple and practical, including myself in the sidebar or upper column. I often use QFrame + QPushButton or QToolButton combination to splice myself “Creating wheels”, as shown in the following figure, the sidebar list box style of Kabbah and WeChat and this article demonstrates the key todesk sidebar:

Most people who are not familiar with QListWidget subconsciously think that QListWidget is too low-level and not easy to use. It can only realize the effect on the left of the picture below. This time, we will implement the effect on the right as shown in the following picture according to the existing layout of ToDesk. Only use qt designer and stylesheet without using a single line of code:

2. Example demonstration and trial

2.1, drag out the list box class and add a list

As shown in the figure below, in the Item Widget column at position 1, drag and drop the List Widget directly, and you will get the white box shown at position 2. Seeing that there is nothing here, it is because there is no list menu. Double-click the space at position 2, and click green at position 3 Add button, it can be displayed after entering the name, add 5 in turn to get the picture on the right below;

2.2. Set the background of QListWidget to remove the border

Right-click on QListWidget, change the style sheet, enter the following content, and get the following right picture:

QListWidget {
background-color: rgb(240, 243, 248);
border: 0;
}

2.3. Adjust font size

Adjust the font size of all list menus to 12 at one time;

Select QListWidget, the font of the rightmost window is 12, confirm it, and get the right picture;

2.4, adjust the height of each list menu

Solve the height of each list menu, also called Item height.

At this point, each button menu can be clicked or selected, but the height of the buttons is too low, causing them to be squeezed on top, changing the height of the item, and the rounded corners of each button. I am usually used to the style sheet, as shown below:

QListView::item {
    height: 45px;
border-radius: 5px;
}

2.5. Set the effect of mouse over and selection

Still selected, edit the style sheet: the background background color, color font color. After the setting is completed, as shown on the right:

 QListView::Item:hover {
 background: rgb(229, 237, 248);
 }

QListView::Item:selected {
background: rgb(204, 223, 248);
color: rgb(0, 112, 249);
}

2.6, solve the left icon

2.6.1 Project, right click, create a new file, select “Qt resource file”, any English name, it will be regarded as a path later, suggest resource, at this time get the right picture, in the qrc file location, add the existing file, put the prepared Good icons are added in one go.

Remarks: Each menu has two icons, because the icon is blue after selection, so there are two

2.6.2 Select, right click, edit the project, then select properties, scroll to find the icon, click the small triangle, and then click to select resources, find the black icon corresponding to the first control; then, scroll to the position of “Select Off”, and click the same Triangle, then click to select resources, find the blue icon corresponding to the first control, and confirm.

2.6.3 According to the above aspects, set the icons in the 5 lists one by one. After completion, as shown in the figure below, you will see that the icon is very small. We need to set it according to the size of the icon. In the position indicated by the arrow below, the width and The height is set to 30, and the picture on the right is obtained, which is almost perfect;

2.7. Solve the problem of the dotted box after selection

Here, the style sheet is also removed, select the entire list box, right click, change the style sheet, add the following, as shown in the figure below:

QWidget:focus{
outline: none;
}

2.8 Final compilation demo

At this point, it has been completely completed. The sidebar, as shown in the figure below, will combine the demo and the stack form class QStackedWidget in the next part to realize the page turning function:

To sum up, in fact, Qt provides us with children’s building blocks, and the effect of stacking depends on imagination and proficiency. In the next article, QStackedWidget can easily switch pages. Compared with QFrame + QPushButton or QToolButton, it is more concise, practical and easy to understand.