這幾天沉迷Minecraft不能自拔奢驯，又快到了期末考碟摆，每次打開(kāi)啟動(dòng)器就有罪惡感。不過(guò)感覺(jué)這界面弄的不錯(cuò)叨橱，遲一點(diǎn)剛好要做一個(gè)桌面端的工具軟件典蜕，（這里吐槽electron.js生成的體積太大，做出來(lái)是方便罗洗，但用戶(hù)體驗(yàn)很差坝涮颉），于是就想研究一下這貨的UI怎么制作的伙菜，它用的應(yīng)該是Qt4

Mc啟動(dòng)器.png

DLL文件一覽.png

Python開(kāi)發(fā)速度還是很快的轩缤，所以打算用PyQt5進(jìn)行UI設(shè)計(jì)。

觀察這個(gè)程序贩绕，我們可以知道——

1. 沒(méi)有用系統(tǒng)自帶的窗口欄
2. 窗口邊緣處有陰影

因?yàn)橥耆珱](méi)有接觸過(guò)Qt火的，僅僅也只是聽(tīng)過(guò)。上搜索找了一些教程淑倾，完善的資料還是比較少的馏鹤，而且沒(méi)多少閱讀起來(lái)有爽爽的感覺(jué)。

但好歹先讓程序跑起來(lái)先娇哆。

網(wǎng)上教程還是有的湃累，這里就先不提Helloworld怎么跑起來(lái)的，或者你可以看下面的代碼碍讨。為了不跑題治力，這里先假設(shè)你已經(jīng)成功跑起來(lái)一個(gè)窗口。(為了舉例勃黍，我網(wǎng)上找的一個(gè)圖）

圖片來(lái)源于網(wǎng)絡(luò).png

去掉窗口

import sys

# 這里為了方便宵统，直接全部Import進(jìn)來(lái)
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *

class ExampleWindow(QWidget):

    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        # 去窗口邊框
        self.setWindowFlags(Qt.FramelessWindowHint)

if __name__ == '__main__':

    #sys.argv參數(shù)是一個(gè)來(lái)自命令行的參數(shù)列表。Python腳本可以在shell中運(yùn)行
    app = QApplication(sys.argv)

    w = ExampleWindow()
    sys.exit(app.exec_())

如無(wú)意外應(yīng)該就得到了：

無(wú)系統(tǒng)窗口欄的界面.png

但是呢覆获，這個(gè)時(shí)候窗口是無(wú)法拖動(dòng)的马澈，需要增加代碼：

    def mousePressEvent(self, event):
        if event.button()== Qt.LeftButton:
            self.m_drag=True
            self.m_DragPosition=event.globalPos()-self.pos()
            event.accept()

    def mouseMoveEvent(self, QMouseEvent):
        if QMouseEvent.buttons() and Qt.LeftButton:
            self.move(QMouseEvent.globalPos()-self.m_DragPosition)
            QMouseEvent.accept()

    def mouseReleaseEvent(self, QMouseEvent):
        self.m_drag=False

這里有一個(gè)Bug瓢省，就是在按鈕上面拖動(dòng)的時(shí)候就會(huì)產(chǎn)生位置偏差，待解決

制作窗口陰影

這里我查了一下PyQt5的API……箭券，可能是我眼拙净捅，沒(méi)有發(fā)現(xiàn)相關(guān)的API。不過(guò)辩块，在網(wǎng)上找到了一個(gè)博主的文章：

pyqt實(shí)現(xiàn)窗口邊框陰影效果(python)

里面的思路就是 ** 在窗口邊緣添加上半透明的陰影圖片(png) **
因?yàn)椴┲鳑](méi)有提供圖片（怨念）蛔六，所以，我只能自己用Ps切出來(lái)了废亭。

這里順帶想把想做的程序初步設(shè)計(jì)一下国章，方便切。然而在亂設(shè)計(jì)一通之后豆村，我還是選擇狗帶液兽，還是模板大法好，找個(gè)看的過(guò)去的模板來(lái)弄吧掌动。

（圖侵刪）

界面UI模板.png

然后給它加上投影

圖層.png

參數(shù)我是湊合湊合調(diào)的四啰，感覺(jué)還行

投影參數(shù).png

加上白色底圖看清楚一點(diǎn)：

效果圖.png

這個(gè)時(shí)候，應(yīng)該使用切圖工具粗恢，對(duì)邊緣進(jìn)行切割柑晒，八張圖分別是四個(gè)角的圖，以及四條邊緣的圖眷射。

image.png

我切圖用的不熟匙赞，就強(qiáng)行用裁剪弄下來(lái)了。唯一要注意的是妖碉，要在整個(gè)圖像范圍中把一整個(gè)角弄下來(lái)涌庭，說(shuō)的好像有點(diǎn)難懂。上圖：

