c++ Qt python pyqt 控件样式美化。

c++ Qt python pyqt 控件样式美化。,第1张

1:背景颜色渐变加透明

        您可以随意 *** 控渐变颜色,渐变方向,注意需要重写窗口移动事件

        #widget{background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgba(255,182,193,.7),stop:.5 rgb(176,224,230));}
        /*          背景颜色                          渐变方向                 从0开始渐变  颜色 透明度0.7   渐变到0.5结束渐变   */

class Main(QMainWindow):
    def __init__(self, parent=None):
        super(Main, self).__init__(parent)
        self.resize(1000, 600)
        widget = QWidget()
        self.widget_layout = QVBoxLayout(widget)
        widget.setObjectName("widget")
        self.setCentralWidget(widget)
        self.setAttribute(Qt.WA_TranslucentBackground)  # 窗体背景透明
        self.setWindowFlags(Qt.FramelessWindowHint)  # 无边框
        self.button()
        self.setStyleSheet('''
        #widget{background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgba(255,182,193,.7),stop:.5 rgb(176,224,230));}
        /*          背景颜色                          渐变方向                 从0开始渐变  颜色 透明度哦0.7   渐变到0.5结束渐变   */''') 

    def mousePressEvent(self, event):
        if event.button() == Qt.LeftButton:
            self.m_flag = True
            self.m_Position = event.globalPos() - self.pos()  # 获取⿏标相对窗⼝的位置
            event.accept()
            self.setCursor(QCursor(Qt.OpenHandCursor))  # 更改⿏标图标

    def mouseMoveEvent(self, QMouseEvent):
        if Qt.LeftButton and self.m_flag:
            self.move(QMouseEvent.globalPos() - self.m_Position)  # 更改窗⼝位置
            QMouseEvent.accept()

    def mouseReleaseEvent(self, QMouseEvent):
        self.m_flag = False
        self.setCursor(QCursor(Qt.ArrowCursor))
2:QPushButton 按钮样式-按钮图标靠左上右下

注意:如果想让按钮完全圆形,需要将圆角属性设置按钮宽高的50%,讲人话就是按钮宽高一半

button.setFixedSize(100, 100) 按钮宽度100 ,高度100

则圆角属性:border-radius:50px; 也可单独设置某个角

import sys

from PyQt5.QtCore import Qt, QSize
from PyQt5.QtGui import QCursor, QIcon, QPixmap
from PyQt5.QtWidgets import QApplication, QVBoxLayout, QHBoxLayout, QWidget, QMainWindow, QPushButton, QLabel


class Main(QMainWindow):
    def __init__(self, parent=None):
        super(Main, self).__init__(parent)
        self.resize(1000, 600)
        widget = QWidget()
        self.widget_layout = QVBoxLayout(widget)
        widget.setObjectName("widget")
        self.setCentralWidget(widget)
        self.setAttribute(Qt.WA_TranslucentBackground)  # 窗体背景透明
        self.setWindowFlags(Qt.FramelessWindowHint)  # 无边框
        self.button()
        self.setStyleSheet('''
        #widget{background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgba(255,182,193,.7),stop:.5 rgb(176,224,230));}
        /*          背景颜色                          渐变方向                 从0开始渐变  颜色 透明度哦0.7   渐变到0.5结束渐变   */

        ''')

    def button(self):
        """按钮样式"""
        button_layout = QHBoxLayout()
        self.widget_layout.addLayout(button_layout)
        button = QPushButton("普通按钮")
        button1 = QPushButton("样式按钮")
        button1.setStyleSheet('''
        QPushButton{border-radius:2px;background:rgb(211,211,211);font-family:'微软雅黑';color:rgb(255,182,193);font-size:18px;}
        /* 按钮圆角 2个像素              背景颜色                      字体                  字体颜色      字体大小      */  
        QPushButton:hover{border-radius:50px;background:rgb(100,149,237);font-family:'微软雅黑';color:rgb(255,255,255);font-size:16px;}
        /*鼠标指向按钮后按钮变化*/
           ''')
        button2 = QPushButton("图标按钮")
        button2.setIconSize(QSize(50, 50))
        button2.setIcon(QIcon("stop.png"))
        button3 = Buttons(text="图标按钮", img="stop.png", direction="top")
        button4 = Buttons(text="图标按钮", img="stop.png", direction="bottom")
        button5 = Buttons(text="图标按钮", img="stop.png", direction="right")
        button6 = QPushButton("右下圆角")
        button6.setStyleSheet("color:#ffffff;background:rgb(0,0,0);border-top-right-radius:20px;border-bottom-right-radius:20px;")
        button.setFixedSize(100, 100)
        button1.setFixedSize(100, 100)
        button2.setFixedSize(150, 100)
        button3.setFixedSize(150, 100)
        button4.setFixedSize(150, 100)
        button5.setFixedSize(150, 100)
        button6.setFixedSize(100, 100)
        button_layout.addWidget(button)
        button_layout.addWidget(button1)
        button_layout.addWidget(button6)
        button_layout.addWidget(button2)
        button_layout.addWidget(button3)
        button_layout.addWidget(button4)
        button_layout.addWidget(button5)

        button_layout.addStretch(3)

    def mousePressEvent(self, event):
        if event.button() == Qt.LeftButton:
            self.m_flag = True
            self.m_Position = event.globalPos() - self.pos()  # 获取⿏标相对窗⼝的位置
            event.accept()
            self.setCursor(QCursor(Qt.OpenHandCursor))  # 更改⿏标图标

    def mouseMoveEvent(self, QMouseEvent):
        if Qt.LeftButton and self.m_flag:
            self.move(QMouseEvent.globalPos() - self.m_Position)  # 更改窗⼝位置
            QMouseEvent.accept()

    def mouseReleaseEvent(self, QMouseEvent):
        self.m_flag = False
        self.setCursor(QCursor(Qt.ArrowCursor))


