PySide2----UI布局 案例练习

UI 设计

使用Qt designer 实现如下界面：

1. 公共界面
   右边是按钮区（宽200）
   左边是内容区、子界面区

2. 子界面
   
   设计界面布局时，元素之间的距离（layoutSpacing）可为0，然后通过qss控制间距

问题1：如下问题，可以忽略。

问题2：按钮部分没有完整展示

在右侧按钮区宽度一定，按钮设置外边距，会把按钮部分挤出， 如下图；增加总窗口的宽度无法解决，必须增加按钮区的宽度。

PySide2的控件与PyQt5 不能混合导入

程序逻辑

class App(QWidget):
    """
        传入一个子窗口，设置公共窗口
    """
    def __init__(self, ui_form, parent=None):
        super(App, self).__init__(parent=parent)
        # 传入的子窗口
        self.ui_form = ui_form

        self.resize(800, 600)
        desk = QDesktopWidget().geometry()
        width, height = desk.width(), desk.height()
        self.move(width//2 - self.width()//2, height//2 - self.height()//2)

    def init_ui(self):
        self.base_ui = Ui_base()
        self.base_ui.setupUi(self)


class Diag(App):
    def __init__(self, ui_form=Ui_diag(), parent=None):
        super(Diag, self).__init__(ui_form, parent)
        # 设置基本窗口
        self.init_ui()

        self.set_ui()

    def set_ui(self):
        self.ui_form.setupUi(self.base_ui.appPanel)
        self.setStyleSheet(get_global_style())

qss 样式

加入样式

/* 颜色参考 https://www.runoob.com/html/html-colorvalues.html */
QWidget#titlePanel QLabel#title {
    color: #000;
    font-size: 24px;
    font-family: "宋体";
    font-weight: bold;
    margin-left: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

QPushButton {
    min-height: 40px;
    max-height: 40px;
    min-width: 80px;
    padding: 0 12px;
}
/* 主要按钮 */
QWidget#rightButtonPanel {
    border: 1px solid pink;
}

QWidget#rightButtonPanel QPushButton[button_type="primary"] {
    border: 1px solid blue;
    border-radius: 4px;
    color: red;
}

QWidget#rightButtonPanel QPushButton[button_type="primary"]:hover {
    background-color: #D3D3D3;
    font-weight: bold;
}

QWidget#rightButtonPanel QPushButton[button_type="primary"]:pressed {
    background-color: #C0C0C0;
    font-weight: bold;
    border: 2px solid blue;
}

QWidget#rightButtonPanel QPushButton[button_type="primary"]:disabled {
    border: 1px solid #D3D3D3;
    border-radius: 4px;
    color: #D3D3D3;
}


/* 次要按钮 */
QWidget#rightButtonPanel QPushButton {
    border: 1px solid blue;
    border-radius: 4px;
    color: blue;
}

QWidget#rightButtonPanel QPushButton:hover {
    background-color: #D3D3D3;
    font-weight: bold;
}

QWidget#rightButtonPanel QPushButton:pressed {
    background-color: #C0C0C0;
    font-weight: bold;
    border: 2px solid blue;
}

QWidget#rightButtonPanel QPushButton:disabled {
    border: 1px solid #D3D3D3;
    border-radius: 4px;
    color: #D3D3D3;
}

/* appPanel 次要按钮 */
QWidget#appPanel {
    border: 1px solid red;
}

QWidget#appPanel QPushButton {
    border: 1px solid blue;
    border-radius: 4px;
    color: blue;
    margin-left: 0;
}

QWidget#appPanel QPushButton:hover {
    background-color: #D3D3D3;
    font-weight: bold;
}

QWidget#appPanel QPushButton:pressed {
    background-color: #C0C0C0;
    font-weight: bold;
    border: 2px solid blue;
}

QWidget#appPanel QPushButton:disabled {
    border: 1px solid #D3D3D3;
    border-radius: 4px;
    color: #D3D3D3;
}

/* appPanel 二级标题 */
QWidget#appPanel QLabel[objectName^='L2'] {
    font-family: "宋体";
    font-size: 24px;
    font-weight: bold;
    border: 1px solid red;
    margin-left: 16px;
    padding-left: 8px;
}

QWidget#appPanel QLabel[objectName^='L3'] {
    font: bold 20px "宋体"; /* 注意顺序 */
    padding: 8px;
    margin-left: 0;
    border: 1px solid red;
    border-image: url(imgs/dog.jpg); /* 执行文件的 相对路径 */
}

QWidget#appPanel QCheckBox {
    font: normal 16px "宋体";
}

/* 选框 */
QWidget#appPanel QCheckBox::indicator {
    width: 24px;
    height: 24px;
}
QWidget#appPanel QCheckBox::indicator:hover {
    /*border: 1px solid red;*/
}
QWidget#appPanel QCheckBox::indicator:pressed {
    width: 25px;
    height: 25px;
}
QWidget#appPanel QCheckBox::indicator:checked {
    image: url(:/imgs/dog.jpg); /* ?? */
}

/*线性渐变*/
#btn{
	background: qlineargradient(x1:0, x2:1, stop:0 gray, stop:0.5 white, stop:1 gray); /*水平渐变 设置三个渐变点*/
}
#btn2{
	background: qlineargradient(y1:0, y2:1, stop:0 gray, stop:0.5 white, stop:1 gray); /*垂直渐变 设置三个渐变点*/
}

#btn3{
	box-shadow: inset 0 1px 3px 1px red;  /*设置阴影， PySide2 中 不支持box-shadow */
}

stylesheet 更多参考

 

Qt程序无法运行

如下方式配置环境变量：

解决！

qt中展示二维码

使用qrcode 生成二维码

def setUI(self):
    """ 生成二维码并展示 """
    import qrcode
    import numpy as np

    url = "https://www.baidu.com"
    bar_code = qrcode.make(data=url)
    # 获取PIL.Image.Image对象
    img = bar_code.get_image()
    w, h = img.size
    # 获取数据
    data = np.array(img.getdata()).reshape(h, w)

    # 展示图像
    img_view = pg.ImageView(self)
    img_view.resize(self.width(), self.height())

    img_item = pg.ImageItem(data)
    img_view.addItem(img_item)

 

多个Qlabel 网格布局

多个QLabel 网格布局的空隙问题。

设置网格布局的水平间隔、垂直间隔为0，并取消一些格子的边框，避免边框线过黑。