I have a simple qt ui that contains
|- central widget
|- label
|- button
I would like to manually place and resize the label and button freely (using the mouse), and I just can't seem to be able to do that.
I can only resize the entire window, and the label/button stretch with it. I tried all combinations of size policies
Thanks!
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>326</width>
<height>254</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralWidget">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QLabel" name="label">
<property name="text">
<string>Bla</string>
</property>
<property name="alignment">
<set>Qt::AlignCenter</set>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="startButton">
<property name="text">
<string>Start</string>
</property>
</widget>
</item>
</layout>
</widget>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources/>
<connections/>
</ui>
try to remove
<layout class="QVBoxLayout" name="verticalLayout">
and
</layout>
but if you are working under qt creator or qt designer,
you can easily do this thing. You need to choose centralWidget and click to button Break Layout that placed under menu bar.
Check this documentation. This should be helpful to utilize Qt Designer components. It is quite possible that you don't have to do lot of work. I never used this so my help ends here.
Related
This problem is driving me insane and I can't seem to find a logical answer. I'm pretty new to this so please bear with.
I've been creating an application where I create a vertical 'navigation bar' and need to add QPushButtons dynamically. I've noticed that the
horizontal position of a label in a QVBox changes when a QPushButton is added to it.
I've created a minimal version:
Before Adding QPushButton:
Label reaches the edge of the application
After adding QPushButton:
Label width is reduced slightly
Here is the code I'm using to dynamically add the QPushButton:
void MainWindow::on_pushButton_clicked()
{
QPushButton *newButton = new QPushButton("Test");
newButton->setContentsMargins(0,0,0,0);
newButton->setStyleSheet("margin: 0; padding: 0;");
ui->verticalLayout->setMargin(0);
ui->verticalLayout->setContentsMargins(0,0,0,0);
// add new push button inside VBox
ui->verticalLayout->addWidget(newButton);
}
.ui file:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>203</width>
<height>224</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralWidget">
<widget class="QWidget" name="verticalLayoutWidget">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>201</width>
<height>151</height>
</rect>
</property>
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QLabel" name="label">
<property name="styleSheet">
<string notr="true">border: 1px solid white;</string>
</property>
<property name="text">
<string>TextLabel</string>
</property>
</widget>
</item>
</layout>
</widget>
<widget class="QPushButton" name="pushButton">
<property name="geometry">
<rect>
<x>10</x>
<y>180</y>
<width>181</width>
<height>32</height>
</rect>
</property>
<property name="text">
<string>Add Push Button To VBox</string>
</property>
</widget>
</widget>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources/>
<connections/>
</ui>
As you can see setting the margins on both the QPushButton and the layout don't seem to have any effect. Is there anyone who could shed some light on this issue?
Let's analyze your .ui with the help of Qt Designer, if we stretch the window you get the following:
As you can see the layout only affects the QLabel, so the initial button will not be handled by the layout, but the added button will be. Therefore, you do not observe a similar behavior.
The solution is to restructure the design using the following structure:
QMainWindow
└── QVBoxLayout
├── QLabel
└── QWidget
└── QVBoxLayout
└── QPushButton
You must change the size policy of the QWidget to take the minimum height by setting Maximum in Vertical Policy:
And in that second layout add the button. The .ui is the following:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>335</width>
<height>303</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralWidget">
<layout class="QVBoxLayout" name="verticalLayout_2">
<item>
<widget class="QLabel" name="label">
<property name="styleSheet">
<string notr="true">border: 1px solid white;</string>
</property>
<property name="text">
<string>TextLabel</string>
</property>
</widget>
</item>
<item>
<widget class="QWidget" name="widget" native="true">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Maximum">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QPushButton" name="pushButton">
<property name="text">
<string>Add Push Button To VBox</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources/>
<connections/>
</ui>
Then it is no longer necessary to modify the button:
void MainWindow::on_pushButton_clicked()
{
QPushButton *newButton = new QPushButton("Test");
ui->verticalLayout->addWidget(newButton);
}
Obtaining the following:
I am building a QWidget with QRadioButtons at different levels. In other words, my widget contains some radio buttons and a subwidget (labeled groupBox in the screenshot) that also contains radio buttons.
Here is my problem: the radio buttons inside groupBox seem to interfere with the top level radio buttons (radioButton_1 and radioButton_2). I would expect that exactly one of radioButton_1 and radioButton_2 is checked at any given time, but it is now possible to uncheck these by clicking on the currently checked radio button.
The fix I came up with is to add setChecked(true) to the signal handler for radioButton_1.clicked() and radioButton_2.clicked(), but this seems a bit hacky.
connect(ui->radioButton_1, &RadioButton::clicked, [this]() {
ui->radioButton_1.setChecked(true);
});
connect(ui->radioButton_2, &RadioButton::clicked, [this]() {
ui->radioButton_2.setChecked(true);
});
Is there a better way to get the functionality back? Perhaps a function like setRadioButtonGroup({ui->radioButton_1, ui->radioButton_2}).
EDIT:
Per request for a MCVE, below is the form mainwindow.ui. Other files (mainwindow.cpp, main.cpp, mainwindow.h) are just the boilerplate provided when a QWidget Application is created in Qt Creator.
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>400</width>
<height>300</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralWidget">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QRadioButton" name="radioButton_1">
<property name="text">
<string>radioButton_1</string>
</property>
</widget>
</item>
<item>
<widget class="QRadioButton" name="radioButton_2">
<property name="text">
<string>radioButton_2</string>
</property>
</widget>
</item>
<item>
<widget class="QGroupBox" name="groupBox">
<property name="title">
<string>groupBox</string>
</property>
<layout class="QVBoxLayout" name="verticalLayout_2">
<item>
<widget class="QRadioButton" name="radioButton_3">
<property name="text">
<string>radioButton_3</string>
</property>
</widget>
</item>
<item>
<widget class="QRadioButton" name="radioButton_4">
<property name="text">
<string>radioButton_4</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
<widget class="QStatusBar" name="statusBar"/>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources/>
<connections/>
</ui>
To address this, I suggest you create a QButtonGroup and add all four radio button to it.
See https://doc.qt.io/qt-5/qbuttongroup.html
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>
In Qt I have removed the central widget in an xml editor and replaced it with a QScrollArea, this works when I preview it in QtDesigner:
but when I run the program it looks like this:
Are you not meant to remove the central widget or is there a sizePolicy I have to change?
Here is the ui file:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>179</width>
<height>191</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QScrollArea" name="scrollArea">
<property name="widgetResizable">
<bool>true</bool>
</property>
<widget class="QWidget" name="scrollAreaWidgetContents">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>224</width>
<height>628</height>
</rect>
</property>
<layout class="QHBoxLayout" name="horizontalLayout_2">
<item>
<widget class="QLabel" name="label">
<property name="sizePolicy">
<sizepolicy hsizetype="Expanding" vsizetype="Expanding">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="font">
<font>
<pointsize>75</pointsize>
</font>
</property>
<property name="midLineWidth">
<number>2</number>
</property>
<property name="text">
<string>label
</string>
</property>
<property name="alignment">
<set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignTop</set>
</property>
</widget>
</item>
</layout>
</widget>
</widget>
<widget class="QMenuBar" name="menuBar">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>179</width>
<height>19</height>
</rect>
</property>
</widget>
<widget class="QToolBar" name="mainToolBar">
<attribute name="toolBarArea">
<enum>TopToolBarArea</enum>
</attribute>
<attribute name="toolBarBreak">
<bool>false</bool>
</attribute>
</widget>
<widget class="QStatusBar" name="statusBar"/>
</widget>
<layoutdefault spacing="6" margin="11"/>
<resources>
<include location="1.qrc"/>
</resources>
<connections/>
</ui>
Check your ui_mainwindow.h. See if there is a line like:
MainWindow->setCentralWidget(scrollArea);
You can use QMainWindow::setCentralWidget function in your mainwindow.cpp to set a central widget to your main window:
setCentralWidget(myScrollArea);
I don't think there is any way of changing the central widget from the designer.
I am getting proper window when I ran the program with your ui file content. I don't know why it is not creating problem like you have.
I would recommend you to use Qt designer inbuilt in Qt Creator which I felt easier to use.
Also, I think the problem can be one of these:
Generally central widget is good as it provides a base on which you can place all your layouts. So, it is good to have it in your UI.
Here, take care that after inserting widgets into layouts you don't simply break those layouts. The designer will reset the widget width and height. So you have to set them again.
Next, this may have occured if the ui file loaded in designer is not up-to-date while it is changed on disk.
Keep track of all the layouts, the geometry and sizePolicy of widgets.
I won't be able to answer in code since when I used the ui file content which you have given, it doesn't cause problem here.
Create a layout on your mainwindow in which you would put your QScrollArea. This would expand it according to the layout.
P.S. : I open it in Qt Creator.
So please give some more info whether it is fixed when you set the geometry of scrollarea manually.
I'm using what I believe is a pretty standard example of a WYSIWYG editor from graphics-dojo built using a QWebView. The source can be found here
I'm trying to disable the word wrapping in the QWebView so if an element extends beyond the width of the window, a horizontal scrollbar will appear and no wrapping will occur. By default it appears that the text in the QWebView wraps at all window widths except when the width is resized to under about 100 pixels which is when the horizontal scrollbar appears. Given this behavior I know the horizontal scrollbar is enabled. I've looked at QWebView, QWebFrame, and QWebPage and can't seem to find any references to word wrapping. I wonder if it is a property of the underlying WebKit.
In summary: How can I disable word wrapping on a QWebView so that a horizontal scrollbar appearing is the default behavior?
The QWebView is contained in the htmleditor.ui file like this.
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>659</width>
<height>398</height>
</rect>
</property>
<property name="windowTitle">
<string>HTML Editor</string>
</property>
<widget class="QWidget" name="centralwidget">
<layout class="QVBoxLayout" name="verticalLayout">
<property name="margin">
<number>0</number>
</property>
<item>
<widget class="QTabWidget" name="tabWidget">
<property name="tabPosition">
<enum>QTabWidget::South</enum>
</property>
<property name="tabShape">
<enum>QTabWidget::Rounded</enum>
</property>
<property name="currentIndex">
<number>0</number>
</property>
<property name="documentMode">
<bool>true</bool>
</property>
<widget class="QWidget" name="tab">
<attribute name="title">
<string>Tab 1</string>
</attribute>
<layout class="QVBoxLayout" name="verticalLayout_2">
<property name="margin">
<number>0</number>
</property>
<item>
<widget class="QWebView" name="webView">
<property name="url">
<url>
<string>about:blank</string>
</url>
</property>
</widget>
</item>
</layout>
</widget>
<widget class="QWidget" name="tab_2">
<attribute name="title">
<string>Tab 2</string>
</attribute>
<layout class="QVBoxLayout" name="verticalLayout_3">
<property name="margin">
<number>0</number>
</property>
<item>
<widget class="QPlainTextEdit" name="plainTextEdit">
<property name="frameShape">
<enum>QFrame::NoFrame</enum>
</property>
<property name="readOnly">
<bool>true</bool>
</property>
</widget>
</item>
</layout>
</widget>
</widget>
</item>
</layout>
</widget>
...