主頁 > 前端設計 > 為了這篇關于QT最全面的專案實戰總結,成功加入脫發大軍!不看也給我先收藏起來!

為了這篇關于QT最全面的專案實戰總結,成功加入脫發大軍!不看也給我先收藏起來!

2020-12-03 12:58:21 前端設計

閱讀目錄

  • 編譯環境與開發流程
  • QT專案的構成及原理
  • QT中的布局
  • QT中的通用控制元件
  • QVariant 型別
  • QComboBox控制元件
  • QTableWidget控制元件
  • QTabWidget控制元件
  • QWebview控制元件
  • 使用QSS
  • 編碼問題
  • QT的記憶體管理
  • QT的信號槽
  • QT中繪圖
  • QT的執行緒
  • QT中使用第三方的dll
  • QT中為控制元件添加右鍵選單的方法
  • 結束語

編譯環境與開發流程

開發QT有兩種IDE可以使用,一種是使用 VS + Qt 的插件,另一種就是使用QtCreator工具,前一種是微軟的工具,用的都比較多容易上手,缺點是信號槽的支持不太好,需要手寫,不能自動生成,另外可能有中文編碼的問題,后一種是Qt的官方IDE,智能提示與除錯功能不如VS強大,但是是跨平臺的IDE,其QtDesigner設計UI界面操作比較方便,并且由于是QT官方的IDE,對編碼等支持都比較好,里面集成了Qt的幫助檔案,不得不說Qt的幫助檔案做的是非常好的,集成進QtCreator環境之后更加方便,

我開發的時候使用的是QtCreator開發,目前除了除錯功能比VS差以外,其他的用的比較順手,QtCreator是跨平臺的,ubuntu上也是可以使用,打開之后界面如下:
11

下面將對QtCreator的界面各個功能進行大致的介紹:
1

我們建立一個示例專案,選擇“檔案”—“新建檔案或專案”—“應用程式”—“QT Widgets Application”選擇之后都選擇默認設定,根據提示,就得到了一個專案,我們的UI是一個基于QMainWindow的類,默認提供選單欄,狀態欄,如果不需要這些,可以建立一個基于QWidget的UI類,專案如圖所示:
1

QT專案的構成及原理

將專案切換到編輯模式,如下:
1

這個專案中一共有4個檔案,入口檔案main.cpp、mainwindow.ui檔案、mainwindow.h和mainwindow.cpp后臺源檔案,在main函式中直接呼叫MainWindow類的show()方法顯示主界面,那么我們切換到UI的設計視圖(雙擊專案中的mainwindow.ui檔案),在主界面上添加兩個控制元件:

1

我們看一下MainWindow.cpp的代碼里面應該如何操作界面上的控制元件:
1

我們使用的是ui->txtName->text();這樣的陳述句,也就是說并不是像在C#中一樣在后臺代碼中直接可以通過類似this->txtName->text()的陳述句去訪問界面上的控制元件物件,而MainWindow類中有一個成員變數是ui,其型別是Ui::MainWindow,通過這個ui成員去訪問界面上的元素,那么這些界面控制元件是如何初始化的呢? 我們需要查看ui成員變數的型別Ui::MainWindow的實作,注意Ui::Mainwindow類與MainWindow類是不同的兩個類,Ui::MainWindow類是在命名空間Ui下的類,而MainWindow是沒有命名空間的,我們在mainwindow.h中可以看到:

1

MainWindow中的私有成員變數ui實際上是Ui::MainWindow型別的指標,那么Ui::MainWindow是如何定義的呢? 用滑鼠點進去就看到了:

1

從這里就可以看出為什么我們的MainWindow類的建構式中一進來就呼叫ui->setupUi(this)去初始化界面了

最近寫了幾個小游戲,感興趣的小伙伴可以進群973961276來領取一下原始碼,個人也整理了一些不錯的學習書籍、視頻資料以及大廠面經視頻等

QT中的布局

QT中有四種布局方式,分別是:Vertical垂直布局、Horizontal水平布局、Grid布局、Form布局,效果如下:

1

其實Grid布局感覺跟HTML中的Table差不多,Form布局好像也是表格的效果,至于這兩種布局的差異在哪里我也不是很清楚,專案中基本沒有用過這兩種布局方式,一般而言所有的效果都可以通過水平布局和垂直布局嵌套實作,結合水平布局和垂直布局,以及他們之間的相互嵌套,再結合使用自動伸縮調節的占位控制元件HorizontalSpacer和VerticalSpacer就可以實作非常復雜的布局效果,

一般使用布局有兩種方式,第一種即拖放這些布局控制元件到UI界面上,然后將希望布局的子控制元件拖放到這些布局控制元件中,但是這種方式個人認為不夠靈活,特別是在控制元件之間希望嵌套的時候,工具箱中的布局控制元件如下:

1

另外一種使用方式,QT的容器控制元件(那些能夠放子控制元件的控制元件)都可以為其指定一種布局方式,當為一個容器控制元件指定布局方式之后,該容器控制元件就會以這種布局方式來約束其所有子控制元件,直接在Qt設計器的容器控制元件中右鍵就可以設定:

1

我們在一個QFrame控制元件中放入兩個子控制元件,一個文本框一個按鈕,之后在QFrame的空白處右鍵單擊,在其右鍵選單“布局”的子選單中就可以指定該控制元件的布局模式了,實際上在代碼上的原理是一樣的,我們在QtCreator生成的ui_mainwindow.h中可以看到關于frame以及子控制元件和其布局設定的代碼:

