Возможное решение - создать QListView с делегатом, который реализует пользовательскую рисование, для фильтра вы можете использовать QSortFilterProxyModel, как показано ниже:
import os
import sys
from PySide2 import QtCore, QtGui, QtWidgets
TitleRole = QtCore.Qt.UserRole + 1000
DescriptionRole = QtCore.Qt.UserRole + 1001
IconRole = QtCore.Qt.UserRole + 1002
CURRENT_DIR = os.path.dirname(os.path.realpath(__file__))
def get_icon_path(name):
return os.path.join(CURRENT_DIR, "img", name)
class FilterProxyModel(QtCore.QSortFilterProxyModel):
def __init__(self, parent=None):
super(FilterProxyModel, self).__init__(parent)
self._filterText = ""
@property
def filterText(self):
return self._filterText
@filterText.setter
def filterText(self, text):
self._filterText = text
self.invalidateFilter()
def filterAcceptsRow(self, sourceRow, sourceParent):
if not self.filterText:
return True
index = self.sourceModel().index(
sourceRow, self.filterKeyColumn(), sourceParent
)
# Returns True if the row must be displayed, otherwise False must be returned.
title = index.data(TitleRole)
description = index.data(DescriptionRole)
return self.filterText.lower() in title.lower()
class StandardItem(QtGui.QStandardItem):
def __init__(self, title="", description="", icon=QtGui.QIcon()):
super(StandardItem, self).__init__()
self.title = title
self.description = description
self.icon = icon
@property
def title(self):
return self.data(TitleRole)
@title.setter
def title(self, title):
self.setData(title, TitleRole)
@property
def description(self):
return self.data(DescriptionRole)
@description.setter
def description(self, description):
self.setData(description, DescriptionRole)
@property
def icon(self):
return self.data(IconRole)
@icon.setter
def icon(self, icon):
self.setData(icon, IconRole)
class StyledItemDelegate(QtWidgets.QStyledItemDelegate):
def sizeHint(self, option, index):
return QtCore.QSize(50, 50)
def paint(self, painter, option, index):
super(StyledItemDelegate, self).paint(painter, option, index)
title = index.data(TitleRole)
description = index.data(DescriptionRole)
icon = index.data(IconRole)
mode = QtGui.QIcon.Normal
if not (option.state & QtWidgets.QStyle.State_Enabled):
mode = QtGui.QIcon.Disabled
elif option.state & QtWidgets.QStyle.State_Selected:
mode = QtGui.QIcon.Selected
state = (
QtGui.QIcon.On
if option.state & QtWidgets.QStyle.State_Open
else QtGui.QIcon.Off
)
iconRect = QtCore.QRect(option.rect)
iconRect.setSize(QtCore.QSize(40, 40))
icon.paint(
painter, iconRect, QtCore.Qt.AlignLeft | QtCore.Qt.AlignVCenter, mode, state
)
titleFont = QtGui.QFont(option.font)
titleFont.setPixelSize(20)
fm = QtGui.QFontMetrics(titleFont)
titleRect = QtCore.QRect(option.rect)
titleRect.setLeft(iconRect.right())
titleRect.setHeight(fm.height())
color = (
option.palette.color(QtGui.QPalette.BrightText)
if option.state & QtWidgets.QStyle.State_Selected
else option.palette.color(QtGui.QPalette.WindowText)
)
painter.save()
painter.setFont(titleFont)
pen = painter.pen()
pen.setColor(color)
painter.setPen(pen)
painter.drawText(titleRect, title)
painter.restore()
descriptionFont = QtGui.QFont(option.font)
descriptionFont.setPixelSize(15)
fm = QtGui.QFontMetrics(descriptionFont)
descriptionRect = QtCore.QRect(option.rect)
descriptionRect.setTopLeft(titleRect.bottomLeft())
descriptionRect.setHeight(fm.height())
painter.save()
painter.setFont(descriptionFont)
pen = painter.pen()
pen.setColor(color)
painter.setPen(pen)
painter.drawText(
descriptionRect,
fm.elidedText(description, QtCore.Qt.ElideRight, descriptionRect.width()),
)
painter.restore()
class LauncherWidget(QtWidgets.QWidget):
def __init__(self, parent=None):
super(LauncherWidget, self).__init__(parent)
self.setWindowTitle("Test Window")
self.setStyleSheet("background-color: rgb(65, 65, 65);")
self.releaseKeyboard()
self.textField = QtWidgets.QLineEdit()
self.textField.textChanged.connect(self.onTextChanged)
self.textField.setFont(QtGui.QFont("Helvetica", 16))
self.textField.setStyleSheet(
"margin: 10px; padding: 10px; \
background-color: \
rgb(40,40,40);\
color: rgb(245,245,245); \
border-style: solid; \
border-radius: 3px; \
border-width: 0.5px; \
border-color: \
rgb(35,35,35);"
)
self.model = QtGui.QStandardItemModel(self)
self.proxymodel = FilterProxyModel(self)
self.proxymodel.setSourceModel(self.model)
self.listview = QtWidgets.QListView(
editTriggers=QtWidgets.QAbstractItemView.NoEditTriggers
)
self.listview.setItemDelegate(StyledItemDelegate(self.listview))
self.listview.setModel(self.proxymodel)
self.listview.clicked.connect(self.onClicked)
self.listview.selectionModel().currentChanged.connect(self.resetCurrentIndex)
QtWidgets.QShortcut(
QtGui.QKeySequence(QtCore.Qt.Key_Up), self, activated=self.moveUp
)
QtWidgets.QShortcut(
QtGui.QKeySequence(QtCore.Qt.Key_Down), self, activated=self.moveDown
)
lay = QtWidgets.QVBoxLayout(self)
lay.setContentsMargins(0, 0, 0, 0)
lay.addWidget(self.textField, strecth=1)
lay.addWidget(self.listview, strecth=0)
self.centerWindow()
self.fill_model()
self.resetCurrentIndex()
def fill_model(self):
# https://raw.githubusercontent.com/Bowserinator/Periodic-Table-JSON/master/PeriodicTableJSON.json
for title, description, path_icon in (
(
"Hydrogen",
"Hydrogen is a chemical element with chemical symbol H and atomic number 1. With an atomic weight of 1.00794 u, hydrogen is the lightest element on the periodic table. Its monatomic form (H) is the most abundant chemical substance in the Universe, constituting roughly 75% of all baryonic mass.",
get_icon_path("so-icon.png"),
),
(
"Helium",
"Helium is a chemical element with symbol He and atomic number 2. It is a colorless, odorless, tasteless, non-toxic, inert, monatomic gas that heads the noble gas group in the periodic table. Its boiling and melting points are the lowest among all the elements.",
get_icon_path("so-icon.png"),
),
(
"Lithium",
'Lithium (from Greek:\u03bb\u03af\u03b8\u03bf\u03c2 lithos, "stone") is a chemical element with the symbol Li and atomic number 3. It is a soft, silver-white metal belonging to the alkali metal group of chemical elements. Under standard conditions it is the lightest metal and the least dense solid element.',
get_icon_path("so-icon.png"),
),
(
"Beryllium",
"Beryllium is a chemical element with symbol Be and atomic number 4. It is created through stellar nucleosynthesis and is a relatively rare element in the universe. It is a divalent element which occurs naturally only in combination with other elements in minerals.",
get_icon_path("so-icon.png"),
),
(
"Boron",
"Boron is a metalloid chemical element with symbol B and atomic number 5. Produced entirely by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a low-abundance element in both the Solar system and the Earth's crust. Boron is concentrated on Earth by the water-solubility of its more common naturally occurring compounds, the borate minerals.",
get_icon_path("so-icon.png"),
),
(
"Carbon",
'Carbon (from Latin:carbo "coal") is a chemical element with symbol C and atomic number 6. On the periodic table, it is the first (row 2) of six elements in column (group) 14, which have in common the composition of their outer electron shell. It is nonmetallic and tetravalent\u2014making four electrons available to form covalent chemical bonds.',
get_icon_path("so-icon.png"),
),
(
"Nitrogen",
"Nitrogen is a chemical element with symbol N and atomic number 7. It is the lightest pnictogen and at room temperature, it is a transparent, odorless diatomic gas. Nitrogen is a common element in the universe, estimated at about seventh in total abundance in the Milky Way and the Solar System.",
get_icon_path("so-icon.png"),
),
(
"Oxygen",
"Oxygen is a chemical element with symbol O and atomic number 8. It is a member of the chalcogen group on the periodic table and is a highly reactive nonmetal and oxidizing agent that readily forms compounds (notably oxides) with most elements. By mass, oxygen is the third-most abundant element in the universe, after hydrogen and helium.",
get_icon_path("so-icon.png"),
),
(
"Fluorine",
"Fluorine is a chemical element with symbol F and atomic number 9. It is the lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard conditions. As the most electronegative element, it is extremely reactive:almost all other elements, including some noble gases, form compounds with fluorine.",
get_icon_path("so-icon.png"),
),
(
"Neon",
"Neon is a chemical element with symbol Ne and atomic number 10. It is in group 18 (noble gases) of the periodic table. Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about two-thirds the density of air.",
get_icon_path("so-icon.png"),
),
):
it = StandardItem(
title=title, description=description, icon=QtGui.QIcon(path_icon),
)
self.model.appendRow(it)
@QtCore.Slot()
def resetCurrentIndex(self):
if not self.listview.currentIndex().isValid():
self.listview.setCurrentIndex(self.listview.model().index(0, 0))
@QtCore.Slot()
def moveUp(self):
ix = self.listview.currentIndex()
if ix.row() > 0:
self.listview.setCurrentIndex(ix.sibling(ix.row() - 1, ix.column()))
def moveDown(self):
ix = self.listview.currentIndex()
if ix.row() < (self.listview.model().rowCount() - 1):
self.listview.setCurrentIndex(ix.sibling(ix.row() + 1, ix.column()))
@QtCore.Slot(str)
def onTextChanged(self, text):
self.proxymodel.filterText = text
self.resetCurrentIndex()
@QtCore.Slot(QtCore.QModelIndex)
def onClicked(self, index):
ix = self.proxymodel.mapToSource(index)
it = self.model.itemFromIndex(ix)
if it is None:
return
print("clicked:", it.title, it.description)
def centerWindow(self):
self.setGeometry(
QtWidgets.QStyle.alignedRect(
QtCore.Qt.LeftToRight,
QtCore.Qt.AlignCenter,
self.size(),
QtWidgets.qApp.desktop().availableGeometry(),
)
)
if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
w = LauncherWidget()
w.show()
sys.exit(app.exec_())
