pyqt图形化显示—3.常用控件

一切都过去了 發表於 2026-1-7 12:11:00

<p>前面已经能够通过组合构建一个基础的能交互的ui了，接下来就是丰富界面了，一些常用控件走起~</p>
<h1>下拉框</h1>
<h2>界面</h2>
<p>首先导入对应库</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">from</span> PySide6.QtWidgets <span style="color: rgba(0, 0, 255, 1)">import</span>QComboBox, QVBoxLayout</pre>
</div>
<div>QComboBox是下拉框的列表库，QVBoxLayout是垂直布局库，不使用垂直布局没办法表现下拉列表</div>
<div>下面就是构建一个下拉框了</div>
<div>
<div class="cnblogs_code">
<pre>cb = QComboBox()<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建下拉框</span>
cb.addItems([<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">a</span><span style="color: rgba(128, 0, 0, 1)">'</span>,<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">b</span><span style="color: rgba(128, 0, 0, 1)">'</span>,<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">c</span><span style="color: rgba(128, 0, 0, 1)">'</span>,<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">d</span><span style="color: rgba(128, 0, 0, 1)">'</span>])<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 添加选项</span>
<span style="color: rgba(0, 0, 0, 1)">
self.setWindowTitle(</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">下拉框</span><span style="color: rgba(128, 0, 0, 1)">'</span>)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置窗口标题</span>
ml = QVBoxLayout()<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建主布局</span>
ml.addWidget(cb)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 将下拉框添加到主布局中</span>
self.setLayout(ml)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置主布局</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1677113/202601/1677113-20260107105523632-1591184345.png"></p>
<p>界面属性和基础空间一样，可以通过QT Designer找属性设置 </p>
<p>那么页面ui完成，下面就是交互了</p>
</div>
<h2>信号</h2>
<p>常用的有以下两种</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">cb.currentTextChanged.connect(self.test)
cb.currentIndexChanged.connect(self.test)</span></pre>
</div>
<p>表示选项变化时，发出信号，触发test函数</p>
<p>不过这两个也是有一些细微差别的，返回的内容是有所不同的</p>
<p>我们用test函数测试一下</p>
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 0, 255, 1)">def</span><span style="color: rgba(0, 0, 0, 1)"> test(self,x):
   </span><span style="color: rgba(0, 0, 255, 1)">print</span>(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">当前选项：</span><span style="color: rgba(128, 0, 0, 1)">'</span>, x)</pre>
</div>
<div>currentTextChanged的信号触发时候，会返回选项的内容     　　<img src="https://img2024.cnblogs.com/blog/1677113/202601/1677113-20260107110032000-426071503.png"></div>
<div>currentIndexChanged的信号触发时，会返回选项在列表的位置【下标】　　　　<img src="https://img2024.cnblogs.com/blog/1677113/202601/1677113-20260107110146737-1304694408.png"></div>
<div>当然由于这个信号是变化时候出发的，也可以使用cb.currentText()读取当前选项</div>
<h1>选择框</h1>
<h2>界面</h2>
<div>导入库</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">from</span> PySide6.QtWidgets <span style="color: rgba(0, 0, 255, 1)">import</span> QCheckBox, QVBoxLayout</pre>
</div>
<p>QCheckBox就是这个选择框的库啦</p>
<p>界面ui类似于上面的下拉框，不过由于是选择框的形式，只有是否两种状态，所以只能填入一个元素</p>
<div class="cnblogs_code">
<pre>cb = QCheckBox(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">测试一下</span><span style="color: rgba(128, 0, 0, 1)">'</span>)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建选择框</span>
<span style="color: rgba(0, 0, 0, 1)">

self.setWindowTitle(</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">选择框</span><span style="color: rgba(128, 0, 0, 1)">'</span>)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置窗口标题</span>
ml = QVBoxLayout()<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建主布局</span>
ml.addWidget(cb)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 将选择框添加到主布局中</span>
self.setLayout(ml)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置主布局</span></pre>
</div>
<p>创建选择框，添加得到布局中显示</p>
<p><img src="https://img2024.cnblogs.com/blog/1677113/202601/1677113-20260107112020193-2085695740.png"></p>
<h2>信号</h2>
</div>
<div>由于只有是否两种状态，信号上就没有那么花里胡哨了只有一个</div>
<div>
<div class="cnblogs_code">
<pre>cb.stateChanged.connect(self.test)</pre>
</div>
<p>状态改变就触发对应函数响应，返回值是一个整数</p>
<p>测试了一下这个选择框有结果，选择返回结果为2，不选择返回结果为0【也许还有半选的选项】　　　　<img src="https://img2024.cnblogs.com/blog/1677113/202601/1677113-20260107111902463-245888651.png"></p>
<div class="cnblogs_code">
<pre>cb.stateChanged.connect(<span style="color: rgba(0, 0, 255, 1)">lambda</span> :<span style="color: rgba(0, 0, 255, 1)">print</span>(cb.isChecked()))</pre>
</div>
<p>也可以使用cb.isChecked()检测是否被选中，返回值为True和False，选中为True　　　　 <img src="https://img2024.cnblogs.com/blog/1677113/202601/1677113-20260107112441216-1278436926.png"></p>
<h1>单选框</h1>
<h2>界面</h2>
<p>导入库</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">from</span> PySide6.QtWidgets <span style="color: rgba(0, 0, 255, 1)">import</span> QRadioButton, QButtonGroup, QVBoxLayout, </pre>
</div>
<div>QRadioButton库是单选框的库；QButtonGroup是选项按钮组的库，后续解决一些逻辑问题；QVBoxLayout是垂直布局库</div>
<div>下面就是单选框的ui设置了</div>
<div>
<div class="cnblogs_code">
<pre>    lb1 = QLabel(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">表头1</span><span style="color: rgba(128, 0, 0, 1)">'</span>)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 添加选项标题</span>

   <span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建选项按钮</span>
   btn1 = QRadioButton(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">选项1</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)
   btn2 </span>= QRadioButton(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">选项2</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)
   btn3 </span>= QRadioButton(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">选项3</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)

   ml </span>= QVBoxLayout()<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建主布局</span>
   <span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 添加到主布局中</span>
<span style="color: rgba(0, 0, 0, 1)">    ml.addWidget(lb1)
   ml.addWidget(btn1)
   ml.addWidget(btn2)
   ml.addWidget(btn3)
   self.setLayout(ml)</span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置主布局</span></pre>
</div>
<p>由于是单选框那么就出现非此即彼的关系如下图，我只能在三个选项中选择一个　　<img src="https://img2024.cnblogs.com/blog/1677113/202601/1677113-20260107115355829-969048541.png"></p>
<p>但只是如同上图一样一个表头三个选项那还好，如果两个表头，三个表头，我需要在多个问题中选择答案，那么这个非此即彼的关系就会让我们的选项总是只存在一个。关于这个逻辑问题就需要QButtonGroup来解决了，把特定的按钮进行组合，在这个组合内存在非此即彼的关系，与组合外无关。</p>
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_2737df6e-a675-4047-a6b8-abec31b7a48b" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_2737df6e-a675-4047-a6b8-abec31b7a48b" class="cnblogs_code_hide">
<pre>    self.group1 = QButtonGroup(self)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建单选框组</span>
<span style="color: rgba(0, 0, 0, 1)">
   lb1 </span>= QLabel(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">表头1</span><span style="color: rgba(128, 0, 0, 1)">'</span>)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 添加选项标题</span>

   <span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建选项按钮</span>
   btn1 = QRadioButton(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">选项1</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)
   btn2 </span>= QRadioButton(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">选项2</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)
   btn3 </span>= QRadioButton(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">选项3</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)

   </span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 添加选项到单选框组中</span>
<span style="color: rgba(0, 0, 0, 1)">    self.group1.addButton(btn1)
   self.group1.addButton(btn2)
   self.group1.addButton(btn3)

   </span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建布局</span>
   h1 = QVBoxLayout()<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建布局</span>
   <span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 添加到布局中</span>
<span style="color: rgba(0, 0, 0, 1)">    h1.addWidget(lb1)
   h1.addWidget(btn1)
   h1.addWidget(btn2)
   h1.addWidget(btn3)

   ml </span>= QVBoxLayout()<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建主布局</span>
   ml.addLayout(h1)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 布局添加到主布局中</span>
<span style="color: rgba(0, 0, 0, 1)">
   self.setLayout(ml)</span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置主布局</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>通过self.组合名 = QButtonGroup(self)创建按钮组合，self.组合名.addButton(按钮名)把按钮添加到组合内，实现组合内的逻辑关系</p>
<p>虽然界面是一致的，但多个表头的逻辑关系已经发生了区分</p>
<p>checkedButton 函数查看按钮是否被选中，有时候也是有用的</p>
</div>
<h2>信号</h2>
<p>由于上述已经将对应按钮进行了分组，那么我们可以直接对组进行信号处理</p>
<div class="cnblogs_code">
<pre>self.group1.buttonClicked.connect(self.test)</pre>
</div>
<div>self.组合名.buttonClicked.connect(响应函数) 作用是该组合按钮被点击，触发对应函数响应，返回值是按钮名称地址，需要转换一下得到按钮有名称　　　　<img alt="image" loading="lazy" src="https://img2024.cnblogs.com/blog/1677113/202601/1677113-20260107120716858-1646981521.png"></div>
<div>
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 0, 255, 1)">def</span><span style="color: rgba(0, 0, 0, 1)"> test(self,x):
   </span><span style="color: rgba(0, 0, 255, 1)">print</span>(x.text())</pre>
</div>
<h1> 文本框</h1>
<p>文本框一般有两种形式一种是富文本框（QTextEdit），类似于ppt那种文本框可以插入图片，表格啊甚至HTML格式；另一种是纯文本框（QPlainTextEdit），只应用于纯文本。两者各有优劣，前者文本框内容表现更丰富，但相对的占用的资源就多；后者纯文本，对于大量文本处理响应更快</p>
<h2>界面</h2>
<p>导入库</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">from</span> PySide6.QtWidgets <span style="color: rgba(0, 0, 255, 1)">import</span> QTextEdit, QPlainTextEdit</pre>
</div>
<p>已经介绍了一个是富文本框，一个是纯文本框</p>
<p>下面就是设置和属性部分了，作为对比两个文本框同时显示，上面为富文本框，下面为纯文本框</p>
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_d9d384b1-11e3-4b0f-97a1-153a47d78db1" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_d9d384b1-11e3-4b0f-97a1-153a47d78db1" class="cnblogs_code_hide">
<pre>    text1 = QTextEdit()<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建文本框</span>
   text1.setHtml(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)"><h1>标题</h1><b>加粗</b><i>斜体</i><u>下划线</u></span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)
   </span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">text1.setMarkdown('# 标题\n**加粗** *斜体* _下划线_')</span>
   <span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">text1.setText('测试一下')</span>
   <span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">text1.setPlainText('测试一下')</span>
<span style="color: rgba(0, 0, 0, 1)">
   text2 </span>= QPlainTextEdit()<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建文本框</span>
   text2.setPlainText(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)"><h1>标题</h1><b>加粗</b><i>斜体</i><u>下划线</u></span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)

   ml </span>= QVBoxLayout()<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建主布局</span>
   ml.addWidget(text1)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 添加到主布局中</span>
<span style="color: rgba(0, 0, 0, 1)">    ml.addWidget(text2)
   self.setLayout(ml)</span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置主布局</span></pre>
</div>
<span class="cnblogs_code_collapse">文本框</span></div>
<p><img alt="image" width="315" height="489" loading="lazy" src="https://img2024.cnblogs.com/blog/1677113/202601/1677113-20260107130549885-1885408672.png"></p>
<p>通过对比就可以发现两者的区别，同样的在属性上富文本框的属性会更多一些，超链接啊，图片啊等等，可以在文档中查到</p>
<p>.appendPlainText('xx')  在文本框结尾添加文本 ‘xx’</p>
<div>.clear() 清除等等等等</div>
<h2>信号</h2>
<p>常用的就一个textChanged 文本变化时触发响应，无返回值</p>
</div>
<h1>滑条</h1>
<h2>界面</h2>
<p>导入库</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">from</span> PySide6.QtWidgets <span style="color: rgba(0, 0, 255, 1)">import</span><span style="color: rgba(0, 0, 0, 1)"> QSlider
</span><span style="color: rgba(0, 0, 255, 1)">from</span> PySide6.QtCore <span style="color: rgba(0, 0, 255, 1)">import</span> Qt <span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">枚举类需要使用</span></pre>
</div>
<p>下面就是设置参数和属性了</p>
<div class="cnblogs_code">
<pre>sd = QSlider(Qt.Orientation.Horizontal)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 创建水平滑条</span>
sd.setTickPosition(QSlider.TickPosition.TicksRight)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置滑条刻度位置</span>
sd.setTickInterval(10)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置滑条刻度间隔</span>
sd.setMinimum(0)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置滑条的最小值</span>
sd.setMaximum(100)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置滑条的最大值</span>
<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> sd.setRange(0, 100)# 设置滑条的范围</span>
sd.setSingleStep(5)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置滑条的单步值</span>
sd.setValue(50)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 设置滑条的初始值</span></pre>
</div>
<p>设置完成后添加到布局内显示</p>
<p><img src="https://img2024.cnblogs.com/blog/1677113/202601/1677113-20260107132655121-787061290.png"></p>
<p> QSlider　　如果不设置那么结果为垂直滑条</p>
<div>setTickPosition　　可以设置刻度的位置参数如下</div>
<div>　　参数：　  NoTicks　　　　　 ——>无刻度</div>
<div>　　　　　　TicksBothSides　　——>两侧刻度</div>
<div>　　　　　　TicksAbove　　　   ——>上侧刻度</div>
<div>　　　　　　TicksBelow　　　   ——>下侧刻度</div>
<div>
<div>　　　　　　TicksLeft　　　　　——>左侧刻度</div>
<div>
<div>　　　　　　TicksRight　　　     ——>右侧刻度</div>
</div>
</div>
<h2>信号</h2>
<div class="cnblogs_code">
<pre>sd.valueChanged.connect(self.test)<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 连接滑条的valueChanged信号到槽函数</span></pre>
</div>
<p>数值发生改变时候，对应函数响应</p>
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 0, 255, 1)">def</span><span style="color: rgba(0, 0, 0, 1)"> test(self):
   widget </span>= self.sender()<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 获取发送信号的对象</span>
   <span style="color: rgba(0, 0, 255, 1)">print</span>(f<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">滑条的值已改变：{widget.value()}</span><span style="color: rgba(128, 0, 0, 1)">'</span>)</pre>
</div>
<p>注意返回值是对应的刻度数值</p>
<p><img src="https://img2024.cnblogs.com/blog/1677113/202601/1677113-20260107133638157-1757383508.png"></p>
<div>self.sender() 用于获取该信号是由那个变量发送的，方便大型项目多个同类型变量的逻辑处理</div>
<p> </p>
</div><br><br>
来源：https://www.cnblogs.com/berserker-slst/p/19451552

頁: [1]

琼殿技术论坛's Archiver

pyqt图形化显示—3.常用控件