I have a table view that display some SQLite data with a search filter associated to each query. The table view shows a query of the combination of the different filters. The filters are some QLineEdit located on top of the table in a QHBoxLayout. The QLineEdits are automatically resized with the size of the columns.
The problem here comes because the tableview is too big for being showed at once (it has 28 columns), so it has a scrollbar, and then I cannot resize automatically the QLineEdits to the size of the columns, as they are restricted to the size of the window. What I want to do is to create a QScrollArea that involves both the filters and the table, in a way the same scroll bar that moves the QTableView moves also the filter layout with it, which size is not restricted to the size of the window anymore.
I hope I explained myself clearly. Thanks a lot in advance!
Here it is my code at the moment, I've been trying for a while but I didn't find a satisfyings solution, either the size of the filters does not expand or the scroll bar only works for the table but not for the filters:
class ManualSearch(QtWidgets.QWidget):
"""Table in which the user can search filtering by any of its columns.
It also allows to open the source document directly."""
def __init__(self, query, header_names):
super(ManualSearch, self).__init__()
# Set up the model view architecture
self.model = QtSql.QSqlTableModel()
self.model.setEditStrategy(QtSql.QSqlTableModel.OnFieldChange)
self.view = QtWidgets.QTableView()
self.view.setEditTriggers(QtWidgets.QAbstractItemView.NoEditTriggers)
self.view.setModel(self.model)
self.view.setAlternatingRowColors(True)
self.view.setSelectionBehavior(QtWidgets.QTableView.SelectRows)
self.view.resizeColumnsToContents()
self.view.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
header = self.view.horizontalHeader()
header.setStretchLastSection(True)
header.setCascadingSectionResizes(True)
main_layout = QtWidgets.QVBoxLayout(self)
main_layout.sizeConstraint()
# Create a combined layout with the filters and the table
table_layout = QtWidgets.QVBoxLayout()
filter_layout = QtWidgets.QHBoxLayout()
self.filter_list = []
# We use a for loop to create the filters and link them
# to their correspondent columns
for i in range(len(header_names)):
filter_i = QtWidgets.QLineEdit()
filter_i.textChanged.connect(
lambda: self.update_query_filter(query)
)
header.sectionResized.connect(
lambda: self.resize(i, filter_i)
)
header.geometriesChanged.connect(
lambda: self.resize(i, filter_i)
)
filter_layout.addWidget(filter_i)
self.filter_list.append(filter_i)
filter_layout.setContentsMargins(25, 0, 10, 0)
table_layout.addLayout(filter_layout)
table_layout.addWidget(self.view)
self.source_button = QtWidgets.QPushButton('Open source document')
self.source_button.clicked.connect(self.open_source)
self.scroll = QtWidgets.QScrollArea()
self.scroll.setBackgroundRole(QtGui.QPalette.Light)
self.scroll.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOn)
self.scroll.setWidgetResizable(False)
self.scroll.setLayout(table_layout)
main_layout.addLayout(table_layout)
main_layout.addWidget(self.scroll)
main_layout.addWidget(self.source_button)
self.update_query_filter(query)
set_table_headers(self.model, header_names)
def resize(self, order, line):
"""Resize the width of the filter line edit to match the width of its
corresponding column"""
line.setFixedWidth(self.view.columnWidth(order))
Related
I have a situation where i want to add 3 buttons in a QTableWidget.
I could able to add a single button using below code.
self.tableWidget = QtGui.QTableWidget()
saveButtonItem = QtGui.QPushButton('Save')
self.tableWidget.setCellWidget(0,4,saveButtonItem)
But i want to know how to add multiple (lets say 3) buttons. I Mean Along with Save Button i want to add other 2 buttons like Edit, Delete in the same column (Actions)
You can simply create your own widget, containing the three buttons, e.g. via subclassing QWidget:
class EditButtonsWidget(QtGui.QWidget):
def __init__(self, parent=None):
super(EditButtonsWidget,self).__init__(parent)
# add your buttons
layout = QtGui.QHBoxLayout()
# adjust spacings to your needs
layout.setContentsMargins(0,0,0,0)
layout.setSpacing(0)
# add your buttons
layout.addWidget(QtGui.QPushButton('Save'))
layout.addWidget(QtGui.QPushButton('Edit'))
layout.addWidget(QtGui.QPushButton('Delete'))
self.setLayout(layout)
And then, set this widget as the cellwidget:
self.tableWidget.setCellWidget(0,4, EditButtonsWidget())
You use a layout widget to add your widgets to, then add the layout widget to the cell.
There are a couple of different ones you can use.
http://doc.qt.io/qt-4.8/layout.html
self.tableWidget = QtGui.QTableWidget()
layout = QtGui.QHBoxLayout()
saveButtonItem = QtGui.QPushButton('Save')
editButtonItem = QtGui.QPushButton('Edit')
layout.addWidget(saveButtonItem)
layout.addWidget(editButtonItem)
cellWidget = QtGui.QWidget()
cellWidget.setLayout(layout)
self.tableWidget.setCellWidget(0, 4, cellWidget)
I am working on PyQt5 where I have a QTableWidget. It has a header column which I want to word wrap. Below is how the table looks like:
As we can see that the header label like Maximum Variation Coefficient has 3 words, thus its taking too much column width. How can wrap the words in the header.
Below is the code:
import sys
from PyQt5 import QtWidgets
from PyQt5.QtWidgets import *
# Main Window
class App(QWidget):
def __init__(self):
super().__init__()
self.title = 'PyQt5 - QTableWidget'
self.left = 0
self.top = 0
self.width = 300
self.height = 200
self.setWindowTitle(self.title)
self.setGeometry(self.left, self.top, self.width, self.height)
self.createTable()
self.layout = QVBoxLayout()
self.layout.addWidget(self.tableWidget)
self.setLayout(self.layout)
# Show window
self.show()
# Create table
def createTable(self):
self.tableWidget = QTableWidget()
# Row count
self.tableWidget.setRowCount(3)
# Column count
self.tableWidget.setColumnCount(2)
self.tableWidget.setHorizontalHeaderLabels(["Maximum Variation Coefficient", "Maximum Variation Coefficient"])
self.tableWidget.setSizeAdjustPolicy(QtWidgets.QAbstractScrollArea.AdjustToContents)
self.tableWidget.horizontalHeader().setSectionResizeMode(QHeaderView.ResizeToContents)
self.tableWidget.setItem(0, 0, QTableWidgetItem("3.44"))
self.tableWidget.setItem(0, 1, QTableWidgetItem("5.3"))
self.tableWidget.setItem(1, 0, QTableWidgetItem("4.6"))
self.tableWidget.setItem(1, 1, QTableWidgetItem("1.2"))
self.tableWidget.setItem(2, 0, QTableWidgetItem("2.2"))
self.tableWidget.setItem(2, 1, QTableWidgetItem("4.4"))
# Table will fit the screen horizontally
self.tableWidget.horizontalHeader().setStretchLastSection(True)
self.tableWidget.horizontalHeader().setSectionResizeMode(
QHeaderView.Stretch)
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = App()
sys.exit(app.exec_())
I tried adding this self.tableWidget.setWordWrap(True) but this doesnt make any change. Can anyone give some good solution. Please help. Thanks
EDIT:
Also tried this :
self.tableWidget.horizontalHeader().setDefaultAlignment(QtCore.Qt.AlignHCenter | Qt.Alignment(QtCore.Qt.TextWordWrap))
But it didnt worked
In order to achieve what you need, you must set your own header and proceed with the following two assumptions:
the header must provide the correct size hint height according to the section contents in case the width of the column is not sufficient;
the text alignment must include the QtCore.Qt.TextWordWrap flag, so that the painter knows that it can wrap text;
Do note that, while the second aspect might be enough in some situations (as headers are normally tall enough to fit at least two lines), the first point is mandatory as the text might require more vertical space, otherwise some text would be cut out.
The first point requires to subclass QHeaderView and reimplement sectionSizeFromContents():
class WrapHeader(QtWidgets.QHeaderView):
def sectionSizeFromContents(self, logicalIndex):
# get the size returned by the default implementation
size = super().sectionSizeFromContents(logicalIndex)
if self.model():
if size.width() > self.sectionSize(logicalIndex):
text = self.model().headerData(logicalIndex,
self.orientation(), QtCore.Qt.DisplayRole)
if not text:
return size
# in case the display role is numeric (for example, when header
# labels are not defined yet), convert it to a string;
text = str(text)
option = QtWidgets.QStyleOptionHeader()
self.initStyleOption(option)
alignment = self.model().headerData(logicalIndex,
self.orientation(), QtCore.Qt.TextAlignmentRole)
if alignment is None:
alignment = option.textAlignment
# get the default style margin for header text and create a
# possible rectangle using the current section size, then use
# QFontMetrics to get the required rectangle for the wrapped text
margin = self.style().pixelMetric(
QtWidgets.QStyle.PM_HeaderMargin, option, self)
maxWidth = self.sectionSize(logicalIndex) - margin * 2
rect = option.fontMetrics.boundingRect(
QtCore.QRect(0, 0, maxWidth, 10000),
alignment | QtCore.Qt.TextWordWrap,
text)
# add vertical margins to the resulting height
height = rect.height() + margin * 2
if height >= size.height():
# if the height is bigger than the one provided by the base
# implementation, return a new size based on the text rect
return QtCore.QSize(rect.width(), height)
return size
class App(QWidget):
# ...
def createTable(self):
self.tableWidget = QTableWidget()
self.tableWidget.setHorizontalHeader(
WrapHeader(QtCore.Qt.Horizontal, self.tableWidget))
# ...
Then, to set the word wrap flag, there are two options:
set the alignment flag on the underlying model with setHeaderData() for each existing column:
# ...
model = self.tableWidget.model()
default = self.tableWidget.horizontalHeader().defaultAlignment()
default |= QtCore.Qt.TextWordWrap
for col in range(self.tableWidget.columnCount()):
alignment = model.headerData(
col, QtCore.Qt.Horizontal, QtCore.Qt.TextAlignmentRole)
if alignment:
alignment |= QtCore.Qt.TextWordWrap
else:
alignment = default
model.setHeaderData(
col, QtCore.Qt.Horizontal, alignment, QtCore.Qt.TextAlignmentRole)
Use a QProxyStyle to override the painting of the header, by applying the flag on the option:
# ...
class ProxyStyle(QtWidgets.QProxyStyle):
def drawControl(self, control, option, painter, widget=None):
if control in (self.CE_Header, self.CE_HeaderLabel):
option.textAlignment |= QtCore.Qt.TextWordWrap
super().drawControl(control, option, painter, widget)
if __name__ == '__main__':
app = QApplication(sys.argv)
app.setStyle(ProxyStyle())
ex = App()
sys.exit(app.exec_())
Finally, consider that:
using setSectionResizeMode with ResizeToContents or Stretch, along with setStretchLastSection, will always cause the table trying to use as much space as required by the headers upon showing the first time;
by default, QHeaderView sections are not clickable (which is a mandatory requirement for sorting) and the highlightSections property is also False; both QTableView and QTableWidget create their headers with those values as True, so when a new header is set you must explicitly change those aspects if sorting and highlighting are required:
self.tableWidget.setHorizontalHeader(
WrapHeader(QtCore.Qt.Horizontal, self.tableWidget))
self.tableWidget.horizontalHeader().setSectionsClickable(True)
self.tableWidget.horizontalHeader().setHighlightSections(True)
both sorting and section highlighting can create some issues, as the sort indicator requires further horizontal space and highlighted sections are normally shown with a bold font (but are shown normally while the mouse is pressed); all this might create some flickering and odd behavior; unfortunately, there's no obvious solution for these problems, but when using the QProxyStyle it's possible to avoid some flickering by overriding the font style:
def drawControl(self, control, option, painter, widget=None):
if control in (self.CE_Header, self.CE_HeaderLabel):
option.textAlignment |= QtCore.Qt.TextWordWrap
if option.state & self.State_Sunken:
option.state |= self.State_On
super().drawControl(control, option, painter, widget)
I'd like to make part of the text of a label clickable, like an inline hyperlink on a website. I know how to make an individual label clickable, but I'm not sure how to only make part of the label clickable and still maintain a consistent format.
I've placed the code for my first attempt below and included an image of the output.
The two issues I see are the noticeable space between the labels (which even a QStretchItem at the end doesn't fix) and the issues with word wrapping.
Any help would be greatly appreciated. Thank you!
from PyQt5.QtWidgets import *
app = QApplication([])
class MainWindow(QWidget):
def __init__(self, *args, **kwargs):
super(MainWindow, self).__init__(*args, **kwargs)
self.setWindowTitle('Title')
self.setGeometry(1200, 200, 350, 500)
self.layout = QVBoxLayout()
self.setLayout(self.layout)
# Dummy list to print
place_list = { '2000': 'An event happened.',
'2005': 'An event at {this place} happened long ago.',
'2010': 'Another event happened at {a different place}, but it was not fun.' }
# Initialize Grid of Notes
grid = QGridLayout()
# Create Headers for each column
grid.addWidget(QLabel('Date'), 0, 0)
grid.addWidget(QLabel('Note'), 0, 1)
index = 1
# Iterate through each entry in place_list
for year in place_list:
# Add index of entry (by year)
grid.addWidget(QLabel(year), index, 0)
# Get text of entry
note = place_list[year]
# Look for "{}" to indicate link
if '{' in note:
# Get location of link within the entry
start = note.find('{')
end = note.find('}')
# Create a label for the text before the link
lab_1 = QLabel(note[:start])
lab_1.setWordWrap(True)
# Create a label for the link
# NOTE: It's a QLabel for formatting purposes only
lab_2 = QLabel(note[start+1:end])
lab_2.setWordWrap(True)
# Create a label for the text after the link
lab_3 = QLabel(note[end+1:])
lab_3.setWordWrap(True)
# Combine the labels in one layout
note_lab = QHBoxLayout()
note_lab.addWidget(lab_1)
note_lab.addWidget(lab_2)
note_lab.addWidget(lab_3)
# Add the layout as the entry
grid.addLayout(note_lab, index, 1)
else:
# Create the label for the whole entry if no link indicator is found
note_lab = QLabel(note)
note_lab.setWordWrap(True)
grid.addWidget(note_lab, index, 1)
# Go to next row in grid
index += 1
self.layout.addLayout(grid)
window = MainWindow()
window.show()
app.exec_()
The best solution I believe is to subclass QLabel and override the mousePressEvent method.
def mousePressEvent(event):
# event.pos() or .x() and .y() to find the position of the click.
If you create a QRect in the area that you want in the initialization of your custom QLabel, you can easily check if the click is inside the rectangle by using the QRect.contains() method as well.
Other useful methods for this would be mouseReleaseEvent and mouseDoubleClickEvent.
And in general, when you are adding/changing functionality to widgets, look to subclass first.
I'm making a table-like widget that displays an image, the file name, and two box-selection areas. I have two objects 'grid_row' & 'grid_table' (both using QGridLayout), grid_row being a single row and grid_table containing x number of grid_rows (I'm designing it like this because it's simply easier to keep track of my custom properties).
The tool looks like this
The final layout is a QVBoxLayout, then from top to bottom, I have QHBoxLayout(the one with a label and combobox), grid_row(for the headers 1,2,3), a scroll_area that contains the grid_table with each one being grid_rows. Lastly another QHBoxLayout for the buttons.
Each grid_row contains a 'image-widget', and two region labels(QLabel). The image widget contains a label(I used setPixmap for display) and a pushbutton. Here are my grid_row and image_widget classes:
class grid_row(QWidget):
def __init__(self, parent=None):
super().__init__()
#self.frame = frame_main()
self.grid_layout = QGridLayout()
self.grid_layout.setSpacing(50)
self.image_widget = image_widget()
self.grid_layout.addWidget(self.image_widget, 0, 0, 1, 1, Qt.AlignHCenter)
self.region_2 = QLabel('null')
self.grid_layout.addWidget(self.region_2, 0, 2, 1, 1, Qt.AlignHCenter)
self.setLayout(self.grid_layout)
self.region_1 = QLabel('null')
self.grid_layout.addWidget(self.region_1, 0, 1, 1, 1, Qt.AlignHCenter)
class image_widget(QWidget):
def __init__(self, parent=None):
super().__init__()
self.initUI()
def initUI(self):
self.setAcceptDrops(True)
self.image_widget_layout = QHBoxLayout()
self.image_widget_label = QLabel()
self.image_widget_label.setPixmap(QPixmap('default.png').scaled(96, 54))
self.image_widget_layout.addWidget(self.image_widget_label)
self.img_btn = QPushButton()
self.img_btn.setEnabled(False)
self.img_btn.setText('Drag Here!')
self.image_widget_layout.addWidget(self.img_btn)
self.setLayout(self.image_widget_layout)
if __name__ == '__main__':
app = QApplication(sys.argv)
widget = QWidget()
layout = QVBoxLayout()
grid_row = grid_row()
layout.addWidget(grid_row)
btn = QPushButton('press')
btn.clicked.connect(lambda: grid_row.region_1.setText('[0,0,1920,1080]'))
layout.addWidget(btn)
widget.setLayout(layout)
scroll_area = QScrollArea()
scroll_area.setWidget(widget)
scroll_area.show()
sys.exit(app.exec_())
So currently, I've implemented events that allow me to drag images into the image_widget and click the push button to modify the two regions that are framed (format: [x1, y1, x2, y2]). The problem is that when I do that(e.g. region values go from 'null' to say '[20,20, 500, 500]', the image gets squished because now the labels are taking up more width.
I realize that some size policy needs to be set (and maybe other properties) but I don't know which property to use and on which widget. I want the image to remain the same. Maybe stretch out the width of each column for the grid_row?
To clarify, I want the label containing the pixmap to remain the same size (always 96*54) and fully displayed(not cropped or stretched) at all times.
I've provided the a simplified executable code to display my problem, the classes are the same as my code, I just only put grid_row inside the scroll_area and added a button to change one of the values of the region to simulate the situation. Can provide additional code if needed. Thanks in advance!
Wow sometimes the answer is really one extra line of code...
So the documentation mentions that QScrollArea by default honors the size of its widget. Which is why when I changed the region (to a value that's wider/ more text) the widget does not auto adjust.
I needed to add
scroll_area.setWidgetResizable(True)
to allow the widget to resize wider thus prompting the scroll bars to appear. This way my pixmap image doesn't get cropped from not having enough space.
The easiest way would be to add size constraints to the label before adding to the layout
self.image_widget_label.adjustSize()
self.image_widget_label.setFixedSize(self.image_widget_label.size())
self.image_widget_layout.addWidget(self.image_widget_label)
adjustSize would resize the label depending on the contents.
The more difficult way is to answer the questions :
"when I change the size of the overall window, how do I want this
particular item to behave? When the window is at its minimal size,
which items do I want hidden or out of view? When the window is full
size, where do I want empty spots?"
To answer these better read a bit on Qt Layout management
I am trying to create this kind of list-like user interface gui (without Glade) within my InputPage object, that can be seen throughout gnome3 user interface:
and all I have is this (note that I would only like to add the buttons + and - with the same style they appear in the first image, I would like to keep columns of my list just as it is):
for some reason buttons are wider than expected and the toolbar doesnt fill the horizontal space.
here is my code:
class InputPage(Gtk.Box):
def __init__(self):
Gtk.Box.__init__(self)
self.grid = Gtk.Grid()
self.grid.set_column_homogeneous(True)
self.grid.set_row_homogeneous(True)
self.add(self.grid)
#Creating the ListStore model
self.software_liststore = Gtk.ListStore(str, str, int)
for software_ref in software_list:
self.software_liststore.append(list(software_ref))
#creating the treeview, making it use the filter as a model, and adding the columns
self.treeview = Gtk.TreeView()
for i, column_title in enumerate(["Name", "Frequency", "Amplitude"]):
renderer = Gtk.CellRendererText()
column = Gtk.TreeViewColumn(column_title, renderer, text=i)
self.treeview.append_column(column)
#button.connect("clicked", self.on_selection_button_clicked)
#setting up the layout, putting the treeview in a scrollwindow, and the buttons in a row
self.scrollable_treelist = Gtk.ScrolledWindow()
self.scrollable_treelist.set_vexpand(True)
self.grid.attach(self.scrollable_treelist, 0, 0, 10, 7)
#Toolbar
list_add = Gtk.Button()
list_add.add(Gtk.Image(icon_name='list-add-symbolic', visible=True))
list_insert_object = Gtk.Button()
list_insert_object.add(Gtk.Image(icon_name='insert-object-symbolic', visible=True))
list_remove = Gtk.Button()
list_remove.add(Gtk.Image(icon_name='list-remove-symbolic', visible=True))
self.toolbar = Gtk.ButtonBox(spacing=5)
self.toolbar.get_style_context().add_class('inline-toolbar')
self.toolbar.add(list_add)
self.toolbar.add(list_remove)
self.toolbar.add(list_insert_object)
self.toolbar.set_hexpand(True)
self.grid.attach(self.toolbar, 0,7,4,1)
#self.grid.attach_next_to(self.toolbar, self.scrollable_treelist, Gtk.PositionType.BOTTOM, 1, 1)
# for i, button in enumerate(self.buttons[1:]):
#self.grid.attach_next_to(button, self.buttons[i], Gtk.PositionType.RIGHT, 1, 1)
self.scrollable_treelist.add(self.treeview)
self.show_all()
What you see on the bottom of the first screenshot is a standard GtkToolbar with the inline-toolbar style class.
A GtkToolbar does not necessarily need to be on the top of a window. You can place them anywhere, just like regular widgets. All widgets have a style context that defines how the widget looks; each style context has one or more classes applied to it. These classes are CSS classes; styling a widget is just like saying class="classname" in HTML.
Here is one possible way to do this:
Create a vertical GtkBox with no spacing.
Place the GtkTreeView as the first child of the GtkBox.
Create a GtkToolbar and place it as the second child of the GtkBox.
Call the get_style_context() method on the GtkToolbar.
Call the add_class() method of the style context, passing the string "inline-toolbar". (I believe there is a symbolic constant for this; I do not know what this is in Python.)
Recreate your buttons as GtkToolButtons (NOT regular GtkButtons!) that are children of the GtkToolbar.
If that doesn't result in the buttons looking connected, you can add the "linked" class to the toolbar in the same way.
Good luck!