study/uTools-Manuals
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-Manuals.git synced 2025-06-09 07:24:04 +08:00
Code Issues Packages Projects Releases Wiki Activity
uTools-Manuals/docs/PyQt5/控件1.html
fofolee 4130bb8906 增加tkinter和pyqt5
2019-05-07 01:01:38 +08:00

440 lines
44 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<h1 id="控件1">控件1</h1>
<p>控件就像是应用这座房子的一块块砖。PyQt5有很多的控件，比如按钮，单选框，滑动条，复选框等等。在本章，我们将介绍一些很有用的控件：<code>QCheckBox</code>，<code>ToggleButton</code>，<code>QSlider</code>，<code>QProgressBar</code>和<code>QCalendarWidget</code>。</p>
<h2 id="qcheckbox">QCheckBox</h2>
<p><code>QCheckBox</code>组件有俩状态：开和关。通常跟标签一起使用，用在激活和关闭一些选项的场景。</p>
<div class="sourceCode" id="cb1"><pre><code class="language-python"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="co">#!/usr/bin/python3</span></a>
<a class="sourceLine" id="cb1-2" data-line-number="2"><span class="co"># -*- coding: utf-8 -*-</span></a>
<a class="sourceLine" id="cb1-3" data-line-number="3"></a>
<a class="sourceLine" id="cb1-4" data-line-number="4"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb1-5" data-line-number="5"><span class="co">ZetCode PyQt5 tutorial </span></a>
<a class="sourceLine" id="cb1-6" data-line-number="6"></a>
<a class="sourceLine" id="cb1-7" data-line-number="7"><span class="co">In this example, a QCheckBox widget</span></a>
<a class="sourceLine" id="cb1-8" data-line-number="8"><span class="co">is used to toggle the title of a window.</span></a>
<a class="sourceLine" id="cb1-9" data-line-number="9"></a>
<a class="sourceLine" id="cb1-10" data-line-number="10"><span class="co">Author: Jan Bodnar</span></a>
<a class="sourceLine" id="cb1-11" data-line-number="11"><span class="co">Website: zetcode.com </span></a>
<a class="sourceLine" id="cb1-12" data-line-number="12"><span class="co">Last edited: August 2017</span></a>
<a class="sourceLine" id="cb1-13" data-line-number="13"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb1-14" data-line-number="14"></a>
<a class="sourceLine" id="cb1-15" data-line-number="15"><span class="im">from</span> PyQt5.QtWidgets <span class="im">import</span> QWidget, QCheckBox, QApplication</a>
<a class="sourceLine" id="cb1-16" data-line-number="16"><span class="im">from</span> PyQt5.QtCore <span class="im">import</span> Qt</a>
<a class="sourceLine" id="cb1-17" data-line-number="17"><span class="im">import</span> sys</a>
<a class="sourceLine" id="cb1-18" data-line-number="18"></a>
<a class="sourceLine" id="cb1-19" data-line-number="19"><span class="kw">class</span> Example(QWidget):</a>
<a class="sourceLine" id="cb1-20" data-line-number="20"> </a>
<a class="sourceLine" id="cb1-21" data-line-number="21"> <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb1-22" data-line-number="22"> <span class="bu">super</span>().<span class="fu">__init__</span>()</a>
<a class="sourceLine" id="cb1-23" data-line-number="23"> </a>
<a class="sourceLine" id="cb1-24" data-line-number="24"> <span class="va">self</span>.initUI()</a>
<a class="sourceLine" id="cb1-25" data-line-number="25"> </a>
<a class="sourceLine" id="cb1-26" data-line-number="26"> </a>
<a class="sourceLine" id="cb1-27" data-line-number="27"> <span class="kw">def</span> initUI(<span class="va">self</span>): </a>
<a class="sourceLine" id="cb1-28" data-line-number="28"></a>
<a class="sourceLine" id="cb1-29" data-line-number="29"> cb <span class="op">=</span> QCheckBox(<span class="st">&#39;Show title&#39;</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb1-30" data-line-number="30"> cb.move(<span class="dv">20</span>, <span class="dv">20</span>)</a>
<a class="sourceLine" id="cb1-31" data-line-number="31"> cb.toggle()</a>
<a class="sourceLine" id="cb1-32" data-line-number="32"> cb.stateChanged.<span class="ex">connect</span>(<span class="va">self</span>.changeTitle)</a>
<a class="sourceLine" id="cb1-33" data-line-number="33"> </a>
<a class="sourceLine" id="cb1-34" data-line-number="34"> <span class="va">self</span>.setGeometry(<span class="dv">300</span>, <span class="dv">300</span>, <span class="dv">250</span>, <span class="dv">150</span>)</a>
<a class="sourceLine" id="cb1-35" data-line-number="35"> <span class="va">self</span>.setWindowTitle(<span class="st">&#39;QCheckBox&#39;</span>)</a>
<a class="sourceLine" id="cb1-36" data-line-number="36"> <span class="va">self</span>.show()</a>
<a class="sourceLine" id="cb1-37" data-line-number="37"> </a>
<a class="sourceLine" id="cb1-38" data-line-number="38"> </a>
<a class="sourceLine" id="cb1-39" data-line-number="39"> <span class="kw">def</span> changeTitle(<span class="va">self</span>, state):</a>
<a class="sourceLine" id="cb1-40" data-line-number="40"> </a>
<a class="sourceLine" id="cb1-41" data-line-number="41"> <span class="cf">if</span> state <span class="op">==</span> Qt.Checked:</a>
<a class="sourceLine" id="cb1-42" data-line-number="42"> <span class="va">self</span>.setWindowTitle(<span class="st">&#39;QCheckBox&#39;</span>)</a>
<a class="sourceLine" id="cb1-43" data-line-number="43"> <span class="cf">else</span>:</a>
<a class="sourceLine" id="cb1-44" data-line-number="44"> <span class="va">self</span>.setWindowTitle(<span class="st">&#39; &#39;</span>)</a>
<a class="sourceLine" id="cb1-45" data-line-number="45"> </a>
<a class="sourceLine" id="cb1-46" data-line-number="46"> </a>
<a class="sourceLine" id="cb1-47" data-line-number="47"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">&#39;__main__&#39;</span>:</a>
<a class="sourceLine" id="cb1-48" data-line-number="48"> </a>
<a class="sourceLine" id="cb1-49" data-line-number="49"> app <span class="op">=</span> QApplication(sys.argv)</a>
<a class="sourceLine" id="cb1-50" data-line-number="50"> ex <span class="op">=</span> Example()</a>
<a class="sourceLine" id="cb1-51" data-line-number="51"> sys.exit(app.exec_())</a></code></pre></div>
<p>这个例子中，有一个能切换窗口标题的单选框。</p>
<pre><code class="language-python">cb = QCheckBox(&#39;Show title&#39;, self)</code></pre>
<p>这个是<code>QCheckBox</code>的构造器。</p>
<pre><code class="language-python">cb.toggle()</code></pre>
<p>要设置窗口标题，我们就要检查单选框的状态。默认情况下，窗口没有标题，单选框未选中。</p>
<pre><code class="language-python">cb.stateChanged.connect(self.changeTitle)</code></pre>
<p>把<code>changeTitle()</code>方法和<code>stateChanged</code>信号关联起来。这样，<code>changeTitle()</code>就能切换窗口标题了。</p>
<pre><code class="language-python">def changeTitle(self, state):
if state == Qt.Checked:
self.setWindowTitle(&#39;QCheckBox&#39;)
else:
self.setWindowTitle(&#39;&#39;)</code></pre>
<p>控件的状态是由<code>changeTitle()</code>方法控制的，如果空间被选中，我们就给窗口添加一个标题，如果没被选中，就清空标题。</p>
<p>程序展示：</p>
<figure>
<img class="whitelist" src="docs/PyQt5/images/6-qcheckbox.png" alt="QCheckBox" />
</figure>
<h2 id="切换按钮">切换按钮</h2>
<p>切换按钮就是<code>QPushButton</code>的一种特殊模式。 它只有两种状态：按下和未按下。我们再点击的时候切换两种状态，有很多场景会使用到这个功能。</p>
<div class="sourceCode" id="cb6"><pre><code class="language-python"><a class="sourceLine" id="cb6-1" data-line-number="1"><span class="co">#!/usr/bin/python3</span></a>
<a class="sourceLine" id="cb6-2" data-line-number="2"><span class="co"># -*- coding: utf-8 -*-</span></a>
<a class="sourceLine" id="cb6-3" data-line-number="3"></a>
<a class="sourceLine" id="cb6-4" data-line-number="4"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb6-5" data-line-number="5"><span class="co">ZetCode PyQt5 tutorial </span></a>
<a class="sourceLine" id="cb6-6" data-line-number="6"></a>
<a class="sourceLine" id="cb6-7" data-line-number="7"><span class="co">In this example, we create three toggle buttons.</span></a>
<a class="sourceLine" id="cb6-8" data-line-number="8"><span class="co">They will control the background color of a </span></a>
<a class="sourceLine" id="cb6-9" data-line-number="9"><span class="co">QFrame. </span></a>
<a class="sourceLine" id="cb6-10" data-line-number="10"></a>
<a class="sourceLine" id="cb6-11" data-line-number="11"><span class="co">Author: Jan Bodnar</span></a>
<a class="sourceLine" id="cb6-12" data-line-number="12"><span class="co">Website: zetcode.com </span></a>
<a class="sourceLine" id="cb6-13" data-line-number="13"><span class="co">Last edited: August 2017</span></a>
<a class="sourceLine" id="cb6-14" data-line-number="14"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb6-15" data-line-number="15"></a>
<a class="sourceLine" id="cb6-16" data-line-number="16"><span class="im">from</span> PyQt5.QtWidgets <span class="im">import</span> (QWidget, QPushButton, </a>
<a class="sourceLine" id="cb6-17" data-line-number="17"> QFrame, QApplication)</a>
<a class="sourceLine" id="cb6-18" data-line-number="18"><span class="im">from</span> PyQt5.QtGui <span class="im">import</span> QColor</a>
<a class="sourceLine" id="cb6-19" data-line-number="19"><span class="im">import</span> sys</a>
<a class="sourceLine" id="cb6-20" data-line-number="20"></a>
<a class="sourceLine" id="cb6-21" data-line-number="21"><span class="kw">class</span> Example(QWidget):</a>
<a class="sourceLine" id="cb6-22" data-line-number="22"> </a>
<a class="sourceLine" id="cb6-23" data-line-number="23"> <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb6-24" data-line-number="24"> <span class="bu">super</span>().<span class="fu">__init__</span>()</a>
<a class="sourceLine" id="cb6-25" data-line-number="25"> </a>
<a class="sourceLine" id="cb6-26" data-line-number="26"> <span class="va">self</span>.initUI()</a>
<a class="sourceLine" id="cb6-27" data-line-number="27"> </a>
<a class="sourceLine" id="cb6-28" data-line-number="28"> </a>
<a class="sourceLine" id="cb6-29" data-line-number="29"> <span class="kw">def</span> initUI(<span class="va">self</span>): </a>
<a class="sourceLine" id="cb6-30" data-line-number="30"></a>
<a class="sourceLine" id="cb6-31" data-line-number="31"> <span class="va">self</span>.col <span class="op">=</span> QColor(<span class="dv">0</span>, <span class="dv">0</span>, <span class="dv">0</span>) </a>
<a class="sourceLine" id="cb6-32" data-line-number="32"></a>
<a class="sourceLine" id="cb6-33" data-line-number="33"> redb <span class="op">=</span> QPushButton(<span class="st">&#39;Red&#39;</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb6-34" data-line-number="34"> redb.setCheckable(<span class="va">True</span>)</a>
<a class="sourceLine" id="cb6-35" data-line-number="35"> redb.move(<span class="dv">10</span>, <span class="dv">10</span>)</a>
<a class="sourceLine" id="cb6-36" data-line-number="36"></a>
<a class="sourceLine" id="cb6-37" data-line-number="37"> redb.clicked[<span class="bu">bool</span>].<span class="ex">connect</span>(<span class="va">self</span>.setColor)</a>
<a class="sourceLine" id="cb6-38" data-line-number="38"></a>
<a class="sourceLine" id="cb6-39" data-line-number="39"> greenb <span class="op">=</span> QPushButton(<span class="st">&#39;Green&#39;</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb6-40" data-line-number="40"> greenb.setCheckable(<span class="va">True</span>)</a>
<a class="sourceLine" id="cb6-41" data-line-number="41"> greenb.move(<span class="dv">10</span>, <span class="dv">60</span>)</a>
<a class="sourceLine" id="cb6-42" data-line-number="42"></a>
<a class="sourceLine" id="cb6-43" data-line-number="43"> greenb.clicked[<span class="bu">bool</span>].<span class="ex">connect</span>(<span class="va">self</span>.setColor)</a>
<a class="sourceLine" id="cb6-44" data-line-number="44"></a>
<a class="sourceLine" id="cb6-45" data-line-number="45"> blueb <span class="op">=</span> QPushButton(<span class="st">&#39;Blue&#39;</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb6-46" data-line-number="46"> blueb.setCheckable(<span class="va">True</span>)</a>
<a class="sourceLine" id="cb6-47" data-line-number="47"> blueb.move(<span class="dv">10</span>, <span class="dv">110</span>)</a>
<a class="sourceLine" id="cb6-48" data-line-number="48"></a>
<a class="sourceLine" id="cb6-49" data-line-number="49"> blueb.clicked[<span class="bu">bool</span>].<span class="ex">connect</span>(<span class="va">self</span>.setColor)</a>
<a class="sourceLine" id="cb6-50" data-line-number="50"></a>
<a class="sourceLine" id="cb6-51" data-line-number="51"> <span class="va">self</span>.square <span class="op">=</span> QFrame(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb6-52" data-line-number="52"> <span class="va">self</span>.square.setGeometry(<span class="dv">150</span>, <span class="dv">20</span>, <span class="dv">100</span>, <span class="dv">100</span>)</a>
<a class="sourceLine" id="cb6-53" data-line-number="53"> <span class="va">self</span>.square.setStyleSheet(<span class="st">&quot;QWidget { background-color: </span><span class="sc">%s</span><span class="st"> }&quot;</span> <span class="op">%</span> </a>
<a class="sourceLine" id="cb6-54" data-line-number="54"> <span class="va">self</span>.col.name())</a>
<a class="sourceLine" id="cb6-55" data-line-number="55"> </a>
<a class="sourceLine" id="cb6-56" data-line-number="56"> <span class="va">self</span>.setGeometry(<span class="dv">300</span>, <span class="dv">300</span>, <span class="dv">280</span>, <span class="dv">170</span>)</a>
<a class="sourceLine" id="cb6-57" data-line-number="57"> <span class="va">self</span>.setWindowTitle(<span class="st">&#39;Toggle button&#39;</span>)</a>
<a class="sourceLine" id="cb6-58" data-line-number="58"> <span class="va">self</span>.show()</a>
<a class="sourceLine" id="cb6-59" data-line-number="59"> </a>
<a class="sourceLine" id="cb6-60" data-line-number="60"> </a>
<a class="sourceLine" id="cb6-61" data-line-number="61"> <span class="kw">def</span> setColor(<span class="va">self</span>, pressed):</a>
<a class="sourceLine" id="cb6-62" data-line-number="62"> </a>
<a class="sourceLine" id="cb6-63" data-line-number="63"> source <span class="op">=</span> <span class="va">self</span>.sender()</a>
<a class="sourceLine" id="cb6-64" data-line-number="64"> </a>
<a class="sourceLine" id="cb6-65" data-line-number="65"> <span class="cf">if</span> pressed:</a>
<a class="sourceLine" id="cb6-66" data-line-number="66"> val <span class="op">=</span> <span class="dv">255</span></a>
<a class="sourceLine" id="cb6-67" data-line-number="67"> <span class="cf">else</span>: val <span class="op">=</span> <span class="dv">0</span></a>
<a class="sourceLine" id="cb6-68" data-line-number="68"> </a>
<a class="sourceLine" id="cb6-69" data-line-number="69"> <span class="cf">if</span> source.text() <span class="op">==</span> <span class="st">&quot;Red&quot;</span>:</a>
<a class="sourceLine" id="cb6-70" data-line-number="70"> <span class="va">self</span>.col.setRed(val) </a>
<a class="sourceLine" id="cb6-71" data-line-number="71"> <span class="cf">elif</span> source.text() <span class="op">==</span> <span class="st">&quot;Green&quot;</span>:</a>
<a class="sourceLine" id="cb6-72" data-line-number="72"> <span class="va">self</span>.col.setGreen(val) </a>
<a class="sourceLine" id="cb6-73" data-line-number="73"> <span class="cf">else</span>:</a>
<a class="sourceLine" id="cb6-74" data-line-number="74"> <span class="va">self</span>.col.setBlue(val) </a>
<a class="sourceLine" id="cb6-75" data-line-number="75"> </a>
<a class="sourceLine" id="cb6-76" data-line-number="76"> <span class="va">self</span>.square.setStyleSheet(<span class="st">&quot;QFrame { background-color: </span><span class="sc">%s</span><span class="st"> }&quot;</span> <span class="op">%</span></a>
<a class="sourceLine" id="cb6-77" data-line-number="77"> <span class="va">self</span>.col.name()) </a>
<a class="sourceLine" id="cb6-78" data-line-number="78"> </a>
<a class="sourceLine" id="cb6-79" data-line-number="79"> </a>
<a class="sourceLine" id="cb6-80" data-line-number="80"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">&#39;__main__&#39;</span>:</a>
<a class="sourceLine" id="cb6-81" data-line-number="81"> </a>
<a class="sourceLine" id="cb6-82" data-line-number="82"> app <span class="op">=</span> QApplication(sys.argv)</a>
<a class="sourceLine" id="cb6-83" data-line-number="83"> ex <span class="op">=</span> Example()</a>
<a class="sourceLine" id="cb6-84" data-line-number="84"> sys.exit(app.exec_())</a></code></pre></div>
<p>我们创建了一个切换按钮和一个<code>QWidget</code>，并把<code>QWidget</code>的背景设置为黑色。点击不同的切换按钮，背景色会在红、绿、蓝之间切换（而且能看到颜色合成的效果，而不是单纯的颜色覆盖）。</p>
<pre><code class="language-python">self.col = QColor(0, 0, 0)</code></pre>
<p>设置颜色为黑色。</p>
<pre><code class="language-python">redb = QPushButton(&#39;Red&#39;, self)
redb.setCheckable(True)
redb.move(10, 10)</code></pre>
<p>创建一个<code>QPushButton</code>，然后调用它的<code>setCheckable()</code>的方法就把这个按钮编程了切换按钮。</p>
<pre><code class="language-python">redb.clicked[bool].connect(self.setColor)</code></pre>
<p>把点击信号和我们定义好的函数关联起来，这里是把点击事件转换成布尔值。</p>
<pre><code class="language-python">source = self.sender()</code></pre>
<p>获取被点击的按钮。</p>
<pre><code class="language-python">if source.text() == &quot;Red&quot;:
self.col.setRed(val)</code></pre>
<p>如果是标签为“red”的按钮被点击，就把颜色更改为预设好的对应颜色。</p>
<pre><code class="language-python">self.square.setStyleSheet(&quot;QFrame { background-color: %s }&quot; %
self.col.name())</code></pre>
<p>使用样式表（就是CSS的SS）改变背景色</p>
<p>程序展示：</p>
<figure>
<img class="whitelist" src="docs/PyQt5/images/6-togglebutton.png" alt="toggle button" />
</figure>
<h2 id="滑块">滑块</h2>
<p><code>QSlider</code>是个有一个小滑块的组件，这个小滑块能拖着前后滑动，这个经常用于修改一些具有范围的数值，比文本框或者点击增加减少的文本框（spin box）方便多了。</p>
<p>本例用一个滑块和一个标签展示。标签为一个图片，滑块控制标签（的值）。</p>
<blockquote>
<p>先弄个叫mute.png的静音图标准备着。</p>
</blockquote>
<div class="sourceCode" id="cb13"><pre><code class="language-python"><a class="sourceLine" id="cb13-1" data-line-number="1"><span class="co">#!/usr/bin/python3</span></a>
<a class="sourceLine" id="cb13-2" data-line-number="2"><span class="co"># -*- coding: utf-8 -*-</span></a>
<a class="sourceLine" id="cb13-3" data-line-number="3"></a>
<a class="sourceLine" id="cb13-4" data-line-number="4"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb13-5" data-line-number="5"><span class="co">ZetCode PyQt5 tutorial </span></a>
<a class="sourceLine" id="cb13-6" data-line-number="6"></a>
<a class="sourceLine" id="cb13-7" data-line-number="7"><span class="co">This example shows a QSlider widget.</span></a>
<a class="sourceLine" id="cb13-8" data-line-number="8"></a>
<a class="sourceLine" id="cb13-9" data-line-number="9"><span class="co">Author: Jan Bodnar</span></a>
<a class="sourceLine" id="cb13-10" data-line-number="10"><span class="co">Website: zetcode.com </span></a>
<a class="sourceLine" id="cb13-11" data-line-number="11"><span class="co">Last edited: August 2017</span></a>
<a class="sourceLine" id="cb13-12" data-line-number="12"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb13-13" data-line-number="13"></a>
<a class="sourceLine" id="cb13-14" data-line-number="14"><span class="im">from</span> PyQt5.QtWidgets <span class="im">import</span> (QWidget, QSlider, </a>
<a class="sourceLine" id="cb13-15" data-line-number="15"> QLabel, QApplication)</a>
<a class="sourceLine" id="cb13-16" data-line-number="16"><span class="im">from</span> PyQt5.QtCore <span class="im">import</span> Qt</a>
<a class="sourceLine" id="cb13-17" data-line-number="17"><span class="im">from</span> PyQt5.QtGui <span class="im">import</span> QPixmap</a>
<a class="sourceLine" id="cb13-18" data-line-number="18"><span class="im">import</span> sys</a>
<a class="sourceLine" id="cb13-19" data-line-number="19"></a>
<a class="sourceLine" id="cb13-20" data-line-number="20"><span class="kw">class</span> Example(QWidget):</a>
<a class="sourceLine" id="cb13-21" data-line-number="21"> </a>
<a class="sourceLine" id="cb13-22" data-line-number="22"> <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb13-23" data-line-number="23"> <span class="bu">super</span>().<span class="fu">__init__</span>()</a>
<a class="sourceLine" id="cb13-24" data-line-number="24"> </a>
<a class="sourceLine" id="cb13-25" data-line-number="25"> <span class="va">self</span>.initUI()</a>
<a class="sourceLine" id="cb13-26" data-line-number="26"> </a>
<a class="sourceLine" id="cb13-27" data-line-number="27"> </a>
<a class="sourceLine" id="cb13-28" data-line-number="28"> <span class="kw">def</span> initUI(<span class="va">self</span>): </a>
<a class="sourceLine" id="cb13-29" data-line-number="29"></a>
<a class="sourceLine" id="cb13-30" data-line-number="30"> sld <span class="op">=</span> QSlider(Qt.Horizontal, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb13-31" data-line-number="31"> sld.setFocusPolicy(Qt.NoFocus)</a>
<a class="sourceLine" id="cb13-32" data-line-number="32"> sld.setGeometry(<span class="dv">30</span>, <span class="dv">40</span>, <span class="dv">100</span>, <span class="dv">30</span>)</a>
<a class="sourceLine" id="cb13-33" data-line-number="33"> sld.valueChanged[<span class="bu">int</span>].<span class="ex">connect</span>(<span class="va">self</span>.changeValue)</a>
<a class="sourceLine" id="cb13-34" data-line-number="34"> </a>
<a class="sourceLine" id="cb13-35" data-line-number="35"> <span class="va">self</span>.label <span class="op">=</span> QLabel(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb13-36" data-line-number="36"> <span class="va">self</span>.label.setPixmap(QPixmap(<span class="st">&#39;mute.png&#39;</span>))</a>
<a class="sourceLine" id="cb13-37" data-line-number="37"> <span class="va">self</span>.label.setGeometry(<span class="dv">160</span>, <span class="dv">40</span>, <span class="dv">80</span>, <span class="dv">30</span>)</a>
<a class="sourceLine" id="cb13-38" data-line-number="38"> </a>
<a class="sourceLine" id="cb13-39" data-line-number="39"> <span class="va">self</span>.setGeometry(<span class="dv">300</span>, <span class="dv">300</span>, <span class="dv">280</span>, <span class="dv">170</span>)</a>
<a class="sourceLine" id="cb13-40" data-line-number="40"> <span class="va">self</span>.setWindowTitle(<span class="st">&#39;QSlider&#39;</span>)</a>
<a class="sourceLine" id="cb13-41" data-line-number="41"> <span class="va">self</span>.show()</a>
<a class="sourceLine" id="cb13-42" data-line-number="42"> </a>
<a class="sourceLine" id="cb13-43" data-line-number="43"> </a>
<a class="sourceLine" id="cb13-44" data-line-number="44"> <span class="kw">def</span> changeValue(<span class="va">self</span>, value):</a>
<a class="sourceLine" id="cb13-45" data-line-number="45"></a>
<a class="sourceLine" id="cb13-46" data-line-number="46"> <span class="cf">if</span> value <span class="op">==</span> <span class="dv">0</span>:</a>
<a class="sourceLine" id="cb13-47" data-line-number="47"> <span class="va">self</span>.label.setPixmap(QPixmap(<span class="st">&#39;mute.png&#39;</span>))</a>
<a class="sourceLine" id="cb13-48" data-line-number="48"> <span class="cf">elif</span> value <span class="op">&gt;</span> <span class="dv">0</span> <span class="kw">and</span> value <span class="op">&lt;=</span> <span class="dv">30</span>:</a>
<a class="sourceLine" id="cb13-49" data-line-number="49"> <span class="va">self</span>.label.setPixmap(QPixmap(<span class="st">&#39;min.png&#39;</span>))</a>
<a class="sourceLine" id="cb13-50" data-line-number="50"> <span class="cf">elif</span> value <span class="op">&gt;</span> <span class="dv">30</span> <span class="kw">and</span> value <span class="op">&lt;</span> <span class="dv">80</span>:</a>
<a class="sourceLine" id="cb13-51" data-line-number="51"> <span class="va">self</span>.label.setPixmap(QPixmap(<span class="st">&#39;med.png&#39;</span>))</a>
<a class="sourceLine" id="cb13-52" data-line-number="52"> <span class="cf">else</span>:</a>
<a class="sourceLine" id="cb13-53" data-line-number="53"> <span class="va">self</span>.label.setPixmap(QPixmap(<span class="st">&#39;max.png&#39;</span>))</a>
<a class="sourceLine" id="cb13-54" data-line-number="54"> </a>
<a class="sourceLine" id="cb13-55" data-line-number="55"></a>
<a class="sourceLine" id="cb13-56" data-line-number="56"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">&#39;__main__&#39;</span>:</a>
<a class="sourceLine" id="cb13-57" data-line-number="57"></a>
<a class="sourceLine" id="cb13-58" data-line-number="58"> app <span class="op">=</span> QApplication(sys.argv)</a>
<a class="sourceLine" id="cb13-59" data-line-number="59"> ex <span class="op">=</span> Example()</a>
<a class="sourceLine" id="cb13-60" data-line-number="60"> sys.exit(app.exec_())</a></code></pre></div>
<p>这里是模拟的音量控制器。拖动滑块，能改变标签位置的图片。</p>
<pre><code class="language-python">sld = QSlider(Qt.Horizontal, self)</code></pre>
<p>创建一个水平的<code>QSlider</code>。</p>
<pre><code class="language-python">self.label = QLabel(self)
self.label.setPixmap(QPixmap(&#39;mute.png&#39;))</code></pre>
<p>创建一个<code>QLabel</code>组件并给它设置一个静音图标。</p>
<pre><code class="language-python">sld.valueChanged[int].connect(self.changeValue)</code></pre>
<p>把<code>valueChanged</code>信号跟<code>changeValue()</code>方法关联起来。</p>
<pre><code class="language-python">if value == 0:
self.label.setPixmap(QPixmap(&#39;mute.png&#39;))
...</code></pre>
<p>根据音量值的大小更换标签位置的图片。这段代码是：如果音量为0，就把图片换成 mute.png。</p>
<p>程序展示：</p>
<figure>
<img class="whitelist" src="docs/PyQt5/images/6-qslider.png" alt="QSlider widget" />
</figure>
<h2 id="进度条">进度条</h2>
<p>进度条是用来展示任务进度的（我也不想这样说话）。它的滚动能让用户了解到任务的进度。<code>QProgressBar</code>组件提供了水平和垂直两种进度条，进度条可以设置最大值和最小值，默认情况是0~99。</p>
<div class="sourceCode" id="cb18"><pre><code class="language-python"><a class="sourceLine" id="cb18-1" data-line-number="1"><span class="co">#!/usr/bin/python3</span></a>
<a class="sourceLine" id="cb18-2" data-line-number="2"><span class="co"># -*- coding: utf-8 -*-</span></a>
<a class="sourceLine" id="cb18-3" data-line-number="3"></a>
<a class="sourceLine" id="cb18-4" data-line-number="4"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb18-5" data-line-number="5"><span class="co">ZetCode PyQt5 tutorial </span></a>
<a class="sourceLine" id="cb18-6" data-line-number="6"></a>
<a class="sourceLine" id="cb18-7" data-line-number="7"><span class="co">This example shows a QProgressBar widget.</span></a>
<a class="sourceLine" id="cb18-8" data-line-number="8"></a>
<a class="sourceLine" id="cb18-9" data-line-number="9"><span class="co">Author: Jan Bodnar</span></a>
<a class="sourceLine" id="cb18-10" data-line-number="10"><span class="co">Website: zetcode.com </span></a>
<a class="sourceLine" id="cb18-11" data-line-number="11"><span class="co">Last edited: August 2017</span></a>
<a class="sourceLine" id="cb18-12" data-line-number="12"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb18-13" data-line-number="13"></a>
<a class="sourceLine" id="cb18-14" data-line-number="14"><span class="im">from</span> PyQt5.QtWidgets <span class="im">import</span> (QWidget, QProgressBar, </a>
<a class="sourceLine" id="cb18-15" data-line-number="15"> QPushButton, QApplication)</a>
<a class="sourceLine" id="cb18-16" data-line-number="16"><span class="im">from</span> PyQt5.QtCore <span class="im">import</span> QBasicTimer</a>
<a class="sourceLine" id="cb18-17" data-line-number="17"><span class="im">import</span> sys</a>
<a class="sourceLine" id="cb18-18" data-line-number="18"></a>
<a class="sourceLine" id="cb18-19" data-line-number="19"><span class="kw">class</span> Example(QWidget):</a>
<a class="sourceLine" id="cb18-20" data-line-number="20"> </a>
<a class="sourceLine" id="cb18-21" data-line-number="21"> <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb18-22" data-line-number="22"> <span class="bu">super</span>().<span class="fu">__init__</span>()</a>
<a class="sourceLine" id="cb18-23" data-line-number="23"> </a>
<a class="sourceLine" id="cb18-24" data-line-number="24"> <span class="va">self</span>.initUI()</a>
<a class="sourceLine" id="cb18-25" data-line-number="25"> </a>
<a class="sourceLine" id="cb18-26" data-line-number="26"> </a>
<a class="sourceLine" id="cb18-27" data-line-number="27"> <span class="kw">def</span> initUI(<span class="va">self</span>): </a>
<a class="sourceLine" id="cb18-28" data-line-number="28"></a>
<a class="sourceLine" id="cb18-29" data-line-number="29"> <span class="va">self</span>.pbar <span class="op">=</span> QProgressBar(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb18-30" data-line-number="30"> <span class="va">self</span>.pbar.setGeometry(<span class="dv">30</span>, <span class="dv">40</span>, <span class="dv">200</span>, <span class="dv">25</span>)</a>
<a class="sourceLine" id="cb18-31" data-line-number="31"></a>
<a class="sourceLine" id="cb18-32" data-line-number="32"> <span class="va">self</span>.btn <span class="op">=</span> QPushButton(<span class="st">&#39;Start&#39;</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb18-33" data-line-number="33"> <span class="va">self</span>.btn.move(<span class="dv">40</span>, <span class="dv">80</span>)</a>
<a class="sourceLine" id="cb18-34" data-line-number="34"> <span class="va">self</span>.btn.clicked.<span class="ex">connect</span>(<span class="va">self</span>.doAction)</a>
<a class="sourceLine" id="cb18-35" data-line-number="35"></a>
<a class="sourceLine" id="cb18-36" data-line-number="36"> <span class="va">self</span>.timer <span class="op">=</span> QBasicTimer()</a>
<a class="sourceLine" id="cb18-37" data-line-number="37"> <span class="va">self</span>.step <span class="op">=</span> <span class="dv">0</span></a>
<a class="sourceLine" id="cb18-38" data-line-number="38"> </a>
<a class="sourceLine" id="cb18-39" data-line-number="39"> <span class="va">self</span>.setGeometry(<span class="dv">300</span>, <span class="dv">300</span>, <span class="dv">280</span>, <span class="dv">170</span>)</a>
<a class="sourceLine" id="cb18-40" data-line-number="40"> <span class="va">self</span>.setWindowTitle(<span class="st">&#39;QProgressBar&#39;</span>)</a>
<a class="sourceLine" id="cb18-41" data-line-number="41"> <span class="va">self</span>.show()</a>
<a class="sourceLine" id="cb18-42" data-line-number="42"> </a>
<a class="sourceLine" id="cb18-43" data-line-number="43"> </a>
<a class="sourceLine" id="cb18-44" data-line-number="44"> <span class="kw">def</span> timerEvent(<span class="va">self</span>, e):</a>
<a class="sourceLine" id="cb18-45" data-line-number="45"> </a>
<a class="sourceLine" id="cb18-46" data-line-number="46"> <span class="cf">if</span> <span class="va">self</span>.step <span class="op">&gt;=</span> <span class="dv">100</span>:</a>
<a class="sourceLine" id="cb18-47" data-line-number="47"> <span class="va">self</span>.timer.stop()</a>
<a class="sourceLine" id="cb18-48" data-line-number="48"> <span class="va">self</span>.btn.setText(<span class="st">&#39;Finished&#39;</span>)</a>
<a class="sourceLine" id="cb18-49" data-line-number="49"> <span class="cf">return</span></a>
<a class="sourceLine" id="cb18-50" data-line-number="50"> </a>
<a class="sourceLine" id="cb18-51" data-line-number="51"> <span class="va">self</span>.step <span class="op">=</span> <span class="va">self</span>.step <span class="op">+</span> <span class="dv">1</span></a>
<a class="sourceLine" id="cb18-52" data-line-number="52"> <span class="va">self</span>.pbar.setValue(<span class="va">self</span>.step)</a>
<a class="sourceLine" id="cb18-53" data-line-number="53"> </a>
<a class="sourceLine" id="cb18-54" data-line-number="54"></a>
<a class="sourceLine" id="cb18-55" data-line-number="55"> <span class="kw">def</span> doAction(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb18-56" data-line-number="56"> </a>
<a class="sourceLine" id="cb18-57" data-line-number="57"> <span class="cf">if</span> <span class="va">self</span>.timer.isActive():</a>
<a class="sourceLine" id="cb18-58" data-line-number="58"> <span class="va">self</span>.timer.stop()</a>
<a class="sourceLine" id="cb18-59" data-line-number="59"> <span class="va">self</span>.btn.setText(<span class="st">&#39;Start&#39;</span>)</a>
<a class="sourceLine" id="cb18-60" data-line-number="60"> <span class="cf">else</span>:</a>
<a class="sourceLine" id="cb18-61" data-line-number="61"> <span class="va">self</span>.timer.start(<span class="dv">100</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb18-62" data-line-number="62"> <span class="va">self</span>.btn.setText(<span class="st">&#39;Stop&#39;</span>)</a>
<a class="sourceLine" id="cb18-63" data-line-number="63"> </a>
<a class="sourceLine" id="cb18-64" data-line-number="64"> </a>
<a class="sourceLine" id="cb18-65" data-line-number="65"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">&#39;__main__&#39;</span>:</a>
<a class="sourceLine" id="cb18-66" data-line-number="66"> </a>
<a class="sourceLine" id="cb18-67" data-line-number="67"> app <span class="op">=</span> QApplication(sys.argv)</a>
<a class="sourceLine" id="cb18-68" data-line-number="68"> ex <span class="op">=</span> Example()</a>
<a class="sourceLine" id="cb18-69" data-line-number="69"> sys.exit(app.exec_())</a></code></pre></div>
<p>我们创建了一个水平的进度条和一个按钮，这个按钮控制进度条的开始和停止。</p>
<pre><code class="language-python">self.pbar = QProgressBar(self)</code></pre>
<p>新建一个<code>QProgressBar</code>构造器。</p>
<pre><code class="language-python">self.timer = QtCore.QBasicTimer()</code></pre>
<p>用时间控制进度条。</p>
<pre><code class="language-python">self.timer.start(100, self)</code></pre>
<p>调用<code>start()</code>方法加载一个时间事件。这个方法有两个参数：过期时间和事件接收者。</p>
<pre><code class="language-python">def timerEvent(self, e):
if self.step &gt;= 100:
self.timer.stop()
self.btn.setText(&#39;Finished&#39;)
return
self.step = self.step + 1
self.pbar.setValue(self.step)</code></pre>
<p>每个<code>QObject</code>和又它继承而来的对象都有一个<code>timerEvent()</code>事件处理函数。为了触发事件，我们重载了这个方法。</p>
<pre><code class="language-python">def doAction(self):
if self.timer.isActive():
self.timer.stop()
self.btn.setText(&#39;Start&#39;)
else:
self.timer.start(100, self)
self.btn.setText(&#39;Stop&#39;)</code></pre>
<p>里面的<code>doAction()</code>方法是用来控制开始和停止的。</p>
<p>程序展示：</p>
<figure>
<img class="whitelist" src="docs/PyQt5/images/6-qprogressbar.png" alt="QProgressBar" />
</figure>
<h2 id="日历">日历</h2>
<p><code>QCalendarWidget</code>提供了基于月份的日历插件，十分简易而且直观。</p>
<div class="sourceCode" id="cb24"><pre><code class="language-python"><a class="sourceLine" id="cb24-1" data-line-number="1"><span class="co">#!/usr/bin/python3</span></a>
<a class="sourceLine" id="cb24-2" data-line-number="2"><span class="co"># -*- coding: utf-8 -*-</span></a>
<a class="sourceLine" id="cb24-3" data-line-number="3"></a>
<a class="sourceLine" id="cb24-4" data-line-number="4"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb24-5" data-line-number="5"><span class="co">ZetCode PyQt5 tutorial </span></a>
<a class="sourceLine" id="cb24-6" data-line-number="6"></a>
<a class="sourceLine" id="cb24-7" data-line-number="7"><span class="co">This example shows a QCalendarWidget widget.</span></a>
<a class="sourceLine" id="cb24-8" data-line-number="8"></a>
<a class="sourceLine" id="cb24-9" data-line-number="9"><span class="co">Author: Jan Bodnar</span></a>
<a class="sourceLine" id="cb24-10" data-line-number="10"><span class="co">Website: zetcode.com </span></a>
<a class="sourceLine" id="cb24-11" data-line-number="11"><span class="co">Last edited: August 2017</span></a>
<a class="sourceLine" id="cb24-12" data-line-number="12"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb24-13" data-line-number="13"></a>
<a class="sourceLine" id="cb24-14" data-line-number="14"><span class="im">from</span> PyQt5.QtWidgets <span class="im">import</span> (QWidget, QCalendarWidget, </a>
<a class="sourceLine" id="cb24-15" data-line-number="15"> QLabel, QApplication, QVBoxLayout)</a>
<a class="sourceLine" id="cb24-16" data-line-number="16"><span class="im">from</span> PyQt5.QtCore <span class="im">import</span> QDate</a>
<a class="sourceLine" id="cb24-17" data-line-number="17"><span class="im">import</span> sys</a>
<a class="sourceLine" id="cb24-18" data-line-number="18"></a>
<a class="sourceLine" id="cb24-19" data-line-number="19"><span class="kw">class</span> Example(QWidget):</a>
<a class="sourceLine" id="cb24-20" data-line-number="20"> </a>
<a class="sourceLine" id="cb24-21" data-line-number="21"> <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb24-22" data-line-number="22"> <span class="bu">super</span>().<span class="fu">__init__</span>()</a>
<a class="sourceLine" id="cb24-23" data-line-number="23"> </a>
<a class="sourceLine" id="cb24-24" data-line-number="24"> <span class="va">self</span>.initUI()</a>
<a class="sourceLine" id="cb24-25" data-line-number="25"> </a>
<a class="sourceLine" id="cb24-26" data-line-number="26"> </a>
<a class="sourceLine" id="cb24-27" data-line-number="27"> <span class="kw">def</span> initUI(<span class="va">self</span>): </a>
<a class="sourceLine" id="cb24-28" data-line-number="28"> </a>
<a class="sourceLine" id="cb24-29" data-line-number="29"> vbox <span class="op">=</span> QVBoxLayout(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb24-30" data-line-number="30"></a>
<a class="sourceLine" id="cb24-31" data-line-number="31"> cal <span class="op">=</span> QCalendarWidget(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb24-32" data-line-number="32"> cal.setGridVisible(<span class="va">True</span>)</a>
<a class="sourceLine" id="cb24-33" data-line-number="33"> cal.clicked[QDate].<span class="ex">connect</span>(<span class="va">self</span>.showDate)</a>
<a class="sourceLine" id="cb24-34" data-line-number="34"> </a>
<a class="sourceLine" id="cb24-35" data-line-number="35"> vbox.addWidget(cal)</a>
<a class="sourceLine" id="cb24-36" data-line-number="36"> </a>
<a class="sourceLine" id="cb24-37" data-line-number="37"> <span class="va">self</span>.lbl <span class="op">=</span> QLabel(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb24-38" data-line-number="38"> date <span class="op">=</span> cal.selectedDate()</a>
<a class="sourceLine" id="cb24-39" data-line-number="39"> <span class="va">self</span>.lbl.setText(date.toString())</a>
<a class="sourceLine" id="cb24-40" data-line-number="40"> </a>
<a class="sourceLine" id="cb24-41" data-line-number="41"> vbox.addWidget(<span class="va">self</span>.lbl)</a>
<a class="sourceLine" id="cb24-42" data-line-number="42"> </a>
<a class="sourceLine" id="cb24-43" data-line-number="43"> <span class="va">self</span>.setLayout(vbox)</a>
<a class="sourceLine" id="cb24-44" data-line-number="44"> </a>
<a class="sourceLine" id="cb24-45" data-line-number="45"> <span class="va">self</span>.setGeometry(<span class="dv">300</span>, <span class="dv">300</span>, <span class="dv">350</span>, <span class="dv">300</span>)</a>
<a class="sourceLine" id="cb24-46" data-line-number="46"> <span class="va">self</span>.setWindowTitle(<span class="st">&#39;Calendar&#39;</span>)</a>
<a class="sourceLine" id="cb24-47" data-line-number="47"> <span class="va">self</span>.show()</a>
<a class="sourceLine" id="cb24-48" data-line-number="48"> </a>
<a class="sourceLine" id="cb24-49" data-line-number="49"> </a>
<a class="sourceLine" id="cb24-50" data-line-number="50"> <span class="kw">def</span> showDate(<span class="va">self</span>, date): </a>
<a class="sourceLine" id="cb24-51" data-line-number="51"> </a>
<a class="sourceLine" id="cb24-52" data-line-number="52"> <span class="va">self</span>.lbl.setText(date.toString())</a>
<a class="sourceLine" id="cb24-53" data-line-number="53"> </a>
<a class="sourceLine" id="cb24-54" data-line-number="54"> </a>
<a class="sourceLine" id="cb24-55" data-line-number="55"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">&#39;__main__&#39;</span>:</a>
<a class="sourceLine" id="cb24-56" data-line-number="56"> </a>
<a class="sourceLine" id="cb24-57" data-line-number="57"> app <span class="op">=</span> QApplication(sys.argv)</a>
<a class="sourceLine" id="cb24-58" data-line-number="58"> ex <span class="op">=</span> Example()</a>
<a class="sourceLine" id="cb24-59" data-line-number="59"> sys.exit(app.exec_())</a></code></pre></div>
<p>这个例子有日期组件和标签组件组成，标签显示被选中的日期。</p>
<pre><code class="language-python">cal = QCalendarWidget(self)</code></pre>
<p>创建一个<code>QCalendarWidget</code>。</p>
<pre><code class="language-python">cal.clicked[QDate].connect(self.showDate)</code></pre>
<p>选择一个日期时，<code>QDate</code>的点击信号就触发了，把这个信号和我们自己定义的<code>showDate()</code>方法关联起来。</p>
<pre><code class="language-python">def showDate(self, date):
self.lbl.setText(date.toString())</code></pre>
<p>使用<code>selectedDate()</code>方法获取选中的日期，然后把日期对象转成字符串，在标签里面显示出来。</p>
<p>程序展示：</p>
<figure>
<img class="whitelist" src="docs/PyQt5/images/6-calendar.png" alt="calendar" />
</figure>
Reference in New Issue View Git Blame Copy Permalink