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

? ??

這是一個(gè)非常簡(jiǎn)單的一個(gè)界面，當(dāng)我們鼠標(biāo)碰到按鈕的時(shí)候：

輸入，賬號(hào)密碼后：

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

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

首先，我們要屏蔽掉邊框欄，因?yàn)橄到y(tǒng)帶的不太好看，如下圖：

?

所以我們要屏蔽掉邊框，在你的構(gòu)造函數(shù)添加：

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

這樣就屏蔽掉了邊框欄，這個(gè)時(shí)候界面沒有辦法移動(dòng)了，我們要加下面函數(shù)：

#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

對(duì)應(yīng)的cpp文件為：

#include "dialog.h" #include "ui_dialog.h"void Dialog::mousePressEvent(QMouseEvent *e) {last= e->globalPos(); //獲取當(dāng)前的點(diǎn)位置 }void Dialog::mouseMoveEvent(QMouseEvent *e) {int posX = e->globalX() - last.x();int posY = e->globalY() - last.y();last = e->globalPos(); //獲取當(dāng)前位置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界面：

點(diǎn)擊界面，右鍵，選擇改變樣式，會(huì)出來一個(gè)界面，在這個(gè)界面中添加：

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

background-color? ?是改變背景色? 后面的rgb是對(duì)應(yīng)的顏色，如果你不知道顏色號(hào)，點(diǎn)擊下面圖：

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

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 就是觸發(fā)光標(biāo)移動(dòng)到按鈕的對(duì)背景色的改變。

?border 是邊框，設(shè)置為0px,就是無邊框.

?border-radius:5px??設(shè)置按鈕的圓角度

項(xiàng)目中的圖片是通過Qlabel 加載進(jìn)來的，小伙伴們?nèi)缬泻每吹膱D片，可以自己添加，改變樣式，完成你心中較好的界面。

歡迎關(guān)注我的博客，后期還會(huì)有更多有意思的編程等著你喲！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。