Как сделать таблицу в qt designer

Обновлено: 05.07.2024

Как добавить таблицу из базы данных, в Qt designer сгенерированный файл python

Я пытаюсь создать программу с графическим интерфейсом Python. GUI создается с использованием Qt designer. Эта предполагаемая программа будет искать в базе данных и отображать файл в табличном формате. Но из-за некоторых проблем программа не отображает таблицу.

полная программа приведена ниже

Я думаю, что проблема в том, когда я пытаюсь отобразить таблицу. Из-за какой-то ошибки в коде происходит сбой программы. Я новичок в PyQt5 и программировании. Пожалуйста, помогите.

How to use Tables in PyQt

Tables can be created with the QTableWidget. It is an item-based table view, similar to what you would see in Excel.

You can include the table widget as part of your gui, or popup a window with an excel like table.

In this example (PyQt5) it’ll show a window with the table, but you can make it part of your window gui with designer.

Tables

QTableWidget

The QTableWidget is a table widget with rows and columns.

The object has the methods .setRowCount(x) and .setColumnCount(y) , where x is number of rows and y number of columns. You could use this as self.setRowCount(5) .

pyqt table

The contents is set with self.setItem(m, n, newitem) , where m and n is the coordinate inside the table.

The variable newitem is of type QTableWidgetItem , which can take a text value as string. For instance: .setItem(1,2, QTableWidgetItem("Table Cell"))

PyQt5 — Урок 006. Работа с QTableWidget

Выглядеть таблица будет следующим образом:


Реализация

Рекомендуем хостинг TIMEWEB

Рекомендуем хостинг TIMEWEB

Рекомендуемые статьи по этой тематике

По статье задано0 вопрос(ов)

Подписчики
Платёжная система

А как иконку в хедер задать?

Через метод setIcon

Добрый день,а есть ли возможнось задать размер самой таблицы?

Дорый день! Если вы имеете ввиду ширину и высоту самого виджета, где располагается таблица, то это обычно делается через методы:

  • setMinimumSize
  • setMaximumSize
  • setMinimumHeight
  • setMaximumHeight
  • setMinimumWidth
  • setMaximumWidth

Исходя из своего опыта могу сказать, что обычно вся вёрстка делается через Layout классы, поэтому обычно задают минимальные размеры. А таблица уже подстраивается внутри Layout.

А в данном конкретном коде нужно вызывать данные методы так

Спасибо большое!
Удалось ограничить размеры таблицы для своей задачи с помощью setMaximumHeight и setMaximumWidth.

Приветствую. Подскажите пожалуйста пару моментов.
1. Как сделать столбец не редактируемый, а остальные ячейки остаются редактируемыми
2. Как оталвливать события двойного клика для редактирования ячейки и нажатия на Enter для завершения редактирования
3. Как отсортировать записи по поределенной колонке. То есть сначала загружаем таблицу, после загрузки — сортируем
Буду благодарен

Добрый день.
По первым двум вопросам вы найдёте ответ в этой статье — PyQt5 — Урок 008. Работа с QTableWidget (Обновление урока 006)

Что касается последнего вопроса, то я вам советую использовать для такого функционала QTableView. QTableWidget является довольно ограниченным виджетом и подходит для табличного отображения именно виджетов с разной информацией. А для табличных данных лучше использовать можель данных и QTableView

Спасибо Вам большое. Буду изучать.

Добрый день!
Подскажите можно ли добавлять значения/строки в таблицу в цикле или с задержкой в реальном времени, что-то типа

можно конечно. Важно понимать пару вещей.
1. Если строка именно добавляется в таблицу, нужно предварительно ее добавить в qtablewidget, для этого есть метод insertrow или как-то так — это легко гуглится
2. Если вы будете добавлять sleep ну или просто добавлять строки в цикле — то основной поток будет блокироваться на время работы цикла. Избежать блокировки можно вынеся заполнение qtablewidget в отдельный, параллельный поток. Если процес заполнения инициализируется в разных местах программы — нужно этот класс, который будет заполнять — сделать синглтоном, в противном случае будете при вызове из разных мест программы получать ошибку доступа к памяти от чего приложение будет падать.

