{"id":5510,"date":"2022-11-11T01:25:16","date_gmt":"2022-11-11T01:25:16","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=5510"},"modified":"2022-11-11T01:26:08","modified_gmt":"2022-11-11T01:26:08","slug":"pyqt-model-view","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/pyqt\/pyqt-model-view\/","title":{"rendered":"PyQt Model\/View"},"content":{"rendered":"\n<p><strong>Summary<\/strong>: in this tutorial, you&#8217;ll learn how the PyQt Model\/View pattern works and its advantages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='introduction-to-pyqt-modelview-pattern'>Introduction to PyQt Model\/View pattern <a href=\"#introduction-to-pyqt-modelview-pattern\" class=\"anchor\" id=\"introduction-to-pyqt-modelview-pattern\" title=\"Anchor for Introduction to PyQt Model\/View pattern\">#<\/a><\/h2>\n\n\n\n<p>Model-View-Controller or MVC is a software pattern for developing user interfaces (UI). The MVC pattern decouples UI (views), data (models), and application logic (controllers):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"190\" src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/11\/PyQt-MVC.png\" alt=\"\" class=\"wp-image-5517\" srcset=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/11\/PyQt-MVC.png 320w, https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/11\/PyQt-MVC-300x178.png 300w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Models represent the data of the application or contain the logic for getting the data from a database.<\/li>\n\n\n\n<li>Views are responsible for presenting models through the user interface.<\/li>\n\n\n\n<li>Controllers handle user inputs, work with the models, and select views to display the data.<\/li>\n<\/ul>\n\n\n\n<p>The goal of MVC is to achieve the <strong>separation of concerns<\/strong> between models, views, and controllers.<\/p>\n\n\n\n<p>MVC makes it easy to add or modify views without changing the underlying models. Also, MVC allows you to write <a href=\"https:\/\/www.pythontutorial.net\/python-unit-testing\/python-unittest\/\">unit tests<\/a> that target the model and controller without involving the UI. <\/p>\n\n\n\n<p>Another advantage of MVC is that a model can have multiple views. And all of these views can be automatically updated based on the same model.<\/p>\n\n\n\n<p>PyQt uses a variant of the MVC pattern by combining the view and controller of MVC into the view, which results in Model\/View architecture.<\/p>\n\n\n\n<p>The Model\/View architecture allows PyQt to keep the interdependency of components to a minimum and improve reusability.<\/p>\n\n\n\n<p>The following picture illustrates the PyQt Model\/View pattern:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"287\" height=\"202\" src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/11\/PyQt-ModelView.png\" alt=\"PyQt ModelView\" class=\"wp-image-5516\"\/><\/figure>\n<\/div>\n\n\n<p>In the Model\/View architecture, the view handles data rendering via a delegate. A delegate has two main responsibilities:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Renders data.<\/li>\n\n\n\n<li>Communicates with the model when data is edited.<\/li>\n<\/ul>\n\n\n\n<p>The models, views, and delegates communicate with each other via signals and slots.<\/p>\n\n\n\n<p>PyQt provides some standard Model\/View widgets:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>QListView<\/code> &#8211; displays a list of items<\/li>\n\n\n\n<li><code>QTableView<\/code> &#8211; displays a tabular of items.<\/li>\n\n\n\n<li><code>QTreeView<\/code> &#8211; displays hierarchical data.<\/li>\n<\/ul>\n\n\n\n<p>Besides these widgets, The <code><a href=\"https:\/\/www.pythontutorial.net\/pyqt\/pyqt-qcombobox\/\">QComboBox<\/a><\/code> widget also supports the Model\/View pattern.<\/p>\n\n\n\n<p>In addition, PyQt has a number of base model classes such as <code>QAbstractListModel<\/code>, <code>QAbstractTableModel<\/code>, and <code>QStandardItemModel<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='pyqt-modelview-example'>PyQt Model\/View example <a href=\"#pyqt-modelview-example\" class=\"anchor\" id=\"pyqt-modelview-example\" title=\"Anchor for PyQt Model\/View example\">#<\/a><\/h2>\n\n\n\n<p>We&#8217;ll take a simple example to illustrate the PyQt Model\/View:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python shcb-code-table\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> sys\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">from<\/span> PyQt6.QtWidgets <span class=\"hljs-keyword\">import<\/span> QApplication, QWidget, QVBoxLayout, QHBoxLayout, QComboBox, QListView\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">from<\/span> PyQt6.QtCore <span class=\"hljs-keyword\">import<\/span> Qt, QStringListModel\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MainWindow<\/span><span class=\"hljs-params\">(QWidget)<\/span>:<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span><span class=\"hljs-params\">(self, *args, **kwargs)<\/span>:<\/span>\n<\/span><\/span><span class='shcb-loc'><span>        super().__init__(*args, **kwargs)\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>        self.setGeometry(<span class=\"hljs-number\">100<\/span>, <span class=\"hljs-number\">100<\/span>, <span class=\"hljs-number\">400<\/span>, <span class=\"hljs-number\">200<\/span>)\n<\/span><\/span><span class='shcb-loc'><span>        self.setWindowTitle(<span class=\"hljs-string\">'PyQt Model\/View'<\/span>)\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>        layout = QVBoxLayout()\n<\/span><\/span><span class='shcb-loc'><span>        self.setLayout(layout)\n<\/span><\/span><span class='shcb-loc'><span>        \n<\/span><\/span><mark class='shcb-loc'><span>        model = QStringListModel()\n<\/span><\/mark><mark class='shcb-loc'><span>        model.setStringList(&#91;<span class=\"hljs-string\">'Apple'<\/span>,<span class=\"hljs-string\">'Banana'<\/span>,<span class=\"hljs-string\">'Orange'<\/span>])\n<\/span><\/mark><span class='shcb-loc'><span>        \n<\/span><\/span><mark class='shcb-loc'><span>        self.list_view = QListView()\n<\/span><\/mark><mark class='shcb-loc'><span>        self.list_view.setModel(model)\n<\/span><\/mark><span class='shcb-loc'><span>        \n<\/span><\/span><mark class='shcb-loc'><span>        self.combo_box = QComboBox()\n<\/span><\/mark><mark class='shcb-loc'><span>        self.combo_box.setModel(model)\n<\/span><\/mark><span class='shcb-loc'><span>        \n<\/span><\/span><span class='shcb-loc'><span>        layout.addWidget(self.combo_box) \n<\/span><\/span><span class='shcb-loc'><span>        layout.addWidget(self.list_view)\n<\/span><\/span><span class='shcb-loc'><span>                       \n<\/span><\/span><span class='shcb-loc'><span>        self.show()\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">if<\/span> __name__ == <span class=\"hljs-string\">'__main__'<\/span>:\n<\/span><\/span><span class='shcb-loc'><span>    app = QApplication(sys.argv)\n<\/span><\/span><span class='shcb-loc'><span>    window = MainWindow()\n<\/span><\/span><span class='shcb-loc'><span>    sys.exit(app.exec())\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>How it works.<\/p>\n\n\n\n<p>In this example, we have two widgets a combobox and a list view. Both of these widgets use the same model which is an instance of the QStringListModel:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"452\" height=\"271\" src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/11\/PyQt-ModelView-Widget-Example.png\" alt=\"\" class=\"wp-image-5521\" srcset=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/11\/PyQt-ModelView-Widget-Example.png 452w, https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/11\/PyQt-ModelView-Widget-Example-300x180.png 300w\" sizes=\"auto, (max-width: 452px) 100vw, 452px\" \/><\/figure>\n\n\n\n<p>If you change an item from one widget, the other widget will update the changes automatically. In other words, you don&#8217;t need to write any code to keep all the widgets that use the same model in sync:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"272\" style=\"aspect-ratio: 452 \/ 272;\" width=\"452\" controls src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2022\/11\/PyQt-ModelView.mp4\"><\/video><\/figure>\n\n\n\n<p>First, create a new instance of the QStringListModel class and set a list of strings:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">model = QStringListModel()\nmodel.setStringList(&#91;<span class=\"hljs-string\">'Apple'<\/span>,<span class=\"hljs-string\">'Banana'<\/span>,<span class=\"hljs-string\">'Orange'<\/span>])<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Second, create a QListView widget and set its model to the model:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">self<\/span>.list_view = QListView()\n<span class=\"hljs-keyword\">self<\/span>.list_view.setModel(model)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Third, create a QComboBox widget and set its models to the same model as the QListView widget:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">self<\/span>.combo_box = QComboBox()\n<span class=\"hljs-keyword\">self<\/span>.combo_box.setModel(model)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id='summary'>Summary <a href=\"#summary\" class=\"anchor\" id=\"summary\" title=\"Anchor for Summary\">#<\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>PyQt uses the model\/view pattern to achieve the separation of concerns.<\/li>\n<\/ul>\n<div class=\"helpful-block-content\" data-title=\"\">\n\t<header>\n\t\t<div class=\"wth-question\">Was this tutorial helpful ?<\/div>\n\t\t<div class=\"wth-thumbs\">\n\t\t\t<button\n\t\t\t\tdata-post=\"5510\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/pyqt\/pyqt-model-view\/\"\n\t\t\t\tdata-post-title=\"PyQt Model\/View\"\n\t\t\t\tdata-response=\"1\"\n\t\t\t\tclass=\"wth-btn-rounded wth-yes-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\tclass=\"feather feather-thumbs-up block w-full h-full\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t<button\n\t\t\t\tdata-response=\"0\"\n\t\t\t\tdata-post=\"5510\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/pyqt\/pyqt-model-view\/\"\n\t\t\t\tdata-post-title=\"PyQt Model\/View\"\n\t\t\t\tclass=\"wth-btn-rounded wth-no-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t<div class=\"wth-form hidden\">\n\t\t<div class=\"wth-form-wrapper\">\n\t\t\t<div class=\"wth-title\"><\/div>\n\t\t\t<textarea class=\"wth-message\"><\/textarea>\n\t\t\t<input type=\"button\" name=\"wth-submit\" class=\"wth-btn wth-btn-submit\" id=\"wth-submit\" \/>\n\t\t\t<input type=\"button\" class=\"wth-btn wth-btn-cancel\" value=\"Cancel\" \/>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you&#8217;ll learn how the PyQt Model\/View pattern works and its advantages.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":4862,"menu_order":37,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5510","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/5510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/comments?post=5510"}],"version-history":[{"count":0,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/5510\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/4862"}],"wp:attachment":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/media?parent=5510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}