I have a QSplitter and two widgets on either side, but I want to be able to have a margin, so that there is a clear transition between the two widgets. I looked in QSplitter and QSplitterHandle but dont see any explicit way of doing this.
How do I add a divider between the two widgets?
Style sheets are a powerful mechanism for changing the appearance of any widget in Qt.
See here for a quick tutorial, and here for a reference guide. Style sheets can be assigned using an editor in the Designer, or passed as a string using setStylesheet(QString). It is certainly easier using the Designer because then you can see what your widget will look like before running it.
Now, for your specific problem. A QSplitter is essentially a QFrame. But it also includes a handle - as you know. So typically that is what is usually styled.
So, for example you can do this:
QSplitter::handle {
image: url(:/images/splitter.png);
}
Which provides an image for the splitter handle. This is a bit similar to what is done under Motif, where there is a little rectangular handle always shown that the user can click on to move the splitter.
With a little experimentation you can create a cool separation line for your handle.
QSplitter::handle {
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
stop:0 rgba(255, 255, 255, 0),
stop:0.407273 rgba(200, 200, 200, 255),
stop:0.4825 rgba(101, 104, 113, 235),
stop:0.6 rgba(255, 255, 255, 0));
image: url(:/images/splitter.png);
}
Or something more drawn like this one.
QSplitter::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;
}
For this last one, we specifically only override the horizontal splitter, because of some of the properties - like margin-top and bottom, and width that would need to be different if we were changing the vertical splitter.
Hope this helps. Once you start playing with Style sheets the fun really begins.
The QSplitter has a handleWidth property you can set.
Without going into all the gory details of style sheets I can give you a couple of options:
1) You can layout a couple of QFrames in your splitter, give them layouts and the put your widgets inside of those frames. You can use the layouts' spacing options (see QLayout::setContentsMargin()) to add some spacing around your widgets.
2) The style-sheet way (and in my opinion superior way) is to setup some style sheets for your widgets. For a brief example you can do something like this on your widgets that are in your splitter:
widget->setStyleSheet( "margin-left: 10px" )
If you're doing any kind of GUI design with Qt, I highly recommend you learn all about style sheets, they are your friend. See the Qt style sheets reference for some documentation.
Related
How do I get rid of grey area as seen in the image below. It seems like if the table does not fill the entire space, the grey color just extends until the end.
I coded something similar to this image in C++.
It's not just grey color, it's a vertical header. As I see it, your options are:
Get rid of the header in Designer and create your own column with numbers, not editable, of course
Use custom stylesheet for QHeaderView, like (example, don't know your preffered colors)
QHeaderView::section
{
background-color: transparent;
color: black;
font: 10pt "MS Shell Dlg 2";
}
It works with QTableView.
UPD: Try the following: set the stylesheet for QHeaderView AND it's sections if needed, like
QHeaderView
{
background-color: white;
}
This will paint your header white, no grey, like you wanted. Then you can improve the stylesheet, styling sections (probably, you'll like proper borders and all, so don't use "border: 1px solid balck", play with border-top and/or border-bottom, otherwise sections will get ugly double inner borders).
After that you can consider styling only one header or both, further improve styleshhet, but the point remains that QHeaderView and it's sections can be styled independently
How to change the style sheet of splitter/handle beside QDockWidget when it is added to DockWidgetArea. There is one main movable handle and multiple handles between each dockwidgets on that side. I would like to change at least bg colour and border of the handle and hover colour.
It would help if I know what kind of object it is or to get some pointer to the handle to setStyleSheet on it.
Ok I found it after some digging inside source code. Finally the answer was so simple and was screaming from the documentation of style sheet:
Note: Use QMainWindow::separator to style the resize handle.
Ok so the code is simple:
QMainWindow::separator
{
background-color: green;
width: 4px;
border: none;
}
When setting the background-color of a QLineEdit using stylesheets, there is a very noticeable flicker upon mouseover of the control. Example code:
QLineEdit* flicker = new QLineEdit(this);
flicker->setStyleSheet("QLineEdit {background: red;}");
flicker->show();
This only happens when running on Windows Vista and later, and not in XP. I think it has something to do with the default styling for Windows (Aero?) applications, because setting the style to QStyle::Fusion fixes the problem:
QLineEdit* flicker = new QLineEdit(this);
QStyle* fusion = QStyleFactory::create(QString("Fusion"));
flicker->setStyle(fusion);
flicker->setStyleSheet("QLineEdit {background: red;}");
flicker->show();
Edit:
I also have an eventfilter set up such that the control gets repainted on mouseover, and the debugger is confirming that that gets called immediately.
Ran into the same problem and wanted to share a possible workaround:
The reason for the flickering of the QLineEdit on mouseover is probably that another style sheet is used for "QLineEdit:hover{...}" that still contains the defaults. Unfortunately, it does not seem to be enough to add "QLineEdit:hover{background-color: red}". The only way I found it to work correctly up until now is to use
flicker->setStyleSheet("QLineEdit{background-color: red;} QLineEdit:hover{border: 1px solid gray; background-color red;}");
Not quite sure why the border property needs to be set explicitly, but it worked for me.
I've had a similar problem and resolved it by adding a border to QLineEdit, like this:
#dont_flick_lineedit{
background-color: red;
border: 1px solid #CCC;
}
#flick_lineedit{
background-color: blue;
}
Is there a way to round the corners of a QLineEdit widget? If not is there a similar widget I could do this to?
Visual Meaning:
Solved: (See below for additional information)
QLineEdit *lineEdit = new QLineEdit;
lineEdit -> setStyleSheet("QLineEdit { border: 2px solid gray;"
"border-radius: 5px;}");
You can use StyleSheets to set styles of Qt components just like you would use them in making a website. You can set a stylesheet in two ways: in your application's code, or in QtDesiner.
To do it in QtDesiner (which is most convenient), right-click on the component which you have placed on the form, and press "Edit StyleSheet" (or maybe "Change Stylesheet", sorry, my Qt is not it English, so I'm not sure about the exact name of the option). A window will open that will let you edit the element's style sheet.
It is very convenient because it has some useful options like adding resources or colors or fonts right there, and you just need to press a couple of buttons to set the option you need through the GUI without the need to type or even to know CSS syntax.
From the code, you can do it like this (example):
SomeComponent->setStyleSheet("QLineEdit { border-radius: 5px; }");
Here is the documentation about the stylesheets.
Use stylesheets. From http://doc.qt.io/archives/qt-4.7/stylesheet-examples.html:
QLineEdit {
border: 2px solid gray;
border-radius: 10px;
}
Also, you can always override paintEvent if you want to get your hands dirty.
I have a number of QToolBar's in Qt::TopToolBarArea of my QMainWindow. I want to remove the left and right borders from the ones which are not on the edges. However, when try the following code, it ends up erasing ALL of the borders on the QToolBar:
toolBar2->setStyleSheet("QToolBar { border-left-style: none; border-right-style: none; }");
I want this to appear as one continuous tool bar, with no borders between them. What is the proper way to achieve this?
You're right, styling one or more of the borders (including removing it) ends up removing the rest. This is because style sheets and Qt Styles don't mix very well, and the Qt Style usually loses.
What you can do is bring back the borders you do want to see. This example specifies how the top and bottom borders should appear, which in turn removes the left and right boders:
toolBar2->setStyleSheet("QToolBar {border-bottom: 2px solid black; border-top: 2px solid black;}");