class Buttons(QPushButton):
    def __init__(self, parent=None, text="", img="", direction=None):
        super().__init__(parent=parent)
        if direction is None:
            return
        self.label_text = QLabel(text)
        self.label_text.setAlignment(Qt.AlignCenter)  # 字体居中
        self.label_img = QLabel()
        self.label_img.setFixedSize(50, 50)
        self.label_img.setScaledContents(True)  # 图片自适应
        self.label_img.setPixmap(QPixmap(img))
        self.label_text.setAttribute(Qt.WA_TransparentForMouseEvents, True)  # 设置控件不响应鼠标事件-穿透效果
        self.label_img.setAttribute(Qt.WA_TransparentForMouseEvents, True)  # 设置控件不响应鼠标事件-穿透效果
        if direction == "right":
            self.right()
        elif direction == "top" or direction == "bottom":
            self.top_bottom(direction)

    def right(self):
        layout = QHBoxLayout(self)
        layout.addWidget(self.label_text, 0, Qt.AlignCenter)
        layout.addWidget(self.label_img, 0, Qt.AlignCenter)

    def top_bottom(self, d):
        if d == "top":
            layout = QVBoxLayout(self)
            layout.addWidget(self.label_img, 0, Qt.AlignCenter)
            layout.addWidget(self.label_text, 0, Qt.AlignCenter)
        else:
            layout = QVBoxLayout(self)
            layout.addWidget(self.label_text, 0, Qt.AlignCenter)
            layout.addWidget(self.label_img, 0, Qt.AlignCenter)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = Main()
    win.show()
    sys.exit(app.exec_())
 3:QLabel 标签样式

标签添加下划线,添加图片。添加动图,跳转网页

 def label(self):
        """标签样式"""
        label_layout = QHBoxLayout(self.widget)
        url_label = QLabel()
        url_label.setOpenExternalLinks(True)  # 允许跳转网页
        url_label.setText(
            '百度:'
            ''
            'www.baidu.com'
            '')
        label = QLabel("普通标签")
        label1 = QLabel()
        label1.setScaledContents(True)  # 图片自动适应
        label1.setPixmap(QPixmap("Fail.png"))

        label2 = QLabel()
        label2.setScaledContents(True)  # 图片自动适应
        wait_gif = QMovie('Wait.gif')  # 创建动图对象
        label2.setMovie(wait_gif)  # label设置动图
        wait_gif.start()  # 开始播放动图

        label3 = QLabel("样式标签")
        label3.setStyleSheet('''
                QLabel{text-decoration: underline;background-color: transparent;color: #1E90FF;font-family: 'SimHei', serif;font-size: 18px;}
                /*            字体下划线                             背景颜色透明          字体颜色         字体:黑体                   字体大小  */''')
        label4 = QLabel("鼠标指向标签时")
        label4.setStyleSheet('''
        QLabel:hover{background-color: #9370DB	;color: #ffffff;font-family: 'SimHei', serif;font-size: 18px;}
        
        ''')
4:下拉菜单QComboBox

        combox = QComboBox()
        combox.addItems(["张三","李四","王五","小红","小明"])
        combox.setStyleSheet('''
            QComboBox{combobox-popup:0;height:25px;width:80px;border-style:none;font-size:12px;font-family:微软雅黑;color:rgb(0,0,0);border-radius:0px;}
            /*                               控件宽高                               字体大小                           字体颜色           圆角         */
            QComboBox:down-arrow{border: none;background: transparent;image: url("x.png");}
             /* 背景透明 箭头图标*/
            QComboBox:drop-down{border: none;subcontrol-position: right center;subcontrol-origin: padding;}
                  /* 箭头位置右 居中*/''')
 5:旋转框QSpinBox

        整数,小数,自定义中文,前后穿插字符