Комментарии

Timeweb

Позвольте мне порекомендовать вам отличный хостинг, на котором расположен EVILEG.

Обложка: Python GUI: создаём простое приложение с PyQt и Qt Designer

Эта статья предназначена для тех, кто только начинает своё знакомство с созданием приложений с графическим интерфейсом (GUI) на Python. В ней мы рассмотрим основы использования PyQt в связке с Qt Designer. Шаг за шагом мы создадим простое Python GUI приложение, которое будет отображать содержимое выбранной директории.

Что нам потребуется

Нам понадобятся PyQt и Qt Designer, ну и Python, само собой.

В этой статье используется PyQt5 с Python 3, но особых различий между PyQt и PySide или их версиями для Python 2 нет.

Windows: PyQt можно скачать здесь. В комплекте с ним идёт Qt Designer.

macOS: Вы можете установить PyQt с помощью Homebrew:

$ brew install pyqt5

Linux: Всё нужное, вероятно, есть в репозиториях вашего дистрибутива. Qt Designer можно установить из Центра Приложений, но PyQt придётся устанавливать через терминал. Установить всё, что нам понадобится, одной командой можно, например, так:

После того как вы закончили с приготовлениями, откройте командную строку/терминал и убедитесь, что вы можете использовать команду pyuic5 . Вы должны увидеть следующее:

Если вы используете Windows, то, скорее всего, путь C:\Python36\Scripts (измените 36 на вашу версию Python) не прописан в вашем PATH . Загляните в этот тред на Stack Overflow, чтобы узнать, как решить проблему.

Дизайн

Основы

Теперь, когда у нас всё готово к работе, давайте начнём с простого дизайна.

Откройте Qt Designer, где вы увидите диалог новой формы, выберите Main Window и нажмите Create.

Создание новой формы в Qt Designer

После этого у вас должна появиться форма — шаблон для окна, размер которого можно менять и куда можно вставлять объекты из окна виджетов и т.д. Ознакомьтесь с интерфейсом, он довольно простой.

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

Все элементы формы и их иерархия по умолчанию отображаются в правой части окна Qt Designer под названием Object Inspector. Вы с лёгкостью можете удалять объекты, кликая по ним правой кнопкой мыши в этом окне. Или же вы можете выбрать их в основной форме и нажать клавишу DEL на клавиатуре.

Удаление ненужных элементов с формы

В итоге мы имеем почти пустую форму. Единственный оставшийся объект — centralwidget , но он нам понадобится, поэтому с ним мы ничего не будем делать.

Теперь перетащите куда-нибудь в основную форму List Widget (не List View) и Push Button из Widget Box.

Макеты

Вместо использования фиксированных позиций и размеров элементов в приложении лучше использовать макеты. Фиксированные позиции и размеры у вас будут выглядеть хорошо (пока вы не измените размер окна), но вы никогда не можете быть уверены, что всё будет точно так же на других машинах и/или операционных системах.

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

Давайте создадим нашу первую форму без использования макетов. Перетащите список и кнопку в форме и измените их размер, чтобы вышло вот так:

Предпросмотр формы, созданной без использования макетов

Теперь в меню Qt Designer нажмите Form, затем выберите Preview и увидите что-то похожее на скриншот выше. Выглядит хорошо, не так ли? Но вот что случится, когда мы изменим размер окна:

Проблема при изменении размера окна

Наши объекты остались на тех же местах и сохранили свои размеры, несмотря на то что размер основного окна изменился и кнопку почти не видно. Вот поэтому в большинстве случаев стоит использовать макеты. Конечно, бывают случаи, когда вам, например, нужна фиксированная или минимальная/максимальная ширина объекта. Но вообще при разработке приложения лучше использовать макеты.

Основное окно уже поддерживает макеты, поэтому нам ничего не нужно добавлять в нашу форму. Просто кликните правой кнопкой мыши по Main Window в Object Inspector и выберите Lay outLay out vertically. Также вы можете кликнуть правой кнопкой по пустой области в форме и выбрать те же опции:

Вертикальное расположение виджетов

Ваши элементы должны быть в том же порядке, что и до внесённых изменений, но если это не так, то просто перетащите их на нужное место.

Так как мы использовали вертикальное размещение, все элементы, которые мы добавим, будут располагаться вертикально. Можно комбинировать размещения для получения желаемого результата. Например, горизонтальное размещение двух кнопок в вертикальном будет выглядеть так:

Горизонтальное размещение двух кнопок в вертикальном

Если у вас не получается переместить элемент в главном окне, вы можете сделать это в окне Object Inspector.

Последние штрихи

Теперь, благодаря вертикальному размещению, наши элементы выровнены правильно. Единственное, что осталось сделать (но не обязательно), — изменить имя элементов и их текст.

В простом приложении вроде этого с одним лишь списком и кнопкой изменение имён не обязательно, так как им в любом случае просто пользоваться. Тем не менее правильное именование элементов — то, к чему стоит привыкать с самого начала.

Свойства элементов можно изменить в разделе Property Editor.

Подсказка: вы можете менять размер, передвигать или добавлять часто используемые элементы в интерфейс Qt Designer для ускорения рабочего процесса. Вы можете добавлять скрытые/закрытые части интерфейса через пункт меню View.

Нажмите на кнопку, которую вы добавили в форму. Теперь в Property Editor вы должны видеть все свойства этого элемента. В данный момент нас интересуют objectName и text в разделе QAbstractButton . Вы можете сворачивать разделы в Property Editor нажатием по названию раздела.

Измените значение objectName на btnBrowse и text на Выберите папку.

Должно получиться так:

Изменение названия и текста кнопки

Именем объекта списка является listWidget , что вполне подходит в данном случае.

Сохраните дизайн как design.ui в папке проекта.

Превращаем дизайн в код

Конечно, можно использовать .ui -файлы напрямую из Python-кода, однако есть и другой путь, который может показаться легче. Можно конвертировать код .ui -файла в Python-файл, который мы потом сможем импортировать и использовать. Для этого мы используем команду pyuic5 из терминала/командной строки.

Чтобы конвертировать .ui -файл в Python-файл с названием design.py , используйте следующую команду:

Пишем код

Теперь у нас есть файл design.py с нужной частью дизайна нашего приложения и мы начинать работу над созданием его логики.

Создайте файл main.py в папке, где находится design.py .

Используем дизайн

Для Python GUI приложения понадобятся следующие модули:

Также нам нужен код дизайна, который мы создали ранее, поэтому его мы тоже импортируем:

Так как файл с дизайном будет полностью перезаписываться каждый раз при изменении дизайна, мы не будем изменять его. Вместо этого мы создадим новый класс ExampleApp , который объединим с кодом дизайна для использования всех его функций:

В этом классе мы будем взаимодействовать с элементами интерфейса, добавлять соединения и всё остальное, что нам потребуется. Но для начала нам нужно инициализировать класс при запуске кода. С этим мы разберёмся в функции main() :

И чтобы выполнить эту функцию, мы воспользуемся привычной конструкцией:

В итоге main.py выглядит таким образом:

Если запустить этот код: $ python3 main.py , то наше приложение запустится!

Запущенная программа

Но нажатие на кнопку ничего не даёт, поэтому нам придётся с этим разобраться.

Добавляем функциональность в наше Python GUI приложение

Примечание Весь дальнейший код пишется внутри класса ExampleApp .

Начнём с кнопки Выберите папку. Привязать к функции событие вроде нажатия на кнопку можно следующим образом:

Добавьте эту строку в метод __init__ класса ExampleApp , чтобы выполнить привязку при запуске приложения. А теперь взглянем на неё поближе:

  • self.btnBrowse : здесь btnBrowse — имя объекта, который мы определили в Qt Designer. self говорит само за себя и означает принадлежность к текущему классу;
  • clicked — событие, которое мы хотим привязать. У разных элементов разные события, например, у виджетов списка есть itemSelectionChanged и т.д.;
  • connect() — метод, который привязывает событие к вызову переданной функции;
  • self.browse_folder — просто функция (метод), которую мы описали в классе ExampleApp .