1

可以看到是這么樣的關系,QFrame的子控制元件QPushButton以及QLineEdit(文本框)在構造的時候指定的父物件就是frame,而布局物件QHBoxLayout指定的父控制元件物件也是frame,也就是說除了我們在界面上看到的按鈕,文本框是frame的子控制元件以外,我們通過右鍵生成的布局物件(QtCreator自動生成的,其物件id也是自動生成的),也是frame的子控制元件,QHBoxLayout通過addWidget函式將frame的所有直接子控制元件添加到布局中進行布局,而我們在工具箱中拖動布局控制元件到頂級視窗UI界面之后,實際上QtCreator自動生成了一個QWidget作為該布局控制元件的容器,并且自動生成的這個QWidget的父控制元件就是頂級的MainWindow視窗,也就是說我們每往UI界面上拖放一個布局控制元件,那么QtCreator會為該布局控制元件自動生成一個QWidget作為該布局控制元件的容器(也就是父控制元件),并且該自動生成的QWidget的父控制元件就是布局控制元件被拖動到的位置所在的直接容器,例如:

1

當選定一個布局控制元件(如果該布局控制元件是從工具箱拖放到UI上的,則其在UI設計器上是可以看到的),或者是選擇一個容器控制元件的時候(如果該容器控制元件已經通過右鍵的方式指定了布局方式),這兩種情況下在QtCreator的屬性欄上就可以看到布局的相關屬性:

1

如果是從工具箱中拖放的布局控制元件,那么其屬性中的Margin默認都是0 ,如果是通過右鍵為容器控制元件指定的布局,那么該布局的Margin默認是9,所以這種方式下可以看到如果此時相容器控制元件中添加子控制元件,那么子控制元件與容器控制元件之間是有間隙的,除非將這里的屬性手工改為0,layoutSpacing引數對于這兩種方式產生的布局默認值都是6,表示該布局中的子控制元件之間的間隔是6

QT中的通用控制元件

QT中最常用的控制元件QPushButton(按鈕)、QLineEdit(文本框)、QRadioButton(單選框)、QCheckBox(復選框)、QFrame(一般用作容器控制元件,配合布局)、QProgressBar(進度條控制元件)這些控制元件的使用方法都非常簡單,查一下幫助檔案就可以搞定,下面的章節中,我們會講解另外的一些控制元件的常用但是卻不是很容易找到的功能,

QVariant 型別

再講解其他控制元件之前,我們需要先了解Qt中的QVariant型別,為什么呢,因為需要為控制元件系結資料,就離不開對QVariant型別的了解,下面章節中我們要說到的一些控制元件,在系結資料的時候就會使用QVariant型別,他除了可以包裹Qt中常見的QString,int等型別之外,還可以包裹自定義的類物件,該型別提供了一系列的建構式以及轉換函式來攜帶常見型別的資料,和轉換到常見型別資料的方法:

QVariant(int val)

QVariant(uint val)

QVariant(qlonglong val)

QVariant(qulonglong val)

QVariant(bool val)

QVariant(double val)

QVariant(float val)

QVariant(const char * val)

QVariant(const QString & val)

QVariant(const QDate & val)

QVariant(const QTime & val)

QVariant(const QDateTime & val)



bool    toBool() const

QByteArray  toByteArray() const

QChar   toChar() const

QDate   toDate() const

QDateTime   toDateTime() const

double  toDouble(bool * ok = 0) const

float   toFloat(bool * ok = 0) const

int toInt(bool * ok = 0) const

QJsonArray  toJsonArray() const

qlonglong   toLongLong(bool * ok = 0) const

QString toString() const

QTime   toTime() const

uint    toUInt(bool * ok = 0) const

qulonglong  toULongLong(bool * ok = 0) const

這只是其中的一部分,其實還包括了一些畫圖相關的型別的封裝,例如QPoint,QRect等,當然Qt提供的是使用頻率很高的常見的型別,有時候我們需要系結自己定義的類物件,例如物體類:

//設定

MyClass myclass;

QVariant courseModelVariant=QVariant::fromValue(myclass);

     

//獲取

myclass = courseModelVariant.value<MyClass>();


這樣我們就可以使用QVariant攜帶任意資料型別了

QComboBox控制元件

下拉串列框控制元件最常見的功能需求就是為該控制元件添加下拉專案,并且為每個下拉專案添加對應的自定義隱藏資料,例如在下拉串列中每一項上面顯示的文字描述是給用戶看的,然而在程式中,我們可能需要該專案對應的隱藏資料,例如ID甚至是自定義的物件,

QComboBox類使用QComboBox::addItem(const QString &atext, const QVariant &auserData)成員函式為下拉串列添加專案,第一個引數text表示顯示在下拉項中的文字,而第二個引數我們可以利用來為該項系結自定義的資料,其型別為QVariant型別,我們可以通過QVariant型別方便的為該下拉項關聯任意自定義的資料型別,

在獲取資料的時候,通過QComboBox:: currentData(int role = Qt::UserRole)函式獲取當前選中下拉項關聯的QVariant型別的資料,也可以通過QComboBox:: itemData(int index, int role = Qt::UserRole)獲取指定下拉項的關聯資料,通過currentText()、itemText(int index)可以獲取下拉項上顯示的文本,