import sys

from PyQt5.QtCore import Qt, QSize
from PyQt5.QtGui import QCursor, QIcon, QPixmap, QMovie
from PyQt5.QtWidgets import QApplication, QSpinBox, QVBoxLayout, QComboBox, QHBoxLayout, QWidget, QMainWindow, \
    QPushButton, QLabel, QDoubleSpinBox


class Main(QMainWindow):
    def __init__(self, parent=None):
        super(Main, self).__init__(parent)
        self.resize(1000, 600)
        self.widget = QWidget()
        self.widget.setObjectName("widget")
        self.setCentralWidget(self.widget)
        self.setAttribute(Qt.WA_TranslucentBackground)  # 窗体背景透明
        self.setWindowFlags(Qt.FramelessWindowHint)  # 无边框

        layout = QHBoxLayout(self.widget)

        spinbox = QSpinBox()
        myspinbox = StrSpinBox()
        myspinbox.setRange(0,2)
        myspinbox.setFixedSize(100, 30)
        spinbox.setFixedSize(60, 30)
        douspinbox = QDoubleSpinBox()
        spinbox1 = QSpinBox()
        spinbox2 = QSpinBox()

        spinbox.setObjectName("SpinBox")
        myspinbox.setObjectName("SpinBox")
        douspinbox.setObjectName("SpinBox")
        spinbox1.setObjectName("SpinBox")
        spinbox2.setObjectName("SpinBox")
        spinbox1.setPrefix("$   ")
        spinbox2.setSuffix("元")

        layout.addWidget(spinbox)
        layout.addWidget(myspinbox)
        layout.addWidget(douspinbox)
        layout.addWidget(spinbox1)
        layout.addWidget(spinbox2)
        layout.addStretch(3)
        self.setStyleSheet('''
        #widget{background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgba(255,182,193,.7),stop:.5 rgb(176,224,230));}
        /*          背景颜色                          渐变方向                 从0开始渐变  颜色 透明度哦0.7   渐变到0.5结束渐变   */
        
        
        
        #SpinBox {padding-top: 2px;padding-bottom: 2px;padding-left: 4px;padding-right: 15px;border: 1px solid rgb(0,0,0);border-radius: 3px;color: rgb(200,200,200);background-color: rgb(255,255,255);selection-color: rgb(235,235,235);selection-background-color: rgb(83,121,180);font-family: "Microsoft Yahei";font-size: 12px;}
        /*             文字距离顶部             文字距离底部          文字距离左  文字距离右               边框线像素    边框线颜色         边框圆角         字体颜色                       背景颜色                               选择时的字体颜色               选择时焦点背景颜色                              字体                            字体大小         */
        #SpinBox:hover {background-color: rgb(105,105,105);}
        /*鼠标指向时背景颜色*/
        #SpinBox::up-button { /* 向上按钮 */
        subcontrol-origin: border; /* 起始位置 */
        subcontrol-position: top right; /* 居于右上角 */
        border: none; width: 12px;margin-top: 2px;margin-right: 3px;margin-bottom: 0px;}
        #SpinBox::up-button:hover {border: none;}
        #SpinBox::up-arrow { /* 向上箭头 */
        image: url(s.png);}
        #SpinBox::down-button { /* 向下按钮 */
        subcontrol-origin: border;subcontrol-position: bottom right; border: none;width: 12px;margin-top: 0px;margin-right: 3px;margin-bottom: 2px;}
        #SpinBox::down-button:hover { border: none;}
        #SpinBox::down-arrow { /* 向下箭头 */
        image: url(x.png);}

        ''')

    def mousePressEvent(self, event):
        if event.button() == Qt.LeftButton:
            self.m_flag = True
            self.m_Position = event.globalPos() - self.pos()  # 获取⿏标相对窗⼝的位置
            event.accept()
            self.setCursor(QCursor(Qt.OpenHandCursor))  # 更改⿏标图标

    def mouseMoveEvent(self, QMouseEvent):
        if Qt.LeftButton and self.m_flag:
            self.move(QMouseEvent.globalPos() - self.m_Position)  # 更改窗⼝位置
            QMouseEvent.accept()

    def mouseReleaseEvent(self, QMouseEvent):
        self.m_flag = False
        self.setCursor(QCursor(Qt.ArrowCursor))


