纯手工打造UART版资料清洗工具之 Pyside2 GUI 大补帖 - Part A

笔者想要在网路上实在很难找到好用又齐全的PySide2教学大全,那乾脆自己做一份自己想要的大补帖出来。不然找到的不是不全,就是以残体字为主的半残型态,很难有参考价值。

  1. 关於GUI上的连动要怎麽设计? 笔者是善用Group Box所带来的好处

先看效果

作法

(取消)勾选checkbox

  • 直接使用statechanged就可以来判断状态 [Source Code (上)]
  • 连接到相对应的function (chkAutoRes/ chkTr) [Source Code (下)]
    • 将state 值传入後,使用QtCore.Qt.Checked做判断勾选及取消勾选时的应对方式
    • 依照状态判断是否启用Group Box
    • 将config资料夹中的档案列表取档名并直接列在下拉式选单中
    • 使用Label 做会发亮的指标

Source Code (上)

from PySide2 import QtGui, QtCore
class MainWindow(QMainWindow):

    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        ....
        ....
        self.ui.chk_autoRes.stateChanged.connect(self.chkAutoRes)
        self.ui.chk_iotr.stateChanged.connect(self.chkTr)
        ....
        ....

Source Code (下)

    def chkTr(self, state):
        if state == QtCore.Qt.Checked:
            self.ui.label_translate.setStyleSheet("background-color: aqua")
            self.ui.label_translate.setText(" Translate")
            self.ui.grb_translate.setEnabled(True)
            tProfiles = self.fn.listdir(".\\config")
            if not transProfiles is None:
                for idx in range(len(tProfiles)):
                    if "t_" in transProfiles[idx]:
                        self.ui.cmb_tProfile.addItem(tProfiles[idx][6:-5])
        else:
            self.ui.label_tlate.setStyleSheet("")
            self.ui.label_tlate.setText("")
            self.ui.cmb_tProfile.clear()
            self.ui.grb_tlate.setEnabled(False)
            self.ui.cmb_tlate.setCurrentText("")
def chkAutoRes(self, state):
    if state == QtCore.Qt.Checked:
        self.ui.grb_autoRes.setEnabled(True)
        f_UsrCMDSet = self.fn.listdir(".\\config")
        if not f_UsrCMDSet is None:
            for idx in range(len(f_UsrCMDSet)):
                if "f_" in f_UsrCMDSet[idx]:
                    self.ui.cmb_fUserConfig.addItem(f_UsrCMDSet[idx][5:-5])
    else:
        self.ui.grb_autoRes.setEnabled(False)
        self.ui.cmb_f_UserConfig.clear()
  1. 何时需要使用Grid 去做排版? Grid 是一定要用的吗?
    [Ans] 很多Python GUI程序相关的教学中都会特别提到Grid 这部分一定要放在最下面那层才可以,但经由笔者研究pyside2 後发现,除非想要做到不同解析度或程序可以藉由拖拉的方式做放大缩小功能,不然是可以不需要使用Grid 进行Layout相关的设计

  2. 要如何防止在Grid 上面设计时,每次使用的元件外观大小都会变形的问题及如何快速把没有Grid Layout的UI版面加入这个样式设计?
    [Ans]

    • 笔者是在不想变形的地方使用Groupbox 的形式, 可以从下面的效果中观察到 有使用Groupbox 内的元件即使拖拉到Grid中也不会被随意改变外观,但由於按钮没有放置在Gropbox中就会被强制改变外观大小
    • 开一个空白的UI文件档就可以进行快速搬移
      • 先把UI的大小设定成跟旧的一样
      • 拖拉Grid Layout 到旧的版面,拖拉到适当大小後选择复制
      • 贴到新的UI版面上
      • 选择并复制需要搬移的元件
      • 贴到新的UI版面上再做细部微调

效果如下:

  1. Label 要怎麽做成会发光的指标

作法:

  • UI 上先设定一个空白的Label 标签,不设定背景颜色
  • 当Checkbox 被勾选时
    • 指定Label的背景颜色
    • 设定文字
  • checkbox 取消勾选
    • 清楚Label的背景颜色
    • 设定文字为空

效果如下:

Source Code

if state == QtCore.Qt.Checked:
    self.ui.label_autoRes.setStyleSheet("background-color: aqua")
    self.ui.label_autoRes.setText("Auto Res")
else:
    self.ui.label_autoRes.setStyleSheet("")
    self.ui.label_autoRes.setText("")

StyleSheet实际上就是一个UI文件中的样式设计语法,其有非常多设定,但其实常用的就那几种而已 例如: 前(後)景颜色,边框 ....
这边只有介绍颜色的简单应用

参考资料


<<:  爬取多个页面

>>:  [Day25] 透过GCP实作(1/4):透过Cloud Function直接拉取资料

【Day 03】- 打针!打针!从 R0 注入的那件事!

Agenda 资安宣言 测试环境与工具 学习目标 技术原理与程序码 References 下期预告 ...

Day4_HTML语法1

HTML 5 通常有下列6个大部分 1.BOM 2.任何数目的注解与空白字元 3.DOCTYPE 4...

[DAY06] 开始用 Notebook 在 Azure Machine Learing 上写程序

DAY06 开始用 Notebook 在 Azure Machine Learing 上写程序 我们...

2021 资通讯高峰论坛 !

https://edm.bnext.com.tw/2021cpx/?utm_source=%E3%8...

DAY 14- 《公钥密码》-RSA(2)

"我想不到要讲什麽。" --- RSA演算法 演算法的准备步骤有五个,更准确来说...