QTableWidget控制元件

QTableWidget是Qt中的表格顯示控制元件,與C#中的Grid、GridView類似,主要是用來系結資料,在UI設計界面中選中該控制元件之后可以在屬性欄對控制元件的屬性進行設定,最常用的屬性有如下:

focusPolicy 焦點策略,如果設定為NoFocus可以去掉單擊時候現實的單元格的虛線框
contextMenuPolicy 可以設定右鍵選單
frameShape 設定外邊框,一般設定為NoFrame去掉邊框
editTriggers觸發單元格的編輯狀態,值NoEditTriggers表示不觸發編輯狀態
selectionMode選擇模式,值ExtendedSelection表示多選
selectionBehavior選擇行為,值SelectRows按行選擇
showGrid是否顯示網格線
rowCount行數
columnCount列數
horizontalHeaderVisible是否顯示水平表頭
verticalHeaderVIsible是否顯示垂直表頭
verticalScrollBarPolicy設定垂直滾動條策略
horizontalScrollBarPolicy設定水平滾動條策略

另外的一些比較實用的功能代碼:
在單元格中添加控制元件:

QComboBox *comBox = new QComboBox();

comBox->addItem("F");

comBox->addItem("M");

ui->qtablewidget->setCellWidget(0,3,comBox);//這里不是setItem而是setCellWidget

為單元格添加checkBox:

QTableWidgetItem *item = new QTableWidgetItem();

//設定item的check狀態的時候,item會自動變成QCheckBox的樣子,

//不必通過setCellWidget專門插入QCheckBox控制元件

//通過item->checkState()可以獲取該item是否勾選

item->setCheckState(Qt::Unchecked);

ui->tableWidgetCourseList->setItem(rowIndex, columnIndex, item);

單元格中顯示字串:

QTableWidgetItem *item = new QTableWidgetItem(QString("xx"));

ui->tableWidgetCourseList->setItem(rowIndex, columnIndex, item);

設定單元格關聯的自定義資料:

QTableWidgetItem *item = new QTableWidgetItem(QString(""));

QVariant courseModelVariant=QVariant::fromValue(MyClass("xx"));

item->setData(USER_DEFINE_ROLE,courseModelVariant);

this->ui->tableWidgetCourseList->setItem(rowIndex, columnIndex, item);

獲取單元格關聯的自定義資料:

QTableWidgetItem * item = this->ui->tableWidgetCourseList->item(row,col);

Myclass model = item->data(USER_DEFINE_ROLE).value<MyClass>();

設定單元格中的文本對齊方式

ui->tableWidgetCourseList->item(rowIndex, columnIndex)->setTextAlignment(Qt::AlignCenter);

通過x,y坐標獲取所在的item物件

QModelIndex index = ui->tableWidgetCourseList->indexAt(QPoint(x,y));

int row = index.row();

int col = index.column();

QTableWidgetItem * item = ui->tableWidgetCourseList->item(row,col);

設定表頭的列寬

ui->tableWidgetCourseList->horizontalHeader()->resizeSection(colIndex,20);//寬20

設定列寬自適應

ui->tableWidgetCourseList->horizontalHeader()->setSectionResizeMode(colIndex,QHeaderView::Stretch);

初始化表頭文本

QStringList headerText;

headerText.append("列1");

headerText.append("列2");

headerText.append("列3");

ui->tableWidgetCourseList->setHorizontalHeaderLabels(headerText);


在表頭上添加復選框不能通過在表頭單元格中添加QCheckBox的方式實作,必須進行重繪,下面的代碼是我們自定義的表頭類為表頭添加復選框按鈕:

myqheaderview.h的內容:

//該類實作自定義的表頭,主要是為了在表頭中加入CheckBox控制元件
class MyQHeaderView : public QHeaderView
{
    Q_OBJECT
public:
    explicit MyQHeaderView(Qt::Orientation orientation, QWidget *parent = 0);
 
    void setChecked(bool checked);
 
signals:
    void headCheckBoxToggled(bool checked);
 
protected:
    void paintSection(QPainter *painter, const QRect &rect, int logicalIndex) const;
    void mousePressEvent(QMouseEvent *event);
 
private:
    QRect checkBoxRect(const QRect &sourceRect) const;
 
    bool m_isOn;
};

myqheadview.cpp的內容:

MyQHeaderView::MyQHeaderView(Qt::Orientation orientation, QWidget *parent)
    : QHeaderView(orientation, parent)
    , m_isOn(false)
{
    // set clickable by default
    setChecked(false);
}
 
void MyQHeaderView::setChecked(bool checked)
{
    if (isEnabled() && m_isOn != checked)
    {
        m_isOn = checked;
        updateSection(0);
        emit headCheckBoxToggled(m_isOn);
    }
}
 
void MyQHeaderView::paintSection(QPainter *painter, const QRect &rect, int logicalIndex) const
{
    painter->save();
    QHeaderView::paintSection(painter, rect, logicalIndex);
    painter->restore();
    if (logicalIndex == 0)
    {
        QStyleOptionButton option;
        if (isEnabled())
            option.state |= QStyle::State_Enabled;
        option.rect = checkBoxRect(rect);
        if (m_isOn)
            option.state |= QStyle::State_On;
        else
            option.state |= QStyle::State_Off;
        style()->drawControl(QStyle::CE_CheckBox, &option, painter);
    }
}
 
