How to "stick" widgets to bottom of an expanding window? - c++

I have a bunch of standard qt creator dragged-on controls, which I have at the bottom of a window. I have one table widget that I want to expand vertically to be able to display more rows if the window is expanded downwards, less if upwards to a minimum. I want all the other widgets to stick to the bottom of the window as that edge moves. I'm using Qt Creator 2.1.0 and Qt 4.7, and I don't see any flags for the widgets that would do what I need, nor did googling really turn up anything enlightening. Perhaps it has something to do with putting the widgets in a container that moves and/or stretches? Right now, they're just on MainWindow.

Just set a vertical layout, add a spacer to it, and then your widget. The spacer will push your widget all the way down. Additionally you might want to toy around with the size policies.

A QMainWindow should only be used if you need its docking functionality. Otherwise, just use a plain QWidget. No general purpose child widgets can be "stuck" onto a QMainWindow. They need to belong to the central widget. All you most likely need to do is to set an Expanding vertical size policy to the table widget. Designer should do it by default. Here's an example:
mainwindow.ui
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<widget class="QWidget" name="centralwidget">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QTableWidget" name="table">
<row>
<property name="text">
<string>1</string>
</property>
</row>
<column>
<property name="text">
<string>Name</string>
</property>
</column>
<item row="0" column="0">
<property name="text">
<string>fyngyrz</string>
</property>
</item>
</widget>
</item>
<item>
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<widget class="QPushButton" name="foo">
<property name="text">
<string>Foo</string>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="bar">
<property name="text">
<string>Bar</string>
</property>
</widget>
</item>
</layout>
</item>
</layout>
</widget>
</widget>
<resources/>
<connections/>
</ui>

It is difficult to know what you are trying to do from your question, but perhaps you are looking for QSplitter.
Alternatively, you can specify various QLayouts for a QWidget, such as QHBoxLayout, QVBoxLayout, QGridLayout, etc. Various widgets can be added to the layout you specify, then you set the layout on a QWidget, so it acts as a container for the widgets you've added to the layout. Stretching and alignment flags can be set as you add your widgets to the layout.

Related

Resizable layouts/frames in Qt, per widget by the user

I use QGridLayout very often, and there's a requirement I don't know how to or if I can achieve with this kind of layouts.
My question: Imagine I have two normal widgets (derived from QWidget) on the left and right (on something like QHBoxLayout or QGridLayout), and I would like to have the line separating them movable by the user. Is that possible?
More information:
To give an example, imagine the default Windows registry editor. You have the part on the left, where there are keys and paths, and on the right, where there are values to be edited.
I would like to emphasize that I'm not asking for an explorer view. What I have basically is a plot widget on the right, and a QTableView widget on the left, and I would like the user to be able to conveniently scale with his mouse, which widget should be horizontally bigger.
Is there some kind of Layout that is scalable by mouse?
Please ask for more information of you require it.
I think you should use a QSplitter.
According to the documentation:
A splitter lets the user control the size of child widgets by dragging
the boundary between the children. Any number of widgets may be
controlled by a single splitter.
For example, using Qt Creator, if we have two QGridLayout with a QPushButton on each one, we can select both QGridLayout and use the Lay Out Horizontally in Splitter option.
After that, we could move the boundary between them to control the size of child widgets:
I made an example. Here you have the code for the ui file:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>Form</class>
<widget class="QWidget" name="Form">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>435</width>
<height>105</height>
</rect>
</property>
<property name="windowTitle">
<string>Form</string>
</property>
<widget class="QSplitter" name="splitter">
<property name="geometry">
<rect>
<x>9</x>
<y>10</y>
<width>411</width>
<height>71</height>
</rect>
</property>
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<widget class="QWidget" name="gridLayoutWidget">
<layout class="QGridLayout" name="gridLayout">
<item row="0" column="0">
<widget class="QPushButton" name="pushButton">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
</layout>
</widget>
<widget class="QWidget" name="gridLayoutWidget_2">
<layout class="QGridLayout" name="gridLayout_2">
<item row="0" column="0">
<widget class="QPushButton" name="pushButton_2">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
</layout>
</widget>
</widget>
</widget>
<resources/>
<connections/>
</ui>

QT display image with Qlabel in layouts not working

new to QT and I am planning to display images aligning beautifully with layouts.
I create 3 Qlabels and group them in vertical and horizontal layouts to construct a widget like:
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QLabel" name="label">
<property name="text">
<string>TextLabel</string>
</property>
</widget>
</item>
<item>
<widget class="QLabel" name="label_2">
<property name="text">
<string>TextLabel</string>
</property>
</widget>
</item>
</layout>
</item>
<item>
<widget class="QLabel" name="label_3">
<property name="text">
<string>TextLabel</string>
</property>
</widget>
</item>
in designer:
I use following to load my images and display images:
ui->setupUi(this);
src=cv::imread("image2.bmp");
cvtColor(src,src,CV_BGR2RGB);
img = QImage((const unsigned char*)(src.data),src.cols,src.rows,src.cols*src.channels(),QImage::Format_RGB888);
ui->label->setPixmap(QPixmap::fromImage(img).scaled(ui->label->width(), ui->label->height(),Qt::KeepAspectRatio));
ui->label_2->setPixmap(QPixmap::fromImage(img).scaled(ui->label_2->width(), ui->label_2->height(),Qt::KeepAspectRatio));
ui->label_3->setPixmap(QPixmap::fromImage(img).scaled(ui->label_3->width(), ui->label_3->height(),Qt::KeepAspectRatio));
displaying image spans 480*640, and I choose to keep the aspect ratio.
however, the program runs like this:
pic lays in screen shots here
the image is resizing in a surprisingly wrong way. I have try Qt::KeepAspectRatiobyExpanding and Qt::ignoreAspectRatio but none of these behavior as expect.
Any idea about this?
You can set the image to fill the label with: -
void QLabel::setScaledContents(bool)
So call: -
ui->label->setScaledContents(true);
ui->label_2->setScaledContents(true);
ui->label_3->setScaledContents(true);
Also note that you can set the pixmap in the designer. Just add the images as a resource, then set it on the label, in its properties: -
I cannot see the images you've pasted, but perhaps the problem is based on the size of QLabels: what is their size prior to:
ui->label->setPixmap(QPixmap::fromImage(img).scaled(ui->label->width(), ui->label->height(),Qt::KeepAspectRatio));
Perhaps it's very small or just enough to hold the "TextLabel" string, hence the weird resizing?

