I recently learned Qt and used custom control methods. You need to write a class in which to implement the combination and style adjustment of controls.
This time I used VS2019 to create Qt projects. First, right-click Source Files->Add->New Item to complete the creation of a new class inherited from QWidget.
Double-click the .ui file and open it with Qt Creator to complete a control combination of spinBox and horizontalSlider and lay it out horizontally in the widget. And through the signal/slot mechanism, the values of the two controls are bound, that is, when the slider slides, the value in the spinBox will also change accordingly.
Right-click on the control and you can choose to change the style sheet. This time the style sheet of Slider is renamed:
QSlider::groove:horizontal {
border: 1px solid #bbb;
background: white;
height: 10px;
border-radius: 4px;
}
QSlider::sub-page:horizontal {
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
stop: 0 #bbf, stop: 1 #55f);
background-color: rgb(0, 255, 0);
border: 1px solid #777;
height: 10px;
border-radius: 4px;
}
QSlider::add-page:horizontal {
background: #fff;
border: 1px solid #777;
height: 10px;
border-radius: 4px;
}
QSlider::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
stop:0 #eee, stop:1 #ccc);
border: 1px solid #777;
width: 13px;
margin-top: -2px;
margin-bottom: -2px;
border-radius: 4px;
}
QSlider::handle:horizontal:hover {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
stop:0 #fff, stop:1 #ddd);
border: 1px solid #444;
border-radius: 4px;
}
QSlider::sub-page:horizontal:disabled {
background: #bbb;
border-color: #999;
}
QSlider::add-page:horizontal:disabled {
background: #eee;
border-color: #999;
}
QSlider::handle:horizontal:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}
After changing the style sheet, the control will look better. This blog details the QSlider style design method .
A learning blog about style sheets
After completing the encapsulation of the custom control class, add a widget in another UI and promote it to an encapsulated class. Be careful not to check global inclusion. If you check it, an error will be reported when the program is running, "no such file or dictionary after widget upgrade" 1.
Refer to this blog to solve the problem
2. This can also be solved but it needs to be changed every time. A little troublesome
How to use QScrollArea and precautions
When using QScrollArea, I found that the widget inside needs to be larger than the size of QScrollArea, and QScrollArea needs to set the layout before it can display the scroll bar, otherwise it will not be displayed.