【Python-GUI開發】四 pyqt5 UI扁平化設計

目錄

1、扁平化按鈕

2、無邊框窗口

3、按鈕加圖片

4、鼠標劃過按鈕變化

---

1、扁平化按鈕

扁平化不繪製按鈕的背景顏色和邊框，看起來就像和父控件在一個平面上，通過setFlat()來設置，效果對比如下所示：

stylesheet設置：

font: 9pt "等線";

border-color: rgb(0, 0, 0);

background-color: rgb(123, 139, 111);

color: rgb(255, 255, 255);

border-radius: 10px;

padding: 8;

扁平化後按鈕效果如下：

2、無邊框窗口

import sys
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QMainWindow, QApplication


class MainWIndow(QMainWindow):
    def __init__(self, parent=None):
        super(MainWIndow, self).__init__(parent)
        self.resize(400, 200)
        self.setWindowTitle('設置窗口樣式的例子')

        # 設置無邊框窗口樣式
        self.setWindowFlags(Qt.FramelessWindowHint)

        #子窗口，窗口無按鈕 ，但有標題，可註釋掉觀察效果
        self.setWindowFlags(Qt.SubWindow)

        self.setObjectName("MainWindow")
        self.setStyleSheet("#MainWindow{border-image:url(images/python.jpg);}")


if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = MainWIndow()
    win.show()
    sys.exit(app.exec_())

運行效果如圖
無邊框

子窗口，窗口無按鈕，但有標題

 

3、按鈕加圖片

stylesheet中設置：background-image: url(Src/Midea_logo.jpg);

 

4、鼠標劃過按鈕變化

在py代碼中輸入以下內容：

  self.pushButton.setStyleSheet("QPushButton{border-color: rgb(0, 0, 0);\nbackground-color: rgb(123, 139, 111);\ncolor: rgb(255, 255, 255);\nborder-radius: 10px;\npadding: 8;}"
                                                   "QPushButton:hover{border-color: rgb(0, 0, 0);\nbackground-color:rgb(255, 255, 255);\ncolor:  rgb(123, 139, 111);\nborder-radius: 10px;\npadding: 8;}")
      

主要在於對styleSheet進行配置

按鈕正常狀態： QPushButton{xxx}

按鈕劃過狀態：QPushButton:hover{xxx}

按鈕按下狀態：QPushButton:pressed{xxx}

按鈕選擇狀態：QPushButton:checked{xxx}

鼠標在按鈕外：

鼠標移動至按鈕內：