Qt Checkbox not visible

I have two applications:
Both displays QCheckBox text correctly
Both use the same css stylesheet
All the settings in the widget editor seem to the the same
The check box square is not visible for one application while it is for the other.
Editor view of the QCheckbox.
The application that is working
The application that is not working.
In response to Pavel Strakhov:
<layout class="QHBoxLayout" name="horizontalLayout_3">
<item>
<widget class="QCheckBox" name="c">
<property name="text">
<string>Display</string>
</property>
<property name="checked">
<bool>true</bool>
</property>
</widget>
</item>
<item>
<widget class="QCheckBox" name="logToFile">
<property name="text">
<string>To File</string>
</property>
</widget>
</item>
</layout>
This issue is cause because there is a global image file used, so the check box will not be visible. I resolve the issue by making a new checkbox image and applied it to all checkboxes in the css.

QLabel doesn't show pixmap in windows

I've designed a ui in QtDesigner which has a QLabel that must show a JPG image (included in a Qresource file) as pixmap.
The Application works fine in KDE (not tested under gnome), but in windows the image is not shown.
here is the XML code in the ui file which impeliments the QLabel file:
<item row="0" column="0">
<widget class="QLabel" name="label">
<property name="text">
<string/>
</property>
<property name="pixmap">
<pixmap resource="lib.qrc">:/image/Yearbook_1970.jpg</pixmap>
</property>
</widget>
</item>

How can I create a properly sizing QWebView?

I want to make a QWebView appear expanding to the width and height so that ideally it will have no scroll bars. Some websites may have fixed widths that wont allow this, but I am not concerned with those. In any case, I cannot do as I wish because QWebView implements sizeHint as follows:
QSize QWebView::sizeHint() const
{
return QSize(800, 600); // ####...
}
This is incorrect on a number of levels. 1. It doesnt at all take into account the size of the actual web page. 2. It doesnt take into account that the height and width are related to each other. (To prove #2 think about text in web pages that wraps to the next line.)
As a simple fix I tried to do (where QResizingWebView extends QWebView):
QSize QResizingWebView::sizeHint() const{
return this->page()->mainFrame()->contentsSize();
}
While this is closer to the result, it also has 2 flaws. 1. It doesnt take into account the relation between the displayed width/height. 2. this->page()->mainFrame()->contentsSize() is inaccurate from what I can tell from my preliminary testing (it has returned heights larger than it should under many cases, although this may be related to #1).
Does anyone have any tips to fix this?
According to this post on qtcentre.org, you should be able to correct the behavior by setting the size policy.
Update:
Without modifying the size policies at all, a QWebView in a default QHBoxLayout layout on a QWidget results in a web view that resizes properly within the QWidget at sizes greater than 800x600 (using QtCreator, C++, Windows 7, Qt 4.8.1).
Update 2:
I did some digging and found that this question relates to a previous question you posted that contains the relevant requirements :)
The following code seems to meet those requirements. The only relevant bits are that I changed the horizontal and vertical size policies of the QWebView to "expanding".
MainWindow.cpp:
#include "MainWindow.h"
#include "ui_MainWindow.h"
MainWindow::MainWindow(QWidget *parent) :
QWidget(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
}
MainWindow::~MainWindow()
{
delete ui;
}
MainWindow.ui:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QWidget" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>587</width>
<height>442</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<widget class="QLabel" name="label">
<property name="text">
<string>TextLabel</string>
</property>
<property name="alignment">
<set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignTop</set>
</property>
</widget>
</item>
<item>
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QLabel" name="label_2">
<property name="text">
<string>TextLabel</string>
</property>
<property name="alignment">
<set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignTop</set>
</property>
</widget>
</item>
<item>
<widget class="QWebView" name="webView">
<property name="sizePolicy">
<sizepolicy hsizetype="Expanding" vsizetype="Expanding">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="url">
<url>
<string>http://www.google.ca/</string>
</url>
</property>
</widget>
</item>
</layout>
</item>
</layout>
</widget>
<layoutdefault spacing="6" margin="11"/>
<customwidgets>
<customwidget>
<class>QWebView</class>
<extends>QWidget</extends>
<header>QtWebKit/QWebView</header>
</customwidget>
</customwidgets>
<resources/>
<connections/>
</ui>
Update 3:
Update 4:
Given the URL provided in the comments. It displays as follows.
With a main window at 640x480:
With a main window at 1024x768:
I got it working by implementing heightForWidth in a custom widget which extended QWebView