Qt之界面實現技巧

原創 lhq_215 2018-09-04 04:08

總結一下，在開發Qt的過程中的一些技巧！可遇而不可求。。。

一、主界面
1、窗口 最小化 最大化 關閉按鈕、顯示狀態自定義


    setWindowFlags(Qt::CustomizeWindowHint);
    setWindowFlags(Qt::WindowCloseButtonHint); //只要關閉按鈕
    setWindowFlags(Qt::WindowFlags type)
    Qt::FrameWindowHint:沒有邊框的窗口
    Qt::WindowStaysOnTopHint:  //總在最上面的窗口
    Qt::CustomizeWindowHint:  //自定義窗口標題欄,以下標誌必須與這個標誌一起使用纔有效,否則窗口將有默認的標題欄
    Qt::WindowTitleHint  //顯示窗口標題欄
    Qt::WindowSystemMenuHint  //顯示系統菜單
    Qt::WindowMinimizeButtonHint  //顯示最小化按鈕
    Qt::WindowMaximizeButtonHint  //顯示最大化按鈕
    Qt::WindowMinMaxButtonsHint  //顯示最小化按鈕和最大化按鈕
    Qt::WindowCloseButtonHint  //顯示關閉按鈕


2、隱藏任務欄顯示




    setWindowFlags(Qt::Tool | Qt::X11BypassWindowManagerHint）


3、關閉按鈕實現的功能




    hide(); //進行界面隱藏，但是顯示托盤，可通過點擊托盤實現界面的重新顯示
    quit(); //退出系統


4、繪製背景圖片並且實現圓角效果




void paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QBrush brush;
    brush.setTextureImage(QImage(background_image)); //背景圖片
    painter.setBrush(brush);
     painter.setPen(Qt::black);  //邊框色
    painter.drawRoundedRect(this->rect(), 5, 5); //圓角5像素
}


5、設置應用程序的字體




    QFont font("Courier", 10, QFont::Normal, false);
    QApplication::setFont(font);


6、設置字體




    QFont font = this->font();
    font.setFamily("Courier");  //字體名稱
    font.setPixelSize(16);  //字體點大小
    font.setPointSize(18);  //字體像素大小
    font.setBold(true);  //是否加粗
    font.setItalic(true);  //是否斜體
    font.setUnderline(true);  //是否下劃線
    this->setFont(font);
字體風格，包括類型、大小、是否加粗、是否斜體等！
也可使用：setStyleSheet("text-align:center; font-size:18px; font-weight:bold; font-style:Courier; color:white; ");
setAlignment(Qt::AlignCenter);  //設置對齊方式


7、超鏈接




    QLabel *pLabel = new QLabel(this);
    pLabel->setText(QStringLiteral("超鏈接"));
    pLabel->setFixedSize(200,100);
    connect(pLabel,SIGNAL(linkActivated(QString)),this,SLOT(openUrl(QString)));
    QDesktopServices::openUrl(QUrl(url));  //openUrl槽裏面實現

    pLabel->setOpenExternalLinks(true);
    pLabel->setText("新浪");


8、打開本地文件（夾）




    QDesktopServices::openUrl(QUrl::fromLocalFile(local_file));


9、顯示窗口並激活/提升




  showNormal();
    raise();
    activateWindow();


10、設置滾動條值




    pTextEdit->verticalScrollBar()->setValue(0);  //滾動到最頂層
    pTextEdit->verticalScrollBar()->setValue(pTextEdit->verticalScrollBar()->maximum());  //滾動到最底層




11、QToolBar添加拉伸（彈簧）


原以爲QToolBar可以通過addStretch()來實現，不想沒有此接口，則可通過下來方式實現：




    QWidget *pWidget = new QWidget(this);
    pWidget->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed); 
    pToolBar->addWidget(pWidget);


12、QProgressBar進度條設置文本、樣式




  QProgressBar *pProgressBar = new QProgressBar(this);
    pProgressBar->setFixedSize(150, 10);
    pProgressBar->setToolTip(QStringLiteral("離下一等級還需要1500經驗"));
    pProgressBar->setFormat("12345/50000");
    pProgressBar->setMaximum(100);
    pProgressBar->setValue(10);

    QString strQSS = "QProgressBar {color: white;} \
        QProgressBar:horizontal { \
        text-align: center; \
        border: 1px solid rgb(115, 200, 60); \
        background: rgb(145, 210, 75, 150); \
    } \
    QProgressBar::chunk:horizontal { \
        background: rgb(145, 210, 75); \
    }";

    pProgressBar->setStyleSheet(strQSS);