class StrSpinBox(QSpinBox):
    def __init__(self, father=None):
        super().__init__(father)

    def textFromValue(self, v: int):  # 自定义格式

        shape = ["张三", "小红", "小明"]
        return shape[v]


if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = Main()
    win.show()
    sys.exit(app.exec_())
6:文本输入框QTextEdit

边框线设置

import sys

from PyQt5.QtCore import Qt, QSize
from PyQt5.QtGui import QCursor, QIcon, QPixmap, QMovie, QTextCursor
from PyQt5.QtWidgets import QApplication, QSpinBox, QVBoxLayout, QComboBox, QHBoxLayout, QWidget, QMainWindow, \
    QPushButton, QLabel, QDoubleSpinBox, QTextEdit


class Main(QMainWindow):
    def __init__(self, parent=None):
        super(Main, self).__init__(parent)
        self.resize(1000, 600)
        self.widget = QWidget()
        self.widget.setObjectName("widget")
        self.setCentralWidget(self.widget)
        self.setAttribute(Qt.WA_TranslucentBackground)  # 窗体背景透明
        self.setWindowFlags(Qt.FramelessWindowHint)  # 无边框

        layout = QVBoxLayout(self.widget)

        deit = QTextEdit()
        deit.setText("跟我学QT")
        deit.setAlignment(Qt.AlignCenter)  # 文本居中, 也可以上下左右
        deit.setReadOnly(True)  # 文本内容只读 不可编辑
        deit.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)  # 隐藏水平滚动条
        deit.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)  # 隐藏垂直滚动条
        deit.append("添加内容")  # 添加内容
        deit.moveCursor(QTextCursor.End)  # 光标末尾
        deit.moveCursor(QTextCursor.StartOfLine)  # 光标换行
        deit.setFixedSize(500, 200)


        deit.setStyleSheet('''
        QTextEdit{font-family: 'SimHei', serif;font-size: 14px;background-color:#ffffff; color:#000000}
        QTextEdit{
        border-width:2px 5px 10px 15px;/*边框线上 右 下 左 像素*/
        border-style:solid;/*  边框样式属性 none  无边框   dotted  点状 dashed  虚线  solid  实线  double  双实线 */
        border-color:#FFC0CB #DC143C #8B008B #000000;/*边框线上 右 下 左 颜色*/}''')


        layout.addWidget(deit)
        self.setStyleSheet('''
        #widget{background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 rgba(255,182,193,.7),stop:.5 rgb(176,224,230));}
        /*          背景颜色                          渐变方向                 从0开始渐变  颜色 透明度哦0.7   渐变到0.5结束渐变   */        ''')

    def mousePressEvent(self, event):
        if event.button() == Qt.LeftButton:
            self.m_flag = True
            self.m_Position = event.globalPos() - self.pos()  # 获取⿏标相对窗⼝的位置
            event.accept()
            self.setCursor(QCursor(Qt.OpenHandCursor))  # 更改⿏标图标

    def mouseMoveEvent(self, QMouseEvent):
        if Qt.LeftButton and self.m_flag:
            self.move(QMouseEvent.globalPos() - self.m_Position)  # 更改窗⼝位置
            QMouseEvent.accept()

    def mouseReleaseEvent(self, QMouseEvent):
        self.m_flag = False
        self.setCursor(QCursor(Qt.ArrowCursor))




if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = Main()
    win.show()
    sys.exit(app.exec_())
7:滚动条QScrollArea

        Scroll.setStyleSheet('''
        QScrollArea{border:none;background-color:rgb(235,235,235);}
        QScrollArea QScrollBar:vertical{width:12px;background:transparent;margin:0px,1px,0px,1px;padding-top:0px;padding-bottom:0px;border-radius:6px;}
        QScrollArea QScrollBar::handle:vertical{background:#DCDCDC;border-radius:6px;}
        QScrollArea QScrollBar::handle:vertical:hover{background:#808080;border-radius:6px;}
        QScrollArea QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background:transparent;border-radius:6px;}/*设置滑块滑动后端槽的背景透明*/
        QScrollArea QScrollBar::add-line:vertical,QScrollBar::sub-line:vertical{height:0px;width:0px;}/*去掉上下箭头*/
        ''')
 8:分割线QFrame

frame = QFrame()  # 分割线
frame.setMaximumSize(2, 35)
frame.setFrameShape(QFrame.VLine)  # 设置垂直平方向
frame.setStyleSheet(" QFrame {background: #A9A9A9;color: #A9A9A9;} /*顶部导航栏 分割线*/")
       

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/langs/1353068.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-14
下一篇2022-06-14

发表评论

登录后才能评论

评论列表(0条)

    保存