void MyQHeaderView::mousePressEvent(QMouseEvent *event)
{
    if (isEnabled() && logicalIndexAt(event->pos()) == 0)
    {
        m_isOn = !m_isOn;
        updateSection(0);
        emit headCheckBoxToggled(m_isOn);
    }
    else QHeaderView::mousePressEvent(event);
}
 
QRect MyQHeaderView::checkBoxRect(const QRect &sourceRect) const
{
    QStyleOptionButton checkBoxStyleOption;
    QRect checkBoxRect = style()->subElementRect(QStyle::SE_CheckBoxIndicator,
                                                 &checkBoxStyleOption);
    QPoint checkBoxPoint(sourceRect.x()+5,
                         sourceRect.y() +
                         sourceRect.height() / 2 -
                         checkBoxRect.height() / 2);
    return QRect(checkBoxPoint, checkBoxRect.size());


使用自定義表頭:

MyQHeaderView*myHeader=new MyQHeaderView(Qt::Horizontal, ui->tableWidgetCourseList);

ui->tableWidgetCourseList->setHorizontalHeader(myHeader);


為QTableWidget添加一行資料實際上是根據行數和列數,回圈QTableWidget的所有單元格,對每個單元格item設定資料來實作的,

QTabWidget控制元件

該控制元件類就是一個選項卡控制元件,有多個tab頁,下面是一些實用的方法:

切換到tab:

ui->tabWidgetExportEdit->setCurrentIndex(tabIndex);

移除選項卡

ui->tabWidgetExportEdit->removeTab(tabIndex);


關于選項卡控制元件的操作不多,重要的是怎么美化控制元件的顯示,QSS將會作為單獨的一篇文章來講解如何美化Qt中的各種控制元件,

QWebview控制元件

該控制元件是用于在Qt中顯示網頁的控制元件,一般而言會將contextMenuPolicy屬性設定為NoContextMenu隱藏系統為其提供的默認右鍵選單

<1>. 加載網頁:

ui->webViewCut->load(QUrl("http://www.baidu.com"));

//如果是本地網頁,必須使用file:///的前綴作為網頁地址

ui->webViewCut->load(QUrl("file:///c:/test.html "));

<2>. Qt代碼中呼叫QWebview加載的網頁中的js函式

//先作如下設定

ui->webViewCut->page()->setForwardUnsupportedContent(true);

ui->webViewCut->page()->settings()->setAttribute(QWebSettings::JavascriptEnabled, true);

ui->webViewCut->page()->settings()->setAttribute(QWebSettings::PluginsEnabled, true);

ui->webViewCut->page()->settings()->setAttribute(QWebSettings::JavaEnabled, true);

ui->webViewCut->page()->settings()->setAttribute(QWebSettings::AutoLoadImages, true);



//然后在QWebview的loadFinished槽函式中呼叫js,該槽函式表示網頁已經加載完畢

QString js = QString("alert(\'hello Qt!\')");

ui->webViewCut->page()->mainFrame()->evaluateJavaScript(js);


默認情況下在QwebViewCut中的網頁里面的js不能直接呼叫Qt中的相關功能,這涉及到安全性問題,要滿足js中呼叫Qt的功能必須滿足下面的條件:<3>. 在QWebview加載的html的js代碼中呼叫Qt的函式:

在Qt中暴露一個物件給js,然后js就可以在網頁中直接使用這個物件以及該物件的[特定]函式,要求是被暴露Qt物件必須繼承自QObject類,并且在js中呼叫這個暴露的物件的成員函式的定義是有要求的,該物件的滿足下面的要求的成員函式都可以直接被js呼叫:

1.必須是該物件的公共函式,并且在函式宣告前面添加Q_INVOKABLE修飾,例如:

public :

 Q_INVOKABLE int TestQt();

2.如果該函式被宣告成一個public slot 也可以不添加Q_INVOKABLE修飾

public slots:

  void TestQt();


那么this->ui->webViewCut->page()->mainFrame()->addToJavaScriptWindowObject("QtObj", this);代碼在什么時候執行呢? 推薦是在QWebFrame的信號javaScriptWindowObjectCleared發出的時候執行,所以我們可以在當前UI界面類的建構式中添加下面的代碼:個人認為第一種方法更好,因為可以設定回傳值,而Qt的槽函式是沒有回傳值的,都是回傳void,只需要呼叫this->ui->webViewCut->page()->mainFrame()->addToJavaScriptWindowObject("QtObj", this); 就可以將一個Qt物件,也就是這里傳遞的this代表的物件,當然也可以直接傳遞其他物件指標,暴露給網頁中的javascript,網頁中的javascript在呼叫的時候可以直接使用 QtObj 去參考我們的Qt物件,以及通過QtObj去直接呼叫符合條件的Qt物件的成員函式,

connect(ui->webViewCut->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),

    this, SLOT(populateJavaScriptWindowObject()));


然后在處理javaScriptWindowObjectCleared()信號的槽函式中實作上述暴露功能

void MainWindow::populateJavaScriptWindowObject()

{

   ui->webViewCut->page()->mainFrame()->addToJavaScriptWindowObject("QtObj", this);

}


<4>. 將Qt的屬性暴露出去供js呼叫,使用如下方法:根據Qt檔案上對該信號的描述javaScriptWindowObjectCleared()這個信號會在我們呼叫QwebViewCut::load()加載新的url之前就觸發,我們在這個時候去處理這個信號,將我們需要暴露的Qt物件暴露給即將載入的網頁