二、全屏顯示與還原


1、遮擋任務欄




    showFullScreen()
    showMaximized() 這兩個都可以！


2、不遮擋任務欄




void showMaximize()
{
    //若已經最大化
    if(is_max)
    {
        //恢復界面位置，並設置按鈕圖標爲最大化圖標，提示“最大化”
        this->setGeometry(location);
        max_button->setIcon(QIcon("maxbtn"));
        max_button->setToolTip(tr("max"));
    } 
    else 
    {
        //設定當前界面的位置，還原時使用
        location = this->geometry();
        //獲取桌面位置，設置爲最大化，並設置按鈕圖標爲還原圖標，提示“還原”
        QDesktopWidget *desk = QApplication::desktop();
        this->setGeometry(desk->availableGeometry());
        max_button->setIcon(QIcon("restorbtn"));
        max_button->setToolTip(tr("restor"));
    }
    is_max = !is_max;
}



  注：窗口既然可以最大化，當然還要進行還原，is_max爲一個bool值變量，表示窗口是否最大化，初始值爲false。location爲桌面的位置，每次最大化開始先記錄當前的位置，等待還原時候使用。


三、QSS樣式


1、QComboBox




    comboBox->setStyleSheet("QComboBox{border:1px solid gray;}"
    "QComboBox QAbstractItemView::item{height:25px;}"
    "QComboBox::down-arrow{image:url(:/icon/arrowdown);}"
    "QComboBox::drop-down{border:0px;}");
    comboBox->setView(new QListView());


(包括設置下拉箭頭、下拉選項高度等)、


2、QSpinBox




    pSpinBox->setStyleSheet("QSpinBox{border:1px solid gray;}"
    "QSpinBox::up-button{image:url(:/icon/arrow_up);}"
    "QSpinBox::down-button{image:url(:/icon/arrow_down);}");


 


3、QMenu




QMenu{
    padding:5px;
    background:white;
    border:1px solid gray;
 }
QMenu::item{
    padding:0px 40px 0px 30px;
    height:25px;
}
QMenu::item:selected:enabled{
    background:lightgray;
    color:white;
}
QMenu::item:selected:!enabled{
    background:transparent;
}
QMenu::separator{
    height:1px;
    background:lightgray;
    margin:5px 0px 5px 0px;
}




4、QSlider




QSlider::groove:horizontal{
    border:0px;
    height:4px;
}  
QSlider::sub-page:horizontal{
    background:white;
}  
QSlider::add-page:horizontal{
    background:lightgray;
} 
QSlider::handle:horizontal{
    background:white;
    width:10px;
    border-radius:5px;
    margin:-3px 0px -3px 0px;
}




5、QCheckBox




QCheckBox{
    spacing: 2px; 
}
QCheckBox::indicator {
    width: 20px;
    height: 20px;
}
QCheckBox::indicator:unchecked {
    image: url(:/login/checkbox);
}
QCheckBox::indicator:unchecked:hover {
    image: url(:/login/checkbox_hover);
}
QCheckBox::indicator:unchecked:pressed {
    image: url(:/login/checkbox_press);
}
QCheckBox::indicator:checked {
    image: url(:/login/checkbox_selected);
}
QCheckBox::indicator:checked:hover {
    image: url(:/login/checkbox_selected_hover);
}
QCheckBox::indicator:checked:pressed {
    image: url(:/login/checkbox_selected_press);
}




6、QScrollBar




水平滾動條 
QScrollBar:horizontal { 
    max-height: 9px;
    background: transparent;
    padding-left: 9px;
    padding-right: 9px;
}
QScrollBar::handle:horizontal {
    height: 9px;
    min-width: 20px;
    background: rgb(190, 190, 190);
}
QScrollBar::handle:horizontal:hover {
    background: rgb(170, 170, 170);
}
QScrollBar::sub-line:horizontal {
    height: 9px;
    width: 9px;
    background: rgb(220, 220, 220);
    border-image: url(:/CalcSetting/ArrowLeft);
    subcontrol-position: left;
}
QScrollBar::add-line:horizontal {
    height: 9px;
    width: 9px;
    background: rgb(220, 220, 220);
    border-image: url(:/CalcSetting/ArrowRight);
    subcontrol-position: right;
}
QScrollBar::sub-line:horizontal:hover {
    background: rgb(190, 190, 190);
    border-image: url(:/CalcSetting/ArrowLeftHover);
}
QScrollBar::add-line:horizontal:hover {
    background: rgb(190, 190, 190);
    border-image: url(:/CalcSetting/ArrowRightHover);
}
QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal {
    background: rgb(220, 220, 220);
}

