Reputation: 103
I want to have a table with 2 or 3 columns with rows that shows image and text alongside each other in PyQt (I am using python3.5 and PyQt 5). First I chose QListWidget but it was limited to only one column. I figured out that QTableWidget is the best way for doing this. But when I put an image for a cell in the table the text of that cell is not being shown at bottom of it. How can I make the cell show text and image in proper place? This my code:
self.main_table = QTableWidget(self)
self.main_table.setGeometry(QRect(20, 140, 600, 330))
sizePolicy = QSizePolicy(QSizePolicy.Fixed, QSizePolicy.Fixed)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(0)
sizePolicy.setHeightForWidth(self.main_table.sizePolicy().hasHeightForWidth())
self.main_table.setSizePolicy(sizePolicy)
self.main_table.setLayoutDirection(Qt.LeftToRight)
self.main_table.setLocale(QLocale(QLocale.Persian, QLocale.Iran))
self.main_table.setInputMethodHints(Qt.ImhNone)
self.main_table.setFrameShape(QFrame.NoFrame)
self.main_table.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.main_table.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.main_table.setEditTriggers(QAbstractItemView.NoEditTriggers)
self.main_table.setTabKeyNavigation(False)
self.main_table.setShowGrid(False)
self.main_table.setCornerButtonEnabled(False)
self.main_table.setIconSize(QSize(210,150))
self.main_table.setRowCount(2)
self.main_table.setColumnCount(2)
self.main_table.setObjectName("main_table")
self.main_table.horizontalHeader().setVisible(False)
self.main_table.horizontalHeader().setHighlightSections(False)
self.main_table.verticalHeader().setVisible(False)
self.main_table.verticalHeader().setHighlightSections(False)
self.main_table.horizontalHeader().setDefaultSectionSize(250)
self.main_table.verticalHeader().setDefaultSectionSize(250)
self.item = QTableWidgetItem(QIcon('content/img/food.png'),'Food')
self.main_table.setItem(0 , 0, self.item)
Upvotes: 2
Views: 5673
Reputation: 244359
The simplest is to use a create a custom widget where we locate the elements as we want, the following code implements the icon appears at the top and the text below it.
class CustomWidget(QWidget):
def __init__(self, text, img, parent=None):
QWidget.__init__(self, parent)
self._text = text
self._img = img
self.setLayout(QVBoxLayout())
self.lbPixmap = QLabel(self)
self.lbText = QLabel(self)
self.lbText.setAlignment(Qt.AlignCenter)
self.layout().addWidget(self.lbPixmap)
self.layout().addWidget(self.lbText)
self.initUi()
def initUi(self):
self.lbPixmap.setPixmap(QPixmap(self._img).scaled(self.lbPixmap.size(),Qt.KeepAspectRatio))
self.lbText.setText(self._text)
@pyqtProperty(str)
def img(self):
return self._img
@img.setter
def total(self, value):
if self._img == value:
return
self._img = value
self.initUi()
@pyqtProperty(str)
def text(self):
return self._text
@text.setter
def text(self, value):
if self._text == value:
return
self._text = value
self.initUi()
Then add the widget through the setCellWidget()
function to add them and scale the space of each cell with resizeColumnsToContents()
and resizeRowsToContents()
as I show below:
class TableWidget(QTableWidget):
def __init__(self, parent=None):
QTableWidget.__init__(self, parent)
self.setColumnCount(5)
self.setRowCount(5)
for i in range(self.columnCount()):
for j in range(self.rowCount()):
lb = CustomWidget(str(i)+str(j), "/path/of/image")
self.setCellWidget(i, j, lb)
self.resizeColumnsToContents()
self.resizeRowsToContents()
self.cellClicked.connect(self.onCellClicked)
@pyqtSlot(int, int)
def onCellClicked(self, row, column):
w = self.cellWidget(row, column)
print(w.text, w.img)
if __name__ == '__main__':
import sys
app = QApplication(sys.argv)
tw = TableWidget()
tw.show()
sys.exit(app.exec_())
Upvotes: 2