Q_PROPERTY(int Qtvalue READ testValue WRITE setTestValue)

將上面的陳述句加入到類的宣告中,在private塊下面就可以,最后不需要以分號結尾,例如

private:

 Q_PROPERTY(int Qtvalue READ testValue WRITE setTestValue)

這一行的作用是將屬性 Qtvalue 注冊到Qt的元物件系統中,在js中可以通過名字Qtvalue來訪問該屬性,但在js中訪問該屬性的時候假設Qt暴露給js的物件為QtObj,那么在js中可以這樣訪問該屬性

QtObj.Qtvalue = 10; //設定該屬性的時候會呼叫void setTestValue(int)

alert(QtObj.Qtvalue) //獲取該屬性的時候會呼叫 int testValue()

Q_PROPERTY(int Qtvalue READ testValue WRITE setTestValue)的結構如下

Q_PROPERTY( 型別   屬性名    READ     回傳屬性值的函式    WRITE     設定屬性值的函式 )

            int   Qtvalue           int testValue()          void setTestValue(int)


經過實驗int testValue()void setTestValue(int)函式的宣告在private區域也可以,好像無所謂,其實這兩個函式的名字是可以隨意定的,對js暴露的屬性名是Qtvalue,當訪問Qtvalue屬性的時候,會自動呼叫Q_PROPERTY宣告中READ后面指定的函式去獲取值,并且呼叫WRITE后面指定的函式去設定值,而不在乎這兩個函式的名字,也就是說在js中我們可以直接使用Qtvalue,當獲取Qtvalue的值的時候會自動呼叫暴露物件的 int testValue() 函式 ,Qt規定其回傳值必須與Q_PROPERTY陳述句中指定的型別相同,并且必須沒有引數,當我們為Qtvalue設定值的時候會呼叫暴露物件的void setTestValue(int)函式,該函式必須有一個int型別的引數(型別也必須與前面Q_PROPERTY陳述句中指定的型別相同),并且不能有回傳值,

另外這兩個函式獲取的值或者設定的值從哪里得來呢,我們可以在Qt物件中定義一個私有變數來保存這個值,而這個私有變數的名字是無所謂的,甚至如果需要的話,我們也不必保存這個值,直接在函式testValue里面回傳一個常量值,也就是說是否應該定義一個私有變數來保存Qtvalue相關聯的屬性值,這個也不是必須的,

更多Qt QWidget與js的互動可以在Qt檔案中搜索 The Qt WebKit Bridge關鍵字,其實Q_PROPERTY并不是專用于暴露屬性給js的,Q_PROPERTY是Qt元物件系統的一部分,

<5>. 如果在QWebview加載的網頁中有Flex應用程式,并且Qt中呼叫該QWebview加載的網頁中的js函式中需要呼叫flex程式暴露給js的介面,那么還需要作如下設定:

"%appdata%\Macromedia\Flash Player\#Security\FlashPlayerTrust\"路徑下新建xxx.cfg檔案,將當前flex應用程式所在位置(也就是swf檔案所在的目錄)填寫到該檔案中即可,該xxx.cfg的名字是無所謂的,隨便什么名字,在xxx.cfg檔案中指定的目錄路徑中的swf檔案的運行是被信任的,xxx.cfg檔案中可以指定多個目錄,每行一個,實際上%appdata%\Macromedia\Flash Player\#Security\FlashPlayerTrust\路徑下也可以有多個檔案名不同的cfg檔案,xxx.cfg檔案中指定的目錄實際上可以直接指定為根目錄,例如swf檔案的路徑是F:/xxx/yyy/zzz/test.swf,那么我們新建的xxx.cfg中的內容的第一行可以直接指定為F:/即可,

其實FlexBuilder在建立專案的時候,其生成的swf所在的目錄都被添加到了%appdata%\Macromedia\Flash Player\#Security\FlashPlayerTrust\下面的flashbuilder.cfg中了,所以使用FlexBuilder除錯專案的時候,運行的swf都是被信任的,

使用QSS

QSS是Qt中的樣式表,用來定義Qt中控制元件的外觀,實際上QSS的語法與屬性大量參考了CSS,如果你有web的CSS開發經驗,幾乎沒有任何障礙就可以掌握QSS,QSS中的選擇器基本上與CSS中的相同,但是QSS只有幾種常用的選擇器型別,

QSS中選擇器的型別:

<1>. 型別選擇器,例如:QPushButton{} 設定所有型別是QPushButton或者繼承自QPushButton的控制元件的樣式,
<2>. 屬性選擇器,例如:QPushButton[flat="false"]{} 設定所有flat屬性是false的QPushButton控制元件的樣式,
<3>. 類選擇器,例如:.QPushButton{} 設定所有QPushButton的樣式,但是不會設定繼承自QPushButton型別的控制元件的樣式,QSS中的類選擇器與CSS中的含義不同,QSS中的類選擇器點號后面指定的類的名稱,而CSS中的類選擇器中的點號后面指定的是HTML標簽中的class屬性的名稱,
<4>. ID選擇器,例如:#okButton{} 設定所有物件名(object name)為okButton的控制元件的樣式,
<5>. 后代選擇器,例如:QDialog QPushButton{} 設定所有QDialog中的QPushButton子控制元件的樣式,只要是QDialog的子控制元件都會應用該樣式,包括直接或非直接的子控制元件,
<5>. 直接子選擇器:例如 QDialog > QPushButton{} 設定所有是QDialog直接子控制元件的QPushButton的樣式,
<6>. QSS支持選擇器分組,支持選擇器組合,例如:QPushButton#okButton{} 設定所有ID為okButton的QPushButton控制元件的樣式,#okButton,#cancelButton{} 設定id為okButton、cancelButton的控制元件的樣式,

那么如何在Qt中使用這些QSS設定控制元件的外觀呢,一般在代碼中通過呼叫控制元件物件的setStyleSheet(QString)成員函式進行設定,引數即是QSS字串,例如:

ui->btnTest->setStyleSheet("border:1px solid red;");//設定按鈕的邊框

另外我們可以將所有的QSS放到檔案中,例如main.qss,然后將該檔案添加到Qt的資源檔案中,在主UI界面中加載該main.qss檔案,并呼叫主UI界面類的成員函式設定其下控制元件的樣式

QFile file(":/qss/main.qss");

file.open(QFile::ReadOnly);

QTextStream filetext(&file);

QString stylesheet = filetext.readAll();

this->setStyleSheet(stylesheet);

file.close();


有關QSS的細節很多,而且每個控制元件的美化技巧不同,同時QSS中還提供了偽類,子控制元件樣式等功能,限于篇幅,本節只做一個大致的介紹,后面將會單獨一篇文章詳細講解QSS的細節,以及如何美化Qt中的各種常見控制元件,要注意的是main.qss中設定的樣式應該是針對當前UI界面上的控制元件的,也就是這里呼叫的this->setStyleSheet(stylesheet);中的this就是當前UI界面的類的實體,

編碼問題

之前在寫Qt程式的時候,如果在原檔案中的字串直接寫中文,例如有些地方需要彈出錯誤或者警告的對話框提示,那么提示內容就是中文資訊,我發現有部分字符會出現亂碼,并且有時候編譯的時候會報錯:error C2001: 常量中有換行符這一般是編碼問題,我是這么解決的,在包含中文(即使是注釋中有中文有時候也報錯)的源檔案的開頭加入 #pragma execution_character_set("utf-8") 這一行指定檔案的編碼,同時使用UE編輯器打開該檔案,另存為UTF-8的編碼,在QtCreator中重新打開即可,遇到跟我同樣問題的人也可以試一下這個辦法,

QT的記憶體管理

這一小節說題目命名為QT的記憶體管理,題目有點過大,其實我在寫Qt程式的時候,包括Qt的例子程式,中經常出現類似如下的代碼:

void MainWidget::on_btnClick()

{

    QLabel * lblMessage = new QLabel(“hello”,this);

    lblMessage->show();

}


似乎Qt中new出來的控制元件型別都只負責new不用delete的,感到很奇怪,后來經過查資料發現很多人有同樣的疑問,有人給出原因是因為Qt中的所有的控制元件類是繼承自QObject類,如果在new的時候指定了父親(在建構式的引數中有parent這個引數),那么它的清理是在其父親被delete的時候被delete的,Qt不建議程式員在代碼中手工delete一個QObject,如果一定要這么做,需要使用QObject的deleteLater()函式,否則可能出現Qt正在一級一級的從一個父親類開始清理下面的所有子物件的時候,程式中手工呼叫delete也去清理其中的子物件,那么這個時候就可能出現問題,所以建議使用deleteLater()函式,它會讓所有事件都發送完成之后再清理該片記憶體,

QT的信號槽

在大多數Qt的編程中,我們通過Qt信號槽機制來對滑鼠或鍵盤在界面上的操作進行回應處理,例如滑鼠點擊按鈕的處理,Qt中的控制元件能夠發出什么信號,在什么情況下發射信號,這在Qt的檔案中有說明,每個不同的控制元件能夠發射的信號種類和觸發時機也是不同的,

如何為控制元件發射的信號指定對應的處理槽函式呢,我們有兩種方式,第一種是在UI設計界面上操作:
1

在按鈕控制元件上點擊右鍵,選擇“轉到槽”選單之后彈出如下的對話框:

1

可以看到按鈕控制元件會發射很多信號,只要選擇一個信號,點擊OK之后就會生成對應的槽函式對按鈕發出的該信號進行處理

選擇clicked()信號之后生成的處理該信號的槽函式,除了通過UI界面自動生成槽函式的方式以外,我們還可以在代碼中自己手寫槽函式,并通過QObject::connect()函式將特定物件的信號與另外一個物件的槽函式進行連接,當該物件的信號發射之后,會被關聯的物件的槽函式處理,例如我們可以用下面的一行代碼完成上面的功能

void MainWindow::on_btnTest_clicked()

{

}



connect(ui->btnTest,SIGNAL(clicked()),this,SLOT(on_btnTest_clicked()));


QT中繪圖

使用代碼的好處是,很多控制元件的信號在上面的對話框中并沒有顯示出來,也就是說上面的對話框中其實只列出了該控制元件物件的一部分信號,另外如果我們的物件是在程式中通過代碼動態構建的,那么我們也就需要在代碼中為該控制元件的信號指定處理的槽函式了,上面的connect代碼是我們直接在UI界面類的建構式中寫的(當然在任何地方都可以,并不一定要在建構式中),由于UI界面類也是繼承自QObject所以自然也繼承了connect函式,通過connect函式我們可以將一個物件的信號與另一個物件的槽函式進行連接,當個該物件的信號發射的時候(信號的發射時機有可能在代碼中呼叫物件的某個成員函式觸發,也有可能在程式的UI界面上操作滑鼠,鍵盤等觸發),

另外信號與槽在通過connect函式連接的時候,其引數型別必須完全一致,否則是沒有效果的,實際上信號槽的原理,是依賴于Qt的元物件系統,Qt的一系列的構建工具為程式員做了很多自動化的作業,自動生成了一些代碼,所以使得我們看起來只需要用connect函式進行關聯之后,在信號發射的時候(通過emit發射信號),槽函式會被自動呼叫,在我們的Qt的專案的debug目錄下,我們往往會看到很多以moc_為前綴的cpp檔案,打開這些檔案我們就可以看到該檔案中的qt_meta_data_為前綴的靜態陣列里面描述了信號槽的關聯資訊,而在qt_static_metacall函式的實作中,我們可以大致看到通過一系列的case分支,對應的槽函式被呼叫,如果要詳細研究Qt的信號槽的實作原理,可以研究QObject類的原始碼,以及Qt的元物件系統,

槽函式被slots修飾,當然它可以是普通的成員函式,信號被signals修飾,一個信號可以關聯多個槽函式,當信號被發射的時候,這些槽函式依次被執行,但是執行的順序是未知的,一個槽函式可以被多個信號關聯,一個信號也可以關聯另外一個信號,當該信號被發射的時候,與它關聯的信號也被發射,通過disconnect函式可以取消信號與槽函式之間的關聯關系,在槽函式中直接呼叫sender()就可以獲得觸發該槽函式的信號源物件,該函式是QObject的成員函式,回傳的也是一個QObject型別的指標,

另外信號槽可以在不同的執行緒之間使用,但是使用的時候需要注意呼叫connect時候指定連接的方式,不同的執行緒之間Qt可以通過訊息佇列來實作信號與槽函式的關聯,我經常在UI執行緒中關聯另外一個作業執行緒的信號到UI界面類中的成員函式,以便在作業執行緒中通過發送信號的方式來呼叫UI主執行緒中的UI界面類的成員函式,來達到更新UI界面的效果,Qt中不能在作業執行緒中直接對UI界面控制元件進行操作,有關信號的連接方式可以參考這篇文章:對信號與事件的認識

我們可以在Qt中繪圖,在Qt的控制元件上繪圖,一般是需要重寫該控制元件的重繪事件的,例如:

void MovieImageWidget::paintEvent(QPaintEvent*p)

{

    QPainter painter(this);

    if(this->currentImagePath!="")

    {

        QImage image(this->currentImagePath);

        QRect rect(0,0,this->width(),this->height());

        painter.drawImage(rect,image);

    }

}


在重繪事件中,我們先建立一個基于控制元件的QPainter物件,然后在重繪事件函式中,我們就可以利用該painter物件的一系列的繪制函式進行繪圖操作了,繪制的圖形會在該Painter關聯的控制元件上顯示,其原點坐標是從該控制元件的左上角開始的,在需要的時候我們可以手工呼叫控制元件的update()函式,這樣會直接觸發重繪事件進行重繪,

QPainter類提供的一系列的draw函式可以幫助我們繪制各種各樣的圖形,這里就不再舉例說明,可以自行查閱Qt的幫助檔案,

QT的執行緒

Qt的執行緒使用起來非常簡單,我們首先要建立一個自定義的類(例如MyThread),繼承自QThread,并實作其run方法即可,在使用執行緒的時候直接得到MyThread的實體,呼叫其start()函式即可啟動執行緒,執行緒啟動之后會自動呼叫其實作的run方法,該方法就是執行緒的執行函式,我們的執行緒任務就寫在這里,當run退出之后執行緒基本就結束了,QThread有一個started和finished信號,我們可以為這兩個信號指定槽函式,在執行緒啟動和結束的時候執行一段代碼進行資源的初始化和資源的釋放操作,

QT中使用第三方的dll

通過QtCreator的向導可以非常方便的在Qt程式中使用第三方的dll,具體步驟如下:

1

在專案上點擊右鍵,選擇“添加庫”選單

1

選擇外部庫

1

指定對應的lib檔案,以及頭檔案的包含路徑,設定平臺為windows,選擇庫的連接型別然后點擊下一步

1

最后點擊完成既可,可以看到實際上在Qt的個工程檔案中,也就是pro檔案中添加了如下的代碼:

win32: LIBS += -L$$PWD/E://trans/ -lTransAPI

INCLUDEPATH += $$PWD/E:/trans/include

DEPENDPATH += $$PWD/E:/trans/include

win32:!win32-g++: PRE_TARGETDEPS += $$PWD/E:/trans/TransAPI.lib

else:win32-g++: PRE_TARGETDEPS += $$PWD/E:/trans/libTransAPI.a


在需要使用的地方,包含頭檔案之后就可以就可以直接呼叫庫里面的函式了,使用方式與VC中沒有區別,

QT中為控制元件添加右鍵選單的方法