放大坐下角細(xì)節(jié)圖欧宜，應(yīng)該是

image.png

而不是

錯(cuò)誤示范.png

如果不弄好坐榆，到時(shí)候角就會(huì)顯得既不自然，很假很假

哎鱼鸠，又跑題了猛拴，扯回來(lái)，把圖片剪下來(lái)：

ShadowPNG.png

當(dāng)然蚀狰，這么蛋疼的事情，有人疼過(guò)了职员，后來(lái)人就還是別這樣折騰了麻蹋。 前人栽樹(shù)，后人乘涼焊切，我把已經(jīng)扣好的圖放在這里了：

ShadowPNGs

添加代碼扮授，好吧芳室，我就是Ctrl+C、V之后發(fā)現(xiàn)這是PyQt4的 刹勃，報(bào)錯(cuò)堪侯，搜索之后發(fā)現(xiàn)** PyQt5是不存在 QStringList 和 QString的 ，直接用Python的 list 和 str 就好** （信息來(lái)源于stackoverflow_ImportError: cannot import name 'QStringList' in PyQt5）

所以修改之后荔仁，能成功跑起來(lái)了：

def drawShadow(self,painter):
        #繪制左上角伍宦、左下角、右上角乏梁、右下角次洼、上、下遇骑、左卖毁、右邊框
        self.pixmaps=list()
        self.pixmaps.append(str("./img/shadow/left_top.png"))
        self.pixmaps.append(str("./img/shadow/left_bottom.png"))
        self.pixmaps.append(str("./img/shadow/right_top.png"))
        self.pixmaps.append(str("./img/shadow/right_bottom.png"))
        self.pixmaps.append(str("./img/shadow/top_mid.png"))
        self.pixmaps.append(str("./img/shadow/bottom_mid.png"))
        self.pixmaps.append(str("./img/shadow/left_mid.png"))
        self.pixmaps.append(str("./img/shadow/right_mid.png"))

        painter.drawPixmap(0, 0, self.SHADOW_WIDTH, self.SHADOW_WIDTH, QPixmap(self.pixmaps[0]))   #左上角
        painter.drawPixmap(self.width()-self.SHADOW_WIDTH, 0, self.SHADOW_WIDTH, self.SHADOW_WIDTH, QPixmap(self.pixmaps[2]))   #右上角
        painter.drawPixmap(0,self.height()-self.SHADOW_WIDTH, self.SHADOW_WIDTH, self.SHADOW_WIDTH, QPixmap(self.pixmaps[1]))   #左下角
        painter.drawPixmap(self.width()-self.SHADOW_WIDTH, self.height()-self.SHADOW_WIDTH, self.SHADOW_WIDTH, self.SHADOW_WIDTH, QPixmap(self.pixmaps[3]))  #右下角
        painter.drawPixmap(0, self.SHADOW_WIDTH, self.SHADOW_WIDTH, self.height()-2*self.SHADOW_WIDTH, QPixmap(self.pixmaps[6]).scaled(self.SHADOW_WIDTH, self.height()-2*self.SHADOW_WIDTH)) #左
        painter.drawPixmap(self.width()-self.SHADOW_WIDTH, self.SHADOW_WIDTH, self.SHADOW_WIDTH, self.height()-2*self.SHADOW_WIDTH, QPixmap(self.pixmaps[7]).scaled(self.SHADOW_WIDTH, self.height()- 2*self.SHADOW_WIDTH)) #右
        painter.drawPixmap(self.SHADOW_WIDTH, 0, self.width()-2*self.SHADOW_WIDTH, self.SHADOW_WIDTH, QPixmap(self.pixmaps[4]).scaled(self.width()-2*self.SHADOW_WIDTH, self.SHADOW_WIDTH)) #上
        painter.drawPixmap(self.SHADOW_WIDTH, self.height()-self.SHADOW_WIDTH, self.width()-2*self.SHADOW_WIDTH, self.SHADOW_WIDTH, QPixmap(self.pixmaps[5]).scaled(self.width()-2*self.SHADOW_WIDTH, self.SHADOW_WIDTH))   #下

    def paintEvent(self, event):
        painter = QPainter(self)
        self.drawShadow(painter)
        painter.setPen(Qt.NoPen)
        painter.setBrush(Qt.white)
        painter.drawRect(QRect(self.SHADOW_WIDTH, self.SHADOW_WIDTH, self.width()-2*self.SHADOW_WIDTH, self.height()-2*self.SHADOW_WIDTH))

記得還要加上窗口背景透明：

def initUI(self):
    ...
    self.setAttribute(Qt.WA_TranslucentBackground)

然后運(yùn)行就有

最終效果圖.png

來(lái)一張對(duì)比，大致效果差不多

image.png

然后再添加一些