2. 程式人生 > >Qt 介面設計總結

Qt 介面設計總結

阿新 • • 發佈：2019-02-06

把工作中學到的技巧記錄下來：

1. 子窗體或控制元件，重寫paintEvent事件，畫邊框、背景、文字、圖片效果比較好。用paintEvent 事件畫邊框，用QPalette設定背景。

// 畫邊框

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.setPen(QPen(QColor(225,70,56), 2));
//    painter.setBrush(QColor(16,62,81));   // 也可設定背景，有時效果不好

    painter.drawRoundedRect(rect(), 5.0, 5.0);

// 設定背景

    QPalette pal = palette();
    pal.setBrush(QPalette::Window, QColor(16,62,81));
    setPalette(pal);
    setAutoFillBackground(true);

2. 繼承QDialog，想讓對話方塊以模態執行，使用exec()，繼承時使用setWindowFlags()後則達不到模態的效果。不知道原因。

3. QStringList 輸出

QStringList m_strLang << "English"

                                          << "Chinese";

qDebug("set language: %s", m_strLang.at(0).toLocal8Bit().constData());

4. QStringList 使用注意

    QStringList strDateformatList;
    strDateformatList
            << m_strMonth + "-" + m_strDay + "-" + m_strYear
            << m_strDay + "-" + m_strMonth + "-" + m_strYear
            << m_strYear + "-" + m_strMonth + "-" + m_strDay
            ;

如果strDateformatList 在生命週期內多次呼叫，則會多次插入字串，使得字串重複，這不是我們想要的。那就定義為區域性變數，每次會重新賦值，達到更新的目的。

5.需要動態重新的頁面可以在showEvent函式中重新。

6. 用paintEvent或用調色盤為QWidget填充背景時，需要加上setAutoFillBackground(true);語句，否則沒效果。

7. 想使彈出的視窗為圓角，用paintEvent畫圓角矩形，但四個直角仍然存在，不美觀。可以把背景設為透明，用paintEvent畫出想要的背景，因為四個角沒有畫上背景，是透明的，所以看不見。

     // 設定背景為透明 (建構函式中)

    QPalette pal = palette();
    pal.setBrush(QPalette::Window, QColor(255, 255, 255, 0));
    setPalette(pal);
    setAutoFillBackground(true);

    // 畫背景和邊框 (paintEvent函式中)

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.setPen(QPen(QColor(225,70,56), 2));
    painter.setBrush(QColor(16,62,81));

    painter.drawRoundedRect(rect(), 5.0, 5.0);

 8. Qt::Key_Enter、Qt::Key_Reture

Qt::Key_Enter對應小鍵盤的Enter鍵

Qt::Key_Return對應大鍵盤的Enter鍵

9. 事件過濾。視窗部件的事件到達目的地之前提前獲取並處理相關事件，實現個性化的處理。

我在QLabel物件中放入兩個QPushButton物件和兩個QLabel物件，QPushButton實現值的調節，其中一個QLabel物件用於顯示值，一個QLabel物件用於顯示標題。類似SpinBox。在多個SpinBox上點選實現焦點切換，當滑鼠點到QPushButton上時，QPushButton處理了mousePressEvent事件，所以無法實現焦點切換。為兩個QPushButton物件安裝事件過濾器，然後在其父部件中處理eventFilter函式

m_btnLeft->installEventFilter(this);

m_btnRight->installEventFilter(this);

//安裝事件過濾器後，傳給m_btnLeft、m_btnRight的事件會首先發送給eventFilter函式

boolESpinBoxItem::eventFilter(QObject*obj,QEvent*ev)

{
if(obj==m_btnLeft||obj==m_btnRight)
{
if(ev->type()==QEvent::MouseButtonPress)
{
emitsign_spinBoxPressed(m_nItem);
returntrue; // 不傳給目標物件處理
}
}
returnfalse; // 不處理的事件則傳給目標物件處理
}

10. 拍照動畫

使用QTimeLine和QGraphicsPixmapItem物件，當時間線幀改變時，設定QGraphicsPixmapItem的位置，實現動畫效果。

// 在QGraphicsView建構函式中