在Qt中QWidget控制元件以及其子類都可以添加右鍵選單,Qt中所有界面上顯示的控制元件基本都繼承自QWidget控制元件,所以基本上Qt中的控制元件都可以添加右鍵選單,下面舉例說明為按鈕添加右鍵選單的方法:
<1>. 在UI設計界面中選中按鈕,在屬性欄中設定其屬性contextMenuPolicy的值為CustomContextMenu(如果控制元件是在代碼中生成,可以通過控制元件物件的成員函式setContextMenuPolicy()在代碼中設定)
<2>. 在UI設計界面的按鈕上單擊右鍵,轉到槽,在彈出的對話框中選擇customContextMenuRequested(const QPoint&),單擊確定,為按鈕的該信號指定槽函式,在代碼中可以通過connect手工關聯,
<3>. 在該槽函式中生成選單代碼如下:

void MainWindow::on_menu_click(bool checked)

{

    //通過sender()得到信號的發送物件,也就是哪個選單項被單擊

}



void MainWindow::on_btnTest_customContextMenuRequested(const QPoint &pos)

{

    QMenu *cmenu = new QMenu(ui->btnTest);

    QAction *action1 = cmenu->addAction("Menu 1");

    QAction *action2 = cmenu->addAction("Menu 2");

    QAction *action3 = cmenu->addAction("Menu 3");

    connect(action1, SIGNAL(triggered(bool)), this, SLOT(on_menu_click(bool)));

    connect(action2, SIGNAL(triggered(bool)), this, SLOT(on_menu_click(bool)));

    connect(action3, SIGNAL(triggered(bool)), this, SLOT(on_menu_click(bool)));

    cmenu->exec(QCursor::pos());

}


除了上面的方法之外,還可以通過重寫contextMenuEvent()事件來實作右鍵選單,這里就不細說了,可以自行百度,當然這里僅僅是demo代碼,每次點擊右鍵的時候,我們都要重新new出選單來,這樣肯定會耗費資源,這些選單創建的代碼可以放在一個全域的函式中,只需要創建一次,但是cmenu->exec(QCursor::pos());這條陳述句是顯示選單用的,執行之后選單才能顯示出來,所以每次槽函式被執行的時候都需要呼叫一次來呼出選單,

最終顯示效果如下:

1

結束語

本篇總結性的講解了Qt的諸多方面的知識點,有些地方限于篇幅,可能需要單獨另起一篇文章進行講解,有的是我自己也并沒有完全弄透徹怕誤人子弟,

由于公司需要開發一個視窗程式,要求不需要安裝附帶的框架,所以.NET就被排除在外了,因為公司之前有同事使用WPF開發過其他的程式,界面也比較漂亮,但是工程部的同事在外面部署的時候由于安裝框架的原因經常出現各種系統問題,至于MFC太古老,學習周期長,所以也被排除,另外兩個一個是Flex AIR,一個是Qt,權衡之下還是選擇了Qt,經過一個月的邊學邊做,效果還可以,其實Qt還是比較好學的,基本上熟練掌握了QSS的話,也可以實作非常好的界面效果,而且還是跨平臺的,特別是在嵌入式系統中,如果需要顯示界面的話,會是一個非常好的選擇

轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/229473.html

標籤:其他

上一篇:CSS特效七:Hover下拉選單

下一篇:PHP實作登錄注冊-LMAP示例

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low,請各位大佬留情,一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁,頂部多層導航

    一個個人用的瀏覽器首頁,可以把一下常用的網站放在這里,平常打開會比較方便。 第一步,HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式,需要用到$(window).height(); 由于手寫demo的時候,過于自信,其實對前端方面的認識也不夠體系,用文本檔案直接敲出來的html代碼,第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前,必須要做好網站資料的備份,這個問題良家佐言是遇見過的;在剛開始接觸WordPress博客程式的時候,因為升級問題和博客網站的修改的一些嘗試,良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名,每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統,受到英文博客愛好者和中文博客愛好者的追捧,并逐步演化成一款內容管理系統軟體;它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新,就會牽動無數WordPress愛好者的心, ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果,首字改變樣式或者首行改變樣式,效果如下圖。 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽? <a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。 a標簽的語法格式:<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中,鏈接的默認外觀如下: 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址: 鏈接:https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼:4aks swiper.min.css地址 鏈接:https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片(全屏顯示,且不拉伸)

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解(上)

    HTML詳解 初識HTML Hyper Text Markup Language(超文本標記語言) 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽,描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年,面對生產環境,盡管都是小心翼翼,慎之又慎,還是難免捅出簍子。輕則滿頭大汗,面紅耳赤。重則系統停擺,損失資金。每一個生產事故的背后,都是寶貴的經驗和教訓,都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故,特開此專題,長期更新和記錄大大小小的各類事故。有些是親身經歷,有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 打開游戲界面,看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上,有一個白色的矩形框,里面不斷下落著各種單詞,而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配,那么我就可以獲得得分;如果我輸入的單詞錯誤或者時間過長,那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前,了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子,引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板(滑鼠和觸摸)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作,和在桌面端做法基本一致。 首先,使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流,并將其傳遞給 <video> 標簽進行渲染。 接著,使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 短視頻已經無數不在了,但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲,一圖頂百辯,且看下圖: 網址鏈接(需在微信或者手Q中瀏覽) 從上圖可以看到,我們主要實作的功能也是本文要講解的有: ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網(www)誕生,HTTP(HyperText Transfer Protocol)經歷了眾多版本迭代,WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more