Для открытия диалога выбора папки мы можем использовать встроенный метод QtWidgets.QFileDialog.getExistingDirectory :

Если пользователь выберет директорию, переменной directory присвоится абсолютный путь к выбранной директории, в противном случае она будет равна None . Чтобы не выполнять код дальше, если пользователь закроет диалог, мы используем команду if directory: .

Для отображения содержимого директории нам нужно импортировать os :

И получить список содержимого следующим образом:

Для добавления элементов в listWidget мы используем метод addItem() , а для удаления всех элементов у нас есть self.listWidget.clear() .

В итоге функция browse_folder должна выглядеть так:

Теперь, если запустить приложение, нажать на кнопку и выбрать директорию, мы увидим:

Готовое графическое приложение (Python GUI), отображающее содержимое папки со своим исходным кодом

Так выглядит весь код нашего Python GUI приложения:

Это были основы использования Qt Designer и PyQt для разработки Python GUI приложения. Теперь вы можете спокойно изменять дизайн приложения и использовать команду pyuic5 без страха потерять написанный код.

Я создаю простой графический интерфейс с помощью Qt4 Designer. Я добавил QTableWidget в свой диалог. Мне нужен только один столбец в моей таблице, и я хочу, чтобы этот столбец растягивался до максимальной ширины. Но он имеет фиксированную ширину.

Я попробовал установить свойство свойства horizontalHeaderStretchLastSection в true из редактора, но это не помогло. Может кто-нибудь, пожалуйста, сообщите мне, какую собственность мне следует редактировать?

enter image description here

Ниже приведен снимок экрана.

Ниже приведены остальные свойства QTableWidget, которые я использую.

Вы смешиваете вертикальный заголовок с первым столбцом. Если вы хотите, чтобы таблица с одним столбцом заполняла всю ширину, скройте вертикальный заголовок и растяните последний столбец горизонтального заголовка:

screenshot

Затем вы должны отредактировать элементы таблицы, добавив один столбец (скажем, "Первый столбец") и сколько угодно строк (неважно, как вы их называете). Это позволит включить вкладку " Элементы ", где вы можете добавить фактическое содержимое таблицы. После этого ваша таблица должна выглядеть так:

screenshot

Я думаю, что стоит отметить здесь, однако, что таблица с одним столбцом без заголовков более или менее эквивалентна ListWidget. Итак, учитывая, что ListWidget имеет гораздо более простой API, возможно, вам стоит подумать об использовании этого.

Изображения в таблице Qt

О таблицах в Qt мы уже говорили, когда рассматривали концепцию Модель-Представление в Qt и помещали QProgressBar в QTableView. Теперь убедимся, что добавлять изображения в Qt-таблицы еще проще.

Подготовительный этап

Создадим каркас приложения, состоящего из таблицы QTableWidget и простой командной ссылки. Начинаем с заголовочного файла imagetableviewdemowidget . h :

А теперь часть реализации imagetableviewdemowidget . cpp :

Наша таблица будет включать два столбца: имя файла и изображение. Добавление изображения будет происходить после нажатия на гиперссылку Load Image . . . , размещенную под таблицей.

Реализация вставки изображения в таблицу

Переходим к основному блюду. Реализация оставленной нами функции:

Вставка картинки происходит путем добавления элемента QTableWidgetItem с ролью Qt : : DecorationRole . По умолчанию высота строки не подстраивается под размер изображения, поэтому приходится менять ее вручную. Обратите внимание, что для этого мы используем заготовленную константу IMAGE_VMARGIN .

Если требуется использовать архитектуру Модель-Представление, то реализация отличается не намного. В этом случае достаточно организовать корректную обработку запроса данных Модели в перегруженной функции-члене data ( ) :

Читайте также: