? ? ? ?很多小伙伴接觸到了Qt編程，就是拖拽后就不處理了，心理想做出來一些界面不知道如何去做，其實qt 的 qss 是非常方便的，話不多說，先上圖吧：

? ??

這是一個非常簡單的一個界面，當我們鼠標碰到按鈕的時候：

輸入，賬號密碼后：

?程序的例子我放到云盤了，需要可以下載：

鏈接：qt程序? ?提取碼：j4pq?

首先，我們要屏蔽掉邊框欄，因為系統帶的不太好看，如下圖：

?

所以我們要屏蔽掉邊框，在你的構造函數添加：

Dialog::Dialog(QWidget *parent) :QDialog(parent),ui(new Ui::Dialog) {ui->setupUi(this);this->setWindowFlag(Qt::FramelessWindowHint); }

這樣就屏蔽掉了邊框欄，這個時候界面沒有辦法移動了，我們要加下面函數：

#ifndef DIALOG_H #define DIALOG_H#include <QDialog> #include <QMouseEvent> namespace Ui { class Dialog; }class Dialog : public QDialog {Q_OBJECT protected:void mousePressEvent(QMouseEvent *e);void mouseMoveEvent(QMouseEvent *e);void mouseReleaseEvent(QMouseEvent *e);public:explicit Dialog(QWidget *parent = nullptr);~Dialog();private:Ui::Dialog *ui;QPoint last; };#endif // DIALOG_H

對應的cpp文件為：

#include "dialog.h" #include "ui_dialog.h"void Dialog::mousePressEvent(QMouseEvent *e) {last= e->globalPos(); //獲取當前的點位置 }void Dialog::mouseMoveEvent(QMouseEvent *e) {int posX = e->globalX() - last.x();int posY = e->globalY() - last.y();last = e->globalPos(); //獲取當前位置move(x()+posX,y()+posY);}void Dialog::mouseReleaseEvent(QMouseEvent *e) {int posX = e->globalX() - last.x();int posY = e->globalY() - last.y();move(x()+posX,y()+posY); }Dialog::Dialog(QWidget *parent) :QDialog(parent),ui(new Ui::Dialog) {ui->setupUi(this);this->setWindowFlag(Qt::FramelessWindowHint); }Dialog::~Dialog() {delete ui; }

下面我們打開ui界面：

點擊界面，右鍵，選擇改變樣式，會出來一個界面，在這個界面中添加：

QDialog{background-color: rgb(42, 43, 40);color: rgb(255,0,0);font: 12pt "宋體"; }

background-color? ?是改變背景色? 后面的rgb是對應的顏色，如果你不知道顏色號，點擊下面圖：

color 是前景色， font 是字體，學過前端的都知道css ，其實qss 語法與css 基本相同，下面為了簡單寫把樣式表展示出來：

QLineEdit{background-color:rgb(68, 68, 68);border:0.5px groove rgb(85, 255, 255);border-radius:5px;color:rgb(0, 255, 255) } QPushButton{font: 12pt "楷體";background-color: rgb(42, 43, 40);color:rgb(85, 255, 255);border:0px groove gray;border-radius:5px;padding: 2px 4px;selection-color : rgb(85, 85, 85) }QPushButton:hover{background-color:rgb(85, 85, 85) }

?QPushButton:hover 就是觸發光標移動到按鈕的對背景色的改變。

?border 是邊框，設置為0px,就是無邊框.

?border-radius:5px??設置按鈕的圓角度

項目中的圖片是通過Qlabel 加載進來的，小伙伴們如有好看的圖片，可以自己添加，改變樣式，完成你心中較好的界面。

歡迎關注我的博客，后期還會有更多有意思的編程等著你喲！

總結

以上是生活随笔為你收集整理的10分钟学会 Qt 扁平化界面（qss 使用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。