Как сделать такой GUI интерфейс на PySide2 или PySide6?

Question

Я хочу создать что-то наподобие такого (визуально) используя Python и библиотеку PySide2 или PySide6. Это должен быть список с картинкой, названием и описанием (у меня есть все эти данные).

К сожалению я не нашел как это можно примерно реализовать.
Можете подсказать какой элемент тут лучше использовать и с чего начать.
Прошу прощения за картинку это макет был сделан на коленке, элементы должны быть одинаковы что очевидно.

Answer 1

На данном ресурсе есть практический все. Вы всегда начинайте искать здесь.

На коленках ничего делать не надо. Вы всегда должны показывать что вы уже сделали и хорошо рассказывать что вы хотите сделать и что у вас не получается.

Учитывая что это ваш первый вопрос, я покажу вам одно из возможных решения вашей задумки.

Установите импорты для PySide2 и попробуйте.

import sys
from PyQt5 import QtGui, QtWidgets, QtCore

class CustomQWidget (QtWidgets.QWidget):
    def __init__ (self, parent = None):
        super(CustomQWidget, self).__init__(parent)
        
        self.titleLabel = QtWidgets.QLabel()                      
        self.titleLabel.setStyleSheet('background-color: #839B97; font-size:24px;')
        
        self.descriptionLabel  = QtWidgets.QLabel()             
        self.descriptionLabel.setWordWrap(True)
        self.descriptionLabel.setStyleSheet('background-color: #CFD3CE;')
        
        self.vBoxLayout = QtWidgets.QVBoxLayout()
        self.vBoxLayout.addWidget(self.titleLabel, 0)
        self.vBoxLayout.addWidget(self.descriptionLabel, 1)
        self.vBoxLayout.setSpacing(0)
        
        self.iconQLabel = QtWidgets.QLabel()
        self.iconQLabel.setMinimumSize(200, 200) 
        self.iconQLabel.setMaximumSize(200, 200) 

        self.hBoxLayout = QtWidgets.QHBoxLayout(self)        
        self.hBoxLayout.addWidget(self.iconQLabel, 0)
        self.hBoxLayout.addLayout(self.vBoxLayout, 1)

    def setTitle(self, text):
        self.titleLabel.setText(text)

    def setDescription(self, text):
        self.descriptionLabel.setText(text)

    def setIcon(self, imagePath):
        self.iconQLabel.setPixmap(QtGui.QPixmap(imagePath).scaled(
            200, 200, QtCore.Qt.KeepAspectRatio))


class MainWindow (QtWidgets.QMainWindow):
    def __init__ (self):
        super().__init__()
        
        self.listWidget = QtWidgets.QListWidget(self)
        self.setCentralWidget(self.listWidget)
        
        myList = [
            ('Название 1', 
             '''Какое-то описание 1.
Я хочу создать что-то наподобие такого (визуально) используя python \
и библиотеку pyside2 или pyside6, это должен быть список с картинкой, \
названием и описанием (у меня есть все эти данные). К сожалению я не нашел \
как это можно примерно реализовать, можете подсказать какой элемент тут \
лучше использовать и с чего начать. (Прошу прощения за картинку это макет \
был сделан на коленке, элементы должны быть одинаковы что очевидно)''',  
             'lena.jpg'),
            ('Название 2', 
             'Какое-то описание 2', 
             'boy.jpg'),
            ('Название 3', 
             'Какое-то описание 2',  
             'im.png')
        ]
        
        for title, description, icon in myList:
            customQWidget = CustomQWidget()
            customQWidget.setTitle(title)
            customQWidget.setDescription(description)
            customQWidget.setIcon(icon)
            
            item = QtWidgets.QListWidgetItem(self.listWidget)
            item.setSizeHint(customQWidget.sizeHint())
            self.listWidget.addItem(item)
            self.listWidget.setItemWidget(item, customQWidget)
            

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    w = MainWindow()
    w.resize(700, 500)
    w.show()
    sys.exit(app.exec_())

БЛОГ НА HUSL

Как сделать такой GUI интерфейс на PySide2 или PySide6?

Ответы (1 шт):