垂直滾動條 
QScrollBar:vertical {
    max-width: 9px;
    background: transparent;
    padding-top: 9px;
    padding-bottom: 9px;
}
QScrollBar::handle:vertical {
    width: 9px;
    min-height: 20px;
    background: rgb(190, 190, 190);
} 
QScrollBar::handle:vertical:hover {
    background: rgb(170, 170, 170);
} 
QScrollBar::sub-line:vertical {
    height: 9px;
    width: 9px;
    background: rgb(220, 220, 220);
    border-image: url(:/CalcSetting/ArrowTop);
    subcontrol-position: top;
} 
QScrollBar::add-line:vertical {
    height: 9px;
    width: 9px;
    background: rgb(220, 220, 220);
    border-image: url(:/CalcSetting/ArrowBottom);
    subcontrol-position: bottom;
} 
QScrollBar::sub-line:vertical:hover {
    background: rgb(190, 190, 190);
    border-image: url(:/CalcSetting/ArrowTopHover);
}
QScrollBar::add-line:vertical:hover {
    background: rgb(190, 190, 190);
    border-image: url(:/CalcSetting/ArrowBottomHover);
}
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical {
    background: rgb(220, 220, 220);
}







7、QStatusBar




QStatusBar::item{
    border: 0px;
}
//不存在分隔線


8、QComboBox




QComboBox {
    border-image: url(:/OverdraftControl/comboBox);
}
QComboBox:hover {
    border-image: url(:/OverdraftControl/comboBoxHover);
}
QComboBox:pressed {
    border-image: url(:/OverdraftControl/comboBoxPressed);
}
QComboBox::down-arrow {
    image: none;
}
QComboBox::drop-down {
    width: 15px;
    border: none;
}
QComboBox QAbstractItemView {
    border: 1px solid lightgray;
    outline: 0px;  //去掉item虛線
}
QComboBox QAbstractItemView::item {
    color: black;
    height: 22px;
    border: 1px solid transparent;
}
QComboBox QAbstractItemView::item:selected {
    border: 1px solid rgb(170, 190, 230);
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 rgb(230, 240, 250), stop: 0.5 rgb(220, 235, 255), stop: 1.0 rgb(210, 230, 255));
}


一般也可以使用QPalette




    QPalette palette;  
    palette.setBrush(QPalette::WindowText, QBrush(Qt::white));  
    pCheckBox->setPalette(palette);  
    pCheckBox->setStyleSheet("color:white");


調色板類QPalette提供了顏色角色（color roles）的概念，指當前界面中顏色的職責，通過枚舉變量QPalette::ColorRole來定義，比較常用的角色有：




    QPalette::Window  通常指窗口部件背景色
    QPalette::WindowText  通常指窗口部件的前景色
    QPalette::Base  指文本的背景色（QTextEdit、QLineEdit等）
    QPalette::Text  與QPalette::Base一塊使用，指文本輸入窗口部件前景色
    QPalette::Button   指按鈕窗口部件的背景色
    QPalette::ButtonText  指按鈕窗口部件的前景色


    


    以上是遇到的常用但有資料較少的組件的樣式，注重細節才能做出好的產品！












    





發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








QT 遇到的問題






遇到的問題：
1：在QT中使用opengl，發現一個很神奇的問題，個人感覺是qt的bug。
問題詳情：在我添加了一個成員變量之後，使用opengl編寫的窗口沒有任何輸出了，只有一個背景。
但是刪除那個成員變量後，窗






 boydfd

2020-07-08 04:55:00









電腦內存硬盤查看器（C++、QT版本和Python、PySide2版本）






電腦內存硬盤查看器[序列號和容量]（C++、QT版本和Python、PySide2版本）
       由於最近有人問我電腦查看內存卡序列號和硬盤序列號的方式，我告訴他用WMIC指令查看，結果人家告訴我麻煩，於是我就寫了這麼個小工具，下面






 奋斗的小黄人HD

2020-07-08 12:31:12









itk、vtk、qt 顯示dicom 數據






以下代碼實現了itk讀取dicom數據，轉換爲vtkData，然後用Qt顯示。
1、Qt Designer 搭建界面，QVTKOpenGLNativeWidget 是vtk的一個類，連接qt與vtk的橋樑，一個可以顯示dicom數據的wi






 COSummer

2020-07-08 12:27:32









qml實現紅綠燈切換功能






題目要求：
參考代碼：https://download.csdn.net/download/y478225902/5260541
實現源碼：
import QtQuick 2.12
import QtQuick.Window 2.






 RabbitChenc

2020-07-08 09:56:50









使用Qt做一個簡易音樂播放器【Phonon淺談--續】






在第一篇 Phonon淺談 中提及到了 Phonon 這個多媒體框架的一些基本知識，於是想着結合這些基本知識來實踐一番，做一個簡單的音樂播放器。
 
【步驟一】
新建一個 Qt Gui 工程，在建立過程中需要包含 Phonon 模塊






 sun6255028

2020-07-08 09:49:42









Solaris 10下安裝Qt 4






  Qt安裝在Solaris平臺下要稍微複雜一些，因爲Solaris缺少一些Linux上的GNU軟件。這可以通過安裝相應的軟件來完成。Solaris操作系統分爲SPARC和X86兩個版本，這裏以X86版本爲例介紹，主要講解和Linux不






 andy205214

2020-07-08 09:19:53









Qt4軟鍵盤源碼分享






簡述
基於Qt4的軟鍵盤，支持中文，字母，數字，特殊字符輸入。開發環境爲qt4.8.7+msvc2008。提供了【軟鍵盤動態庫源碼】和相應的【demo源碼】。自己編譯時記得修改代碼中qss、中文字庫的路徑。
源碼路徑：https:






 伽利略打小怪兽

2020-07-08 08:32:42









Qt做啓動界面






Qt做啓動界面
 如何用Qt做啓動界面，說起來也很簡單。其實只需要創建一個元件dialog，然後插入一張圖片背景，用一個定時器，使其在主窗口顯式之前顯示規定的一段時間。
      下面這裏有一段代碼：
 int main(int a






 tumblerman

2020-07-08 08:18:05









如何在程序中模擬鍵盤的按鍵事件？






QKeyEvent event(QEvent::KeyPress,Qt::Key_A,Qt::NoModifier);QApplication::sendEvent(mainWindow, &event);






 tumblerman

2020-07-08 08:18:05









QT工具MaintenanceTool.exe如何管理組件（解決“要繼續此操作，至少需要一個有效且已啓用的儲存庫”問題）






QT的組件管理軟件MaintenanceTool.exe並沒有在開始菜單或者桌面添加快捷方式（5.9版本），也沒有在代碼編輯界面設置相關的選項，藏的比較深，因此我被坑了很多次（之前如果要添加組件，只能選擇卸載了重裝）
沒有對比舊沒






 Fu_Lin_

2020-07-08 06:32:30









Ubuntu下使用QtCreator編譯出現collect2: ld terminated with signal 9 [Killed] 解決方法






定位問題是，由於交換分區不足，導致編譯出錯。
解決思路就是增加交換分區空間，然後重新啓動交換分區。方法如下(默認使用的是root用戶)：
1.創建用於交換分區的文件：
    dd if=/dev/zero of=/swapfile bs






 wastedsoul

2020-07-08 05:33:07









Qt Creator 界面文字模糊






問題：打開 Qt Creator 以後，界面文字模糊不清。
方法：多次反覆開關 Qt Creator 後即可恢復正常。






 qbw_csdn

2020-07-08 04:29:53









Cannot find file: C:\Users\qiaobw\Desktop\終端P顯\develop\plugins\radarFC106\radarFC106.pro






問題：Error while building\deploying project Simulator16 (kit: Desktop Qt 5.9.6 MSVC2015 64bit)
When executing step "qmake






 qbw_csdn

2020-07-08 04:29:43









相同區域多個組件顯示






問題：在相同區域內，有許多不同的組件有選擇地顯示。
方法：
（1）visible : root.whoShow == 1，使用可見屬性安排。
（2）使用 Loader 動態加載組件。






 qbw_csdn

2020-07-08 04:29:42









不同組件之間的分隔塊






問題：如何將兩個組件分隔開來。
方法：
（1）使用 Image 組件，加載分隔圖片。
（2）使用 Rectangle 組件，用顏色條分隔。






 qbw_csdn

2020-07-08 04:29:42