Qt實戰3.Qt仿Win10風格界面

1 實現方式？

之前臨時做的一個界面Demo，支持全局拖動，順便加了個單應用支持。由於本人開發使用QWidget居多，界面美化自然首選QSS，當然這需要一些QSS相關的知識，這里不做探討。

QSS稱為Qt Style Sheets也就是Qt樣式表，它是Qt提供的一種用來自定義控件外觀的機制。

首先用設計師搭建骨架，化妝前的界面是這樣的：

是不是很丑？沒關系，用QSS化個淡妝，瞬間高大上，不化個妝敢上大街？

2 QSS一下

通過QSS對按鈕、界面進行美化，廢話不多說，直接上酸菜。

#Widget {
    border-style: solid;
    border-radius: 3;
    background-color: #142735;
}
#Widget QLabel {
    color: white;
    font-family: 微軟雅黑;
    font-size: 14px;
}

#Widget .QPushButton {
    width: 20px;
    height: 20px;
    qproperty-flat: true;
    margin-right: 4px;
    border: none;
}

#pushButtonLogo {
    border-image: url(:/images/log.png) 0 0 0 0 stretch stretch;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
    qproperty-flat: true;
    font-family: 微軟雅黑;
}

QStackedWidget QPushButton {
    min-width: 100px;
    min-height: 45px;
    color: white;
    font-family: 微軟雅黑;
    font-size: 16px;
    border-style: solid;
    border-radius: 3;
}
QStackedWidget QPushButton:hover {
    color: white;
    background-color: #9061b3;
}
QStackedWidget QPushButton:checked {
    background-color: #9061b3;
    border-color: #555;
    color: white;
}
QStackedWidget #widgetContent {
    border: 1px solid lightgray;
}

QToolButton {
    min-width: 120px;
    min-height: 120px;
    max-width: 120px;
    max-height: 120px;
    color: white;
    font-family: 微軟雅黑;
    font-size: 16px;
    border-style: solid;
    border-radius: 3;
    background-color: #288ecc;
    icon-size: 64px;
}

QToolButton[class="CheckButton"] {
    min-width: 140px;
    min-height: 50px;
    max-width: 140px;
    max-height: 50px;
    color: white;
    font-family: 微軟雅黑;
    font-size: 16px;
    border-style: solid;
    border-radius: 3;
}

QToolButton:hover {
    background-color: #936eb4;
}

#pushButtonMenu {
    border-image: url(:/images/menu.png) 0 0 0 0 stretch stretch;
}

#pushButtonMenu:hover {
    border-image: url(:/images/menu-hover.png) 0 0 0 0 stretch stretch;
}

#pushButtonMinimize {
    border-image: url(:/images/minimize.png) 0 0 0 0 stretch stretch;
}

#pushButtonMinimize:hover {
    border-image: url(:/images/minimize-hover.png) 0 0 0 0 stretch stretch;
}

#pushButtonClose {
    border-image: url(:/images/close.png) 0 0 0 0 stretch stretch;
}

#pushButtonClose:hover {
    border-image: url(:/images/close-hover.png) 0 0 0 0 stretch stretch;
}

畫完淡妝后，界面漂亮不少，向萬人迷的目標邁進一大步。如果后期能夠再加入一些動畫效果，那會顯得更加專業。

3 總結

QSS使用簡單，很容易上手，熟悉CSS的朋友甚至直接就可以用。QSS本身其實還並不是最重要的，它只是一個工具，界面配色和圖標的搭配才是最核心的東西，就像使用同一支筆繪畫，大師畫出來的那叫作品，普通人畫出來的那叫練習作業。UI這個東西仁者見仁智者見智，對於非專業人士來說對一些優秀的界面進行仿照不失為一種良策。

4 下載

示例代碼