QT之界面實現技巧

總結一下，在開發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 LoginDialog::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 *url_label = new QLabel();


url_label->setOpenExternalLinks(true);//這句比較關鍵，也可以通過連接linkActivated信號到自定義槽函數中打開


url_label->setText(tr("Google"));


8、打開本地文件（夾）


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


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


showNormal();
raise();
activateWindow();
 
10、設置滾動條值
textEdit->verticalScrollBar()->setValue(0);  //滾動到最頂層
textEdit->verticalScrollBar()->setValue(textEdit->verticalScrollBar()->maximum());  //滾動到最底層
二、全屏顯示與還原


    關於這個問題，當做一個大的標題來討論，因爲比起其它小技巧要稍微複雜一些！


    全屏顯示：


1、遮擋任務欄：


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


2、不遮擋任務欄：


    void MainWidget::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:


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


Qt之界面實現技巧(包括設置下拉箭頭、下拉選項高度等)、


 


2、QSpinBox：


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


 Qt之界面實現技巧


 


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;


 }


Qt之界面實現技巧


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;


}


Qt之界面實現技巧


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);


}


Qt之界面實現技巧


6、QScrollBar:


QScrollBar{


background:transparent;


  width: 10px;


}


QScrollBar::handle{


background:rgb(180, 180, 180, 150);


}


QScrollBar::handle:hover{


background:rgb(150, 150, 150, 180);


}


QScrollBar::add-page{


background:transparent;


}


QScrollBar::sub-page{


background:transparent; 


}


QScrollBar::sub-line{


background:transparent;


}


QScrollBar::add-line{


background:transparent;


}


Qt之界面實現技巧  


7、QStatusBar


QStatusBar::item{


border: 0px;


}


 //不存在分隔線


 


一般也可以使用QPalette


QPalette palette;  


palette.setBrush(QPalette::WindowText, QBrush(Qt::white));  


check_box->setPalette(palette);  


 


check_box->setStyleSheet("color:white");


 


調色板類QPalette提供了顏色角色（color roles）的概念，指當前界面中顏色的職責，通過枚舉變量


QPalette::ColorRole來定義，比較常用的角色有：


QPalette::Window  通常指窗口部件背景色


QPalette::WindowText  通常指窗口部件的前景色


QPalette::Base  指文本的背景色（QTextEdit、QLineEdit等）


QPalette::Text  與QPalette::Base一塊使用，指文本輸入窗口部件前景色


QPalette::Button   指按鈕窗口部件的背景色


QPalette::ButtonText  指按鈕窗口部件的前景色


 


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


  有待完善。。。