I have just started using Qt (5.3) and encountered the fact that some controls appears with margins which I cannot control.
First, I tried to put QLabel and QPushButton right inside QMainWindow
window = new QMainWindow;
label = new QLabel( title, window );
In this case label appears with a margin of 12 pixels at the top (see picture).
QPushButton appears with 1 pixel top & left margins.
But if I insert QFrame with a border, it appears without any margin.
So the margins seem to be attributes of QLabel and QPushButton.
BUT:
When I tried to add extra QFrame between windows and controls:
window = new QMainWindow;
frame = new QFrame(window );
label = new QLabel( title, frame);
I had got different picture:
QLabels top margin had shortened to 1 pixel
QPushButton 1 pixel margins remained intact, but the height of the button had changed
I have tried:
setStyleSheet( "padding:0px" )
and
setContentsMargins( 0, 0, 0, 0 )
for all elements, but without any success.
Any help would be greatly appreciated
The QMainWindow class isn't designed to have widgets added to it directly. Whatever results you see are due to this fact.
The "margins" that you see are not really margins. Since a QLabel is a QFrame, you can enable its frame to see that it has no margin - merely the text is offset from the edge, and that's by design. You can similarly overlay a same-size translucent rectangle on a QPushButton to see that there is also no margin, merely the styling adds its own platform-specific margin. Do not mistake the platform styling mechanism for the style sheets: they are two separate mechanisms and mostly exclusive, with the use of the latter disabling the effects of the former, with few exceptions. For example, the stylesheet spacing/margins/padding is additive to whatever the platform style mandates.
See this answer for an example of how to show overlays on any widget without subclassing.
Related
I'm new with Qt and I want to implement a scrollable widget which can grow dynamically, e.g. by adding buttons into it when another button is pressed. I try to implement it using the following layout and code:
scrollArea = new QScrollArea(ui->outerWidget);
scrollArea->setWidget(ui->innerWidget);
layout = new QVBoxLayout(ui->outerWidget);
ui->innerWidget->setLayout(layout);
scrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
scrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
// code for PushButton to add buttons in innerWidget
void MainWindow::on_pushButton_clicked()
{
QPushButton *button = new QPushButton("button"+QString::number( nameCounter ));
nameCounter ++;
ui->innerWidget->layout()->addWidget(button);
}
This implementation has two problems when I run the program, first the innerWidget appears out of place (I define its position in Qt Creator's Design mode) and second after many widgets are added in the layout the scroll bar is doesn't grow, but instead the widgets are become smaller to fit into the layout:
In another thread it was suggested to set widgetResizable to true:
scrollArea->setWidgetResizable(true);
The scroll bar seems to work now but the new problem is that the innerWidget becomes very small so it is barely visible:
So, how can I achieve a scrollable widget that will respect the size and position of the design?
have no environment to verify but good luck.
to place scrollArea the target position,
Manually call SetGeometry, or
Place a QScrollArea in ui form, (suggested if it's static), or
Place a widget in your target position, and set QScrollArea's parent to it, and add QScrollArea to its layout, and Set QScrollArea to be expanding.
manually create a QWidget innerWidget and assign it to scrollArea via QScrollArea::setWidget(*QWidget), try different size policy to innerWidget, such as "Preferred".
Also be aware of Qt's reference mentioned : void QScrollArea::setWidget ( QWidget * widget )
Sets the scroll area's widget.
....
Note that You must add the layout of widget before you call this function; if you add it later, the widget will not be visible - regardless of when you show() the scroll area. In this case, you can also not show() the widget later.
Above list solutions, below are reasons to the problems you mentioned:
scrollArea->setWidget(ui->innerWidget); Setting a widget to ScrollArea will change the parenting and layouting of ui->innerWidget, so the geometry values written in ui form (in Qt Creater) will no longer take effect, this is the reason of innerWidget out of place. ui->innerWidget is no longer a child of outerWidget, it's geometry will follow its new parent (but not scrollArea, there's some tricky layouting inside QScrollArea". To be clear, innerWidget is not helpful to locate scrollArea in such scenario.
In your first clip of code, widget 'scrollArea' is created with parent outerWidget, again no size policy or layout or geometry is specified, so scrollArea will by default be placed at the left top corner of the parent "outerWidget". To place scrollArea to your target geometry, you can " set geometry manually " or " assign innerWidget as scrollArea's parent and expand scrollArea". Obviously the latter method cannot assign ui->innerWiget to scrollArea->setWidget().
scrollArea->setWidgetResizable(true); makes the scrollArea "shrink" at left top corner of outerWidget. This is because, QScrollArea does not increase along with it's contents, it can scroll to display all of it contents so the required size of QScrollArea can be as small as possible. Once the 'Resizable' property is set to "true", QScrollArea decides to shrink to its minimum necessary size, thus the size to display its scroll bar and scroll buttons....
I wanted to make my widget fill the parent window, even when the window resizes, so I read this: How to make a Qt Widget grow with the window size?
But this solution created a new problem: my widget automatically re-sizes to the size of the window, but there's padding on the sides of the window. I want the widget to completely fill the parent, and it's not doing that. Look:
Here you can see that the tab widget doesn't entirely fill the parent. I've done some research and have seen that through programming, you can configure the layout to get rid of this padding. Problem is, I'm building my GUI in QDesigner, so I can't just go layout->setMargin(0);
My question is, how to I get rid of this padding on the sides of my window through Qt Designer?
In the bottom of central widget properties there is a section of Layout (it is red), where you can set layout margins. Also, you still can do it programmatically:
QMainWindow::centralWidget()->layout()->setContentsMargins(0, 0, 0, 0);
I'm trying to make a sign-in form with Qt5.0.1. I created 2 Widgets and I put my labels and line edits in one of them, and my button in other one. Then I put these 2 widgets in a QVBoxLayout, but the space between two widget in layout is more than purpose. I tried setSpacing and setContentsMargin but they didn't work for this program.
vhandle->setSpacing(0);
vhandle->setMargin(0);
vhandle->setContentsMargins(0,0,0,0);
vhandle->addWidget(handle,0, Qt::AlignTop);
vhandle->addWidget(handle2,0, Qt::AlignTop);
but nothing changed in space between two widgets:
what should I do?
The issue is not the margin settings of the QVboxLayout, but the margin settings of the layout of your container widgets and the spacing setting of the QVBoxLayout. You already have set the spacing to 0, this should be fine. In addition, assumed that upperWidgetLayout is the layout of the upper widget and lowerWidgetLayout the layout of the lower widget, try
upperWidgetLayout->setContentsMargins(-1, -1, -1, 0);
lowerWidgetLayout->setContentsMargin(-1, 0, -1, -1);
This sets the bottom margin of the upper widget's layout and the top margin of the lower widget's layout to 0, so that there is no space between the contents of the two widgets:
Temporarily coloring the various widgets is usually a good approach to track down such issues. You can also use Qt Designer to design the UI and have a look at the source code which is being generated (or use the .ui file directly in your project).
The extra space between widgets or layout can be removed by setting the alignment at top here is an example:
self.layout_scrollarea_v=QVBoxLayout(self.frame)
self.layout_scrollarea_v.setAlignment(Qt.AlignTop)
self.layout_scrollarea_v.addLayout(self.layout_scrollarea_h1)
self.layout_scrollarea_v.addLayout(self.layout_scrollarea_h3)
self.layout_scrollarea_v.addLayout(self.layout_scrollarea_h2)
in your code use
vhandle->setAlignment(Qt::AlignTop)
It´s just a container and i want to put widgets inside and hide them and show them. I don´t want it to have any margins or paddings, and it will be invisible (no border, no background)
I set the QWidget#container to margin:0px, padding:0px through a stylesheet.
And setObjectName("container") to all the widgets that contain.
Nothing happens. But setting a background color works, so it is executed.
In which cases does this happen?
How to fix this?
QWidget does not support box model, so it does not understand padding/margin CSS directives. Use QFrame as container. To see which widgets support box model take a look at list of stylable widgets
Given there was no concise answer I'll sum up the above:
To create a container with no margins and padding, instead of QWidget, use QFrame, and set a layout on it. Then set the spacing to 0 and set the content margins to 0 as well on the layout. Using a stylesheet setting padding/margin to 0 will have no effect.
Code:
QFrame* containerFrame = new QFrame();
QVBoxLayout* layout = new QVBoxLayout;
layout->setSpacing(0);
layout->setContentsMargins(0, 0, 0, 0);
// add some widgets to the layout
containerFrame->setLayout(layout);
I am new to QT. I'm trying to understand the layout mechanism by trying to implement this small window seen below. It has the following elements under the QWidget that's the main window:
One big QWidget that stretches on all the client area.
Two QWidget containers on the top of the window. Both should have the same height, but the right one stretches horizontally, as the window grows/shrinks.
one button container widget on the top right, with fixed height and width
Large QWidget container filling the rest of the client area, that should resize as the window resizes.
The parent window itself is resizeable.
I'm looking for hints as to what layout I should use. How do I achieve this programatically? define what stretches automatically, what stays with a fix size? and how the proportions are kept where they need to be kept.
I'd appreciate any pointer you may have.
The easiest, and IMHO best, way to accomplish this is via the QHBoxLayout and QVBoxLayouts. You can do this via the designer in QtCreator, but I find it doesn't work perfectly if you need to adapt things over time. If it's a static set of widgets, I do suggest designing it using the QtCreator designer as it'll greatly simplify your life.
If you're going to do it programatically, the main window should be set to use a QVBoxLayout and then two sub-QVBoxLayout's after that, where the bottom one is configured to take any space it can get. Then in the top QVBoxLayout, add a QHBoxLayout with your two upper components.
to set a widget to fixed size in code you call setFixedSize( int h, int w ) on the widget. To do it in Designer click on the widget and look in the property editor in the QWidget section. open the sizePolicy thingy and set horizontal and/or vertical to fixed. Then open Geometry and set the width and Height.
To make them stretch at different ratios in code you use a separate argument when using a box layout. eg layout->addWidget( button1, 1 ); layout->addWidget (button2, 2); this would cause button2 to expand at twice the rate of button1. To do this in designer, open the sizePolicy property of the widgets and set the HorizontalStrech and/or VerticalSretch. Note that the size policy needs to not be Fixed in this case for the direction you want to set the stretch on. Also it will never let a widget shrink below its minimum size (it would rather mess up the ratio than shrink something too small).