// take photo animation
    m_timerAnimation = new QTimeLine(900);
    m_timerAnimation->setCurveShape(QTimeLine::LinearCurve);
    m_timerAnimation->setFrameRange(0, 240);

    m_pixmapUpAnimation = QPixmap(":/images/animation.png");
    m_pixmapDownAnimation = QPixmap(":/images/animation.png");

    m_upPixmapItem = new QGraphicsPixmapItem;
    m_downPixmapItem = new QGraphicsPixmapItem;
    m_upPixmapItem->setZValue(4);
    m_downPixmapItem->setZValue(4);

    m_upPixmapItem->setPos(0, 0);            // 左上角為原點
    m_downPixmapItem->setPos(0, 240);

    scene()->addItem(m_upPixmapItem);
    scene()->addItem(m_downPixmapItem);

    m_upPixmapItem->hide();
    m_downPixmapItem->hide();

    connect(m_timerAnimation, SIGNAL(frameChanged(int)), this, SLOT(slot_playAnimation(int)));

// 槽函式

void EGraphicsView::slot_playAnimation(int nFrame)
{
    m_upPixmapItem->show();
    m_downPixmapItem->show();

    qDebug("nFrame: %d", nFrame);

    if(nFrame < 120)
    {
        m_upPixmapItem->setPixmap(m_pixmapUpAnimation.scaled(320, nFrame));
        m_downPixmapItem->setPixmap(m_pixmapDownAnimation.scaled(320, nFrame));
        m_downPixmapItem->setPos(0, 240 - nFrame);
    }
    else
    {
        m_upPixmapItem->setPixmap(m_pixmapUpAnimation.scaled(320, 240 - nFrame));
        m_downPixmapItem->setPixmap(m_pixmapDownAnimation.scaled(320, 240 - nFrame));
        m_downPixmapItem->setPos(0, nFrame);
    }
}

 11.在移動裝置上使用漸變或使用漸變的圖片時，會出現條紋狀，達不到效果。在初始化QApplication對像前呼叫下面的語句則可以達到效果：

QApplication::setColorSpec(QApplication::ManyColor); //the right choice for applications that use thousands of colors

QApplication app(argc, argv,  QApplication::GuiServer );

12.用setStyleSheet設定背景圖片

m_labelButton->setStyleSheet("background-image: url(:images/shutdown/slider.png); background-repeat: no-repeat;"); //注意，不加background-repeat: no-repeat可能會出現透視，很醜。QLabel物件可用setPixmap設定象素圖。

13.使對話方塊圓角

    //建構函式中

    setAutoFillBackground(true);

    QPalette pal = palette();

    pal.setColor(QPalette::Window, QColor(0, 0, 0, 0));

    setPalette(pal);

    //paintEvent函式中

   QPainter painter(this);

   painter.setRenderHint(QPainter::Antialiasing,true);

   painter.setPen(QPen(Qt::red,2));

   painter.setBrush(QColor(16,62,81));

   painter.drawRoundedRect(rect(),5.0,5.0);

 // 圓角處有雜色，原因不祥

 14. 對某些預設事件的處理修改

正常情況下，按下Tab鍵，被QWidget看成是去移動鍵盤焦點，但少數視窗部件需要自行解釋。

bool MyClass::event(QEvent *e)

{

         if(e->type() == QEvent::KeyPress)

         {

                 QKeyEvent *ke = (QKeyEvent *)e;

                 if(ke->key() == Qt::Key_Tab)

                  {

                            //這裡是特定的Tab處理

                            k->accept();

                            return TRUE;

                  }

         }

         else if(e->type()  >= QEvent::User)

         {

                 // 這裡是自定義事件處理

                 return TRUE;

          }

          QWidget::event(e);

}

   15.QLabel繼承QFrame，有QFrame的特性。如setFrameStyle(int)可設定QLabel的FrameStyle(框架型別)

FrameStyle有兩種:

a.第一種是frameshape:

有以下幾種型別：

Constant Value Description
QFrame::NoFrame 0 QFramedraws nothing
QFrame::Box 0x0001 QFramedraws a box around its contents
QFrame::Panel 0x0002 QFramedraws a panel to make the contents appear raised or sunken
QFrame::StyledPanel 0x0006 draws a rectangular panel with a look that depends on the current GUI style. It can be raised or sunken.
QFrame::HLine 0x0004 QFramedraws a horizontal line that frames nothing (useful as separator)
QFrame::VLine 0x0005 QFramedraws a vertical line that frames nothing (useful as separator)
QFrame::WinPanel 0x0003 draws a rectangular panel that can be raised or sunken like those in Windows 95. Specifying this shape sets the line width to 2 pixels. WinPanel is provided for compatibility. For GUI style independence we recommend using StyledPanel instead.

b.第二種是frameshadow

有以下幾種型別：

Constant Value Description
QFrame::Plain 0x0010 the frame and contents appear level with the surroundings; draws using the paletteQPalette::WindowTextcolor (without any 3D effect)
QFrame::Raised 0x0020 the frame and contents appear raised; draws a 3D raised line using the light and dark colors of the current color group
QFrame::Sunken 0x0030 the frame and contents appear sunken; draws a 3D sunken line using the light and dark colors of the current color group

 組合值的效果圖：

15.幾種位置資訊

x()、y()、pos()函式都是獲得整個窗體左上角的座標位置。需frameGeometry與geometry相對應，frameGemometry()是獲得整個窗體的左上頂點和長、寬值，需geometry()函式獲得的是窗體內中央域的左上頂點座標以及長、寬值。直接呼叫width()和height()函式獲得的是中央區域的長和寬的值。還有兩個函式rect()、size()，呼叫它們獲得的結果也都是對於窗體的中央區域而言的。size()獲得的是窗體中央區域的長、寬值，rect()與geometry()一樣返回一個QRect物件。其中，兩個函式獲得的長寬、值是一樣的，都是窗體中央區域的長、寬值，只是左上頂點的座標值不一樣，geometry()獲得的左上角頂點座標是相對於父窗體而言的座標，，而rect()獲得的左上角頂點座標始終為(0, 0)。

效果圖：

窗體在左上角時：

16.幾種輸入對話方塊。

a.獲取文字對話方塊

 QString strName=QInputDialog::getText(this,tr("User Name"),tr("Please Input New Name:"),QLineEdit::Normal,m_labelName->text(),&ok);

b.獲取項對話方塊

QStringList list;

list<<tr("男")<<tr("女");

QStringstrSex=QInputDialog::getItem(this,tr("User Sex"),tr("Please Select Sex:"),list,0,false,&ok);

c.獲取整數對話方塊

boolok;

    int nAge = QInputDialog::getInteger(this, tr("User Age"), tr("Please Input Age:"), m_labelAge->text().toInt(), 18, 30, 1, &ok);
    if(ok)
    {
        m_labelAge->setText(QString(tr("%1").arg(nAge)));
    }

d.獲得雙精度對話方塊

boolok;

doublenHeight=QInputDialog::getDouble(this,tr("User Height"),tr("Please Input Height:"),m_labelHeight->text().toDouble(),160.5,270.5,1,&ok);
if(ok)
{
m_labelHeight->setText(QString(tr("%1").arg(nHeight)));
}

 17.自定義QMessageBox

    QMessageBox customMsgBox;
customMsgBox.setWindowTitle("Custom message box");
QPushButton*lockButton=customMsgBox.addButton(tr("Lock"),QMessageBox::ActionRole);
QPushButton*unlockButton=customMsgBox.addButton(tr("Unlock"),QMessageBox::ActionRole);
QPushButton*cancelButton=customMsgBox.addButton(QMessageBox::Cancel);
customMsgBox.setIconPixmap(QPixmap(":/images/1.png"));
customMsgBox.setText(tr("This is a custom message box"));
customMsgBox.exec();
if(customMsgBox.clickedButton()==lockButton)
{
m_labelMessage->setText("Custom MessageBox button / lock");
}
elseif(customMsgBox.clickedButton()==unlockButton)
{
m_labelMessage->setText("Custom MessageBox button / unlock");
}
elseif(customMsgBox.clickedButton()==cancelButton)
{
m_labelMessage->setText("Custom MessageBox button / Cancel");
}

效果圖：

定義好的MessageBox

QMessageBox::question

QMessageBox::information

QMessageBox::warning

QMessageBox::critical

QMessageBox::about

QMessageBox::aboutQt

 18.在編寫程式時，初始化窗體時最好不要使用setGeometry()函式，而用resize()和move()函式代替，因為使用setGeometry()會導致窗體show()之後在錯誤 的位置上停留很短暫的一段時間，帶來閃爍現象。

19.提示錯誤：E:\vm_shared\study\graphicsview\debug\moc_navibar.cpp:39: error: `staticMetaObject' is not a member of `QGraphicsRectItem'

錯誤原因：因為QGraphicsRectItem不是QObject的子類，所以在類的宣告中不能有Q_OBJECT巨集、signal和slot。

20.抓圖功能：

// 使用Qt自帶的靜態函式grabWindow,指定窗體ID，抓圖的起啟位置和麵積大小。

QImage image = QPixmap::grabWindow(QApplication::desktop()->winId(), 0, 0, nDesktopWidth, nDesktopHeight).toImage().scaled(640, 480); 

21.檢視去掉滾動條

 view->setFrameShape(QFrame::NoFrame);

通過佈局指定檢視的父窗體時，使用上面程式碼去不掉滾動條。而需要使用view = new QGraphicsView(this);指定父窗體。

最好辦法是： view->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff); view->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff); 一直關掉滾動條

22.QpushButton圓角

QPushButton {
     border: 2px solid #8f8f91;
     border-radius: 6px;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #f6f7fa, stop: 1 #dadbde);
     min-width: 80px;
 }

note: 當QPushButton無邊框(border: 0px;),有設定背景顏色(background-color: rgb(6,43,58);)時，設定圓角會出現鋸齒，因為圓角是邊框為圓角，邊框大小不能為0px.想讓按鈕只顯示一種顏色（看不見邊框顏色），則把邊框顏色設為背景色即可。如圖：

   

相關推薦

Qt 介面設計總結

把工作中學到的技巧記錄下來： 1. 子窗體或控制元件，重寫paintEvent事件，畫邊框、背景、文字、圖片效果比較好。用paintEvent 事件畫邊框，用QPalette設定背景。 // 畫邊框     QPainter painter(this);     paint

matlab GUI介面設計總結

二：使用控制元件新建一個佈局(視窗)，可以在新視窗中新增如下控制元件1．靜態文字（Static Text）        2．編輯框（Edit Text）控制元件3．列表框（Listbox）控制元件            4．滾動條（Slider）控制元件5．按鈕（Push

QT實時視訊播放介面設計

QT播放介面設計 今天寫了個QT的實時視訊播放介面，其實要寫一個播放介面非常容易，以下為程式碼 首先定義一個用於播放的控制元件： * PlsyItem.h #ifndef PLAYITEM_H #define PLAYITEM_H #include <QObject&

一個較完整的Qt登入介面設計

正在學習Qt,做了一個登入介面程式，用資料庫儲存使用者名稱和密碼，可以增加和刪除使用者，為新人學習提供小小幫助。 直接上圖了。 1.登入介面 2主介面 3.增加使用者介面 4.整體介面 整體來講登入介面的功能都有了，比較簡單。 程式碼地址：http

qt 時鐘設計（隨介面大小變動自適應）

demo連結：https://download.csdn.net/download/weixin_39841821/10568854 一、 需求 a） 畫出一個圓形錶盤，包含三角形的時針、分針、秒針，以及上方的刻度，加上名字 b） 在窗體發生變化的時候，時鐘能夠根據窗體大小自動調整

Web API介面設計經驗總結

在Web API介面的開發過程中，我們可能會碰到各種各樣的問題，我在前面兩篇隨筆《Web API應用架構在Winform混合框架中的應用（1）》、《Web API應用架構在Winform混合框架中的應用（2）--自定義異常結果的處理》也進行了總的介紹，在經過我的大量模組實踐併成功執行後，總結了這篇隨

QT C++ 多執行緒多串列埠介面設計

忙了兩三天了，總算得空記錄一下QT串列埠，文末會有總的工程檔案上傳，多謝大家捧場。 之前博文寫過PyQT，目前我逐漸偏向C++了，但主要程式碼思想沒有變，如下： 第一，在QTdesigner下，建立好UI，如下圖（右下角是我自己的小公司，留個爪印哈）： UI細節就不詳細說了，

總結常見的違背Rest原則的介面設計做法

此文已由作者鄭華斌授權網易雲社群釋出。 REST這詞我們常常掛在嘴邊，比如“開發一個rest介面”，又比如Spring專案的程式碼： @RestControllerpublic class CommonController {    @R

【 專欄 】- QT圖形化介面設計

QT圖形化介面設計 該專欄記錄博主自學qt圖形化介面設計的一些程式碼。從QDialog視窗到QWidget視窗再到MainWindow視窗，然後是事件機制，繪圖工具和樣式設計，61篇部落格，記錄了一個不懂Qt的人到會做一些小程式

介面測試設計總結

一、 設計準備： 1. 概念： 定義  介面測試測試的主要物件是介面，是測試系統元件間介面的一種測試。介面測試主要用於檢測外部系統與所測系統之間以及內部各系統之間的互動點。測試的重點是檢查資料互動、傳遞、和控制管理過程以及系統間的相互依賴關係等。 介面分類

OpenCV學習筆記（二十五）——OpenCV圖形介面設計Qt+VS2008

一直對MFC對OpenCV的支援不好而耿耿於懷，瞭解了Qt對OpenCV支援很好，但網上這方面的資料很少。大部分的圖形互動的設計都是基於OpenCV2.0之前的資料結構lpImage進行的。最近得到了一本好書《OpenCV 2 Computer Vision Applica

《Qt學習筆記》第一章--登入介面設計

本次的程式目的是編寫一個登陸介面程式，包含了賬號密碼確認的功能，輸入框設定提示字元，密碼框採用password模式，設定登入按鈕為預設焦點。基本邏輯為：當輸入賬戶密碼時，按回車鍵或者點選登入按鈕，程式

iOS 有關介面設計規範的一些總結

當我們開始一個專案的時候，可能遇到各種各樣的情況，比如說公司沒有一個正八經的設計師的情況（應該有不少朋友遇到過吧）~所以作為萬能的開發者，對設計還是要有所瞭解的。話不多說，下面我將系統專業的彙總一些介

QT常用實用的介面設計技巧

一、主介面 　　1.視窗 最小化 最小化 關閉按鈕 顯示狀態自定義 　　　　setWindowFlags(Qt::CustomireWindowHint); 　　　　setWindowFlags(Qt::WindowCloseButtonHint);//只要關閉按鈕 　　

restful介面設計規範總結

這篇 文章主要是借鑑他人，但是自己很想總結出一套規範 一、重要概念： REST,即Representational State Transfer的縮寫。我對這個片語的翻譯是"表現層狀態轉化"。 Resource（資源） ：物件的單個例項。 例如，一隻動物。它可以是一段文字、一張圖片、一首

Qt MVC設計模式（五篇）

net details blog 模式 mvc設計模式 sdn .net 設計 mvc http://blog.csdn.net/qq_19672579/article/details/46952675http://blog.csdn.net/qq_19672579/art

QT之設計部件背景色

ack 主界面 disable tracking avi blue line popu 基本 一、使用QT樣式表設計部件外觀 樣式表使用文本描寫敘述，能夠使用QApplication::setStyleSheet()函數將其設置到整個應用程序上。也能夠使用QWid

Qt——QLineEdit使用總結

整數 space 之間 clas add edit password 拖放 highlight http://www.cnblogs.com/hellovenus/p/5183593.html QLineEdit是一個單行文本編輯控件。 使用者可以通過很多函數，輸入和

Qt學習階段性總結

查找 崩潰 設計師 正常 sdk下載 而是 學習過程 自己 繼續 過程、心得： 1)Qt Creator與相關的安裝包的安裝 我在選擇去學習Qt之後，第一件事就是Qt SDK下載安裝與配置。最初，在網上發現Qt使用的IDE環境 在Win

微信H5房卡9人牛牛青龍大廳開發頁面按鈕組設計總結

引用 出現 錘子 成了 做到 一句話 微信h5 理念 shu 什麽是按鈕組？ 顧名思義，按鈕組就是指兩個或兩個以上的按鈕排布在一起。為了了解按鈕組的使用場景，首先我們來思考一個問題：什麽時候我們會使用按鈕組？ 從按鈕組的樣式上我們可以看出常見的按鈕組是供用戶進行判斷(兩個選