編譯環境與開發流程
開發QT有兩種IDE可以使用，一種是使用 VS + Qt 的插件，另一種就是使用QtCreator工具。前一種是微軟的工具，用的都比較多容易上手，缺點是信號槽的支持不太好，需要手寫，不能自動生成，另外可能有中文編碼的問題。后一種是Qt的官方IDE，智能提示與調試功能不如VS強大，但是是跨平台的IDE，其QtDesigner設計UI界面操作比較方便，並且由於是QT官方的IDE，對編碼等支持都比較好，里面集成了Qt的幫助文檔。不得不說Qt的幫助文檔做的是非常好的，集成進QtCreator環境之后更加方便。
我開發的時候使用的是QtCreator開發，目前除了調試功能比VS差以外，其他的用的比較順手，QtCreator是跨平台的，ubuntu上也是可以使用，打開之后界面如下：
下面將對QtCreator的界面各個功能進行大致的介紹：
我們建立一個示例項目，選擇“文件”—“新建文件或項目”—“應用程序”—“QT Widgets Application”選擇之后都選擇默認設置，根據提示，就得到了一個項目，我們的UI是一個基於QMainWindow的類，默認提供菜單欄，狀態欄。如果不需要這些，可以建立一個基於QWidget的UI類，項目如圖所示：
QT項目的構成及原理
將項目切換到編輯模式，如下：
這個項目中一共有4個文件，入口文件main.cpp、mainwindow.ui文件、mainwindow.h和mainwindow.cpp后台源文件，在main函數中直接調用MainWindow類的show()方法顯示主界面，那么我們切換到UI的設計視圖(雙擊項目中的mainwindow.ui文件)，在主界面上添加兩個控件：
我們看一下MainWindow.cpp的代碼里面應該如何操作界面上的控件：
我們使用的是ui->txtName->text();這樣的語句，也就是說並不是像在C#中一樣在后台代碼中直接可以通過類似this->txtName->text()的語句去訪問界面上的控件對象，而MainWindow類中有一個成員變量是ui，其類型是Ui::MainWindow，通過這個ui成員去訪問界面上的元素，那么這些界面控件是如何初始化的呢? 我們需要查看ui成員變量的類型Ui::MainWindow的實現，注意Ui::Mainwindow類與MainWindow類是不同的兩個類，Ui::MainWindow類是在命名空間Ui下的類，而MainWindow是沒有命名空間的，我們在mainwindow.h中可以看到：
MainWindow中的私有成員變量ui實際上是Ui::MainWindow類型的指針，那么Ui::MainWindow是如何定義的呢? 用鼠標點進去就看到了：
從這里就可以看出為什么我們的MainWindow類的構造函數中一進來就調用ui->setupUi(this)去初始化界面了
QT中的布局
QT中有四種布局方式，分別是：Vertical垂直布局、Horizontal水平布局、Grid布局、Form布局，效果如下：
其實Grid布局感覺跟HTML中的Table差不多，Form布局好像也是表格的效果，至於這兩種布局的差異在哪里我也不是很清楚，項目中基本沒有用過這兩種布局方式，一般而言所有的效果都可以通過水平布局和垂直布局嵌套實現。結合水平布局和垂直布局，以及他們之間的相互嵌套，再結合使用自動伸縮調節的占位控件HorizontalSpacer和VerticalSpacer就可以實現非常復雜的布局效果。
一般使用布局有兩種方式，第一種即拖放這些布局控件到UI界面上，然后將希望布局的子控件拖放到這些布局控件中，但是這種方式個人認為不夠靈活，特別是在控件之間希望嵌套的時候，工具箱中的布局控件如下：
另外一種使用方式，QT的容器控件(那些能夠放子控件的控件)都可以為其指定一種布局方式，當為一個容器控件指定布局方式之后，該容器控件就會以這種布局方式來約束其所有子控件，直接在Qt設計器的容器控件中右鍵就可以設置：
我們在一個QFrame控件中放入兩個子控件，一個文本框一個按鈕，之后在QFrame的空白處右鍵單擊，在其右鍵菜單“布局”的子菜單中就可以指定該控件的布局模式了。實際上在代碼上的原理是一樣的，我們在QtCreator生成的ui_mainwindow.h中可以看到關於frame以及子控件和其布局設置的代碼：
可以看到是這么樣的關系，QFrame的子控件QPushButton以及QLineEdit(文本框)在構造的時候指定的父對象就是frame，而布局對象QHBoxLayout指定的父控件對象也是frame，也就是說除了我們在界面上看到的按鈕，文本框是frame的子控件以外，我們通過右鍵生成的布局對象(QtCreator自動生成的，其對象id也是自動生成的)，也是frame的子控件，QHBoxLayout通過addWidget函數將frame的所有直接子控件添加到布局中進行布局。而我們在工具箱中拖動布局控件到頂級窗口UI界面之后，實際上QtCreator自動生成了一個QWidget作為該布局控件的容器，並且自動生成的這個QWidget的父控件就是頂級的MainWindow窗口。也就是說我們每往UI界面上拖放一個布局控件，那么QtCreator會為該布局控件自動生成一個QWidget作為該布局控件的容器(也就是父控件)，並且該自動生成的QWidget的父控件就是布局控件被拖動到的位置所在的直接容器。例如：
當選定一個布局控件(如果該布局控件是從工具箱拖放到UI上的，則其在UI設計器上是可以看到的)，或者是選擇一個容器控件的時候(如果該容器控件已經通過右鍵的方式指定了布局方式)。這兩種情況下在QtCreator的屬性欄上就可以看到布局的相關屬性：
如果是從工具箱中拖放的布局控件，那么其屬性中的Margin默認都是0 ，如果是通過右鍵為容器控件指定的布局，那么該布局的Margin默認是9，所以這種方式下可以看到如果此時相容器控件中添加子控件，那么子控件與容器控件之間是有間隙的，除非將這里的屬性手工改為0，layoutSpacing參數對於這兩種方式產生的布局默認值都是6，表示該布局中的子控件之間的間隔是6
QT中的通用控件
QT中最常用的控件QPushButton(按鈕)、QLineEdit(文本框)、QRadioButton(單選框)、QCheckBox(復選框)、QFrame(一般用作容器控件，配合布局)、QProgressBar(進度條控件)這些控件的使用方法都非常簡單，查一下幫助文檔就可以搞定，下面的章節中，我們會講解另外的一些控件的常用但是卻不是很容易找到的功能。
QVariant 類型
再講解其他控件之前，我們需要先了解Qt中的QVariant類型，為什么呢，因為需要為控件綁定數據，就離不開對QVariant類型的了解，下面章節中我們要說到的一些控件，在綁定數據的時候就會使用QVariant類型。他除了可以包裹Qt中常見的QString，int等類型之外，還可以包裹自定義的類對象。該類型提供了一系列的構造函數以及轉換函數來攜帶常見類型的數據，和轉換到常見類型數據的方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
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提供的是使用頻率很高的常見的類型，有時候我們需要綁定自己定義的類對象，例如實體類：
|
1
2
3
4
5
6
|
//設置
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設置水平滾動條策略
另外的一些比較實用的功能代碼：
在單元格中添加控件：
|
1
2
3
4
|
QComboBox *comBox =
new
QComboBox();
comBox->addItem(
"F"
);
comBox->addItem(
"M"
);
ui->qtablewidget->setCellWidget(0,3,comBox);
//這里不是setItem而是setCellWidget
|
為單元格添加checkBox：
|
1
2
3
4
5
6
|
QTableWidgetItem *item =
new
QTableWidgetItem();
//設置item的check狀態的時候，item會自動變成QCheckBox的樣子,
//不必通過setCellWidget專門插入QCheckBox控件
//通過item->checkState()可以獲取該item是否勾選
item->setCheckState(Qt::Unchecked);
ui->tableWidgetCourseList->setItem(rowIndex, columnIndex, item);
|
單元格中顯示字符串：
|
1
2
|
QTableWidgetItem *item =
new
QTableWidgetItem(QString(
"xx"
));
ui->tableWidgetCourseList->setItem(rowIndex, columnIndex, item);
|
設置單元格關聯的自定義數據：
|
1
2
3
4
|
QTableWidgetItem *item =
new
QTableWidgetItem(QString(
""
));
QVariant courseModelVariant=QVariant::fromValue(MyClass(
"xx"
));
item->setData(USER_DEFINE_ROLE,courseModelVariant);
this
->ui->tableWidgetCourseList->setItem(rowIndex, columnIndex, item);
|
獲取單元格關聯的自定義數據：
|
1
2
|
QTableWidgetItem * item =
this
->ui->tableWidgetCourseList->item(row,col);
Myclass model = item->data(USER_DEFINE_ROLE).value<MyClass>();
|
設置單元格中的文本對齊方式：
|
1
|
ui->tableWidgetCourseList->item(rowIndex, columnIndex)->setTextAlignment(Qt::AlignCenter);
|
通過x，y坐標獲取所在的item對象：
|
1
2
3
4
|
QModelIndex index = ui->tableWidgetCourseList->indexAt(QPoint(x,y));
int
row = index.row();
int
col = index.column();
QTableWidgetItem * item = ui->tableWidgetCourseList->item(row,col);
|
設置表頭的列寬：
|
1
|
ui->tableWidgetCourseList->horizontalHeader()->resizeSection(colIndex,20);
//寬20
|
設置列寬自適應：
|
1
|
ui->tableWidgetCourseList->horizontalHeader()->setSectionResizeMode(colIndex,QHeaderView::Stretch);
|
初始化表頭文本：
|
1
2
3
4
5
|
QStringList headerText;
headerText.append(
"列1"
);
headerText.append(
"列2"
);
headerText.append(
"列3"
);
ui->tableWidgetCourseList->setHorizontalHeaderLabels(headerText);
|
為表頭添加復選框按鈕：
在表頭上添加復選框不能通過在表頭單元格中添加QCheckBox的方式實現，必須進行重繪，下面的代碼是我們自定義的表頭類
myqheaderview.h的內容：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//該類實現自定義的表頭,主要是為了在表頭中加入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的內容：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
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());
}
|
使用自定義表頭：
|
1
2
|
MyQHeaderView*myHeader=
new
MyQHeaderView(Qt::Horizontal, ui->tableWidgetCourseList);
ui->tableWidgetCourseList->setHorizontalHeader(myHeader);
|
為QTableWidget添加一行數據實際上是根據行數和列數，循環QTableWidget的所有單元格，對每個單元格item設置數據來實現的。
QTabWidget控件
該控件類就是一個選項卡控件，有多個tab頁，下面是一些實用的方法：
切換到tab：
|
1
|
ui->tabWidgetExportEdit->setCurrentIndex(tabIndex);
|
移除選項卡：
|
1
|
ui->tabWidgetExportEdit->removeTab(tabIndex);
|
關於選項卡控件的操作不多，重要的是怎么美化控件的顯示，QSS將會作為單獨的一篇文章來講解如何美化Qt中的各種控件。
QWebview控件
該控件是用於在Qt中顯示網頁的控件，一般而言會將contextMenuPolicy屬性設置為NoContextMenu隱藏系統為其提供的默認右鍵菜單
<1>. 加載網頁：
|
1
2
3
|
//如果是本地網頁，必須使用file:///的前綴作為網頁地址
|
<2>. Qt代碼中調用QWebview加載的網頁中的js函數：
|
1
2
3
4
5
6
7
8
9
10
|
//先作如下設置
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);
|
<3>. 在QWebview加載的html的js代碼中調用Qt的函數：
默認情況下在QwebViewCut中的網頁里面的js不能直接調用Qt中的相關功能，這涉及到安全性問題。要滿足js中調用Qt的功能必須滿足下面的條件：
在Qt中暴露一個對象給js，然后js就可以在網頁中直接使用這個對象以及該對象的[特定]函數，要求是被暴露Qt對象必須繼承自QObject類，並且在js中調用這個暴露的對象的成員函數的定義是有要求的，該對象的滿足下面的要求的成員函數都可以直接被js調用：
1.必須是該對象的公共函數，並且在函數聲明前面添加Q_INVOKABLE修飾，例如：
|
1
2
|
public
:
Q_INVOKABLE
int
TestQt();
|
2.如果該函數被聲明成一個public slot 也可以不添加Q_INVOKABLE修飾：
|
1
2
|
public
slots:
void
TestQt();
|
個人認為第一種方法更好，因為可以設置返回值，而Qt的槽函數是沒有返回值的，都是返回void，只需要調用this->ui->webViewCut->page()->mainFrame()->addToJavaScriptWindowObject("QtObj", this); 就可以將一個Qt對象，也就是這里傳遞的this代表的對象，當然也可以直接傳遞其他對象指針，暴露給網頁中的javascript，網頁中的javascript在調用的時候可以直接使用 QtObj 去引用我們的Qt對象，以及通過QtObj去直接調用符合條件的Qt對象的成員函數。
那么this->ui->webViewCut->page()->mainFrame()->addToJavaScriptWindowObject("QtObj", this);代碼在什么時候執行呢？ 推薦是在QWebFrame的信號javaScriptWindowObjectCleared發出的時候執行，所以我們可以在當前UI界面類的構造函數中添加下面的代碼：
|
1
2
|
connect(ui->webViewCut->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),
this
, SLOT(populateJavaScriptWindowObject()));
|
然后在處理javaScriptWindowObjectCleared()信號的槽函數中實現上述暴露功能：
|
1
2
3
4
|
void
MainWindow::populateJavaScriptWindowObject()
{
ui->webViewCut->page()->mainFrame()->addToJavaScriptWindowObject(
"QtObj"
,
this
);
}
|
根據Qt文檔上對該信號的描述javaScriptWindowObjectCleared()這個信號會在我們調用QwebViewCut::load()加載新的url之前就觸發，我們在這個時候去處理這個信號，將我們需要暴露的Qt對象暴露給即將載入的網頁
<4>. 將Qt的屬性暴露出去供js調用，使用如下方法：
|
1
|
Q_PROPERTY(
int
Qtvalue READ testValue WRITE setTestValue)
|
將上面的語句加入到類的聲明中，在private塊下面就可以，最后不需要以分號結尾，例如：
|
1
2
|
private
:
Q_PROPERTY(
int
Qtvalue READ testValue WRITE setTestValue)
|
這一行的作用是將屬性 Qtvalue 注冊到Qt的元對象系統中，在js中可以通過名字Qtvalue來訪問該屬性，但在js中訪問該屬性的時候假設Qt暴露給js的對象為QtObj，那么在js中可以這樣訪問該屬性：
|
1
2
|
QtObj.Qtvalue = 10;
//設置該屬性的時候會調用void setTestValue(int)
alert(QtObj.Qtvalue)
//獲取該屬性的時候會調用 int testValue()
|
Q_PROPERTY(int Qtvalue READ testValue WRITE setTestValue)的結構如下：
|
1
2
|
Q_PROPERTY( 類型 屬性名 READ 返回屬性值的函數 WRITE 設置屬性值的函數 )
int
Qtvalue
int
testValue()
void
setTestValue(
int
)
|
也就是說在js中我們可以直接使用Qtvalue，當獲取Qtvalue的值的時候會自動調用暴露對象的 int testValue() 函數 ，Qt規定其返回值必須與Q_PROPERTY語句中指定的類型相同，並且必須沒有參數。當我們為Qtvalue設置值的時候會調用暴露對象的void setTestValue(int)函數，該函數必須有一個int類型的參數(類型也必須與前面Q_PROPERTY語句中指定的類型相同)，並且不能有返回值。
經過實驗int testValue()與void setTestValue(int)函數的聲明在private區域也可以，好像無所謂。其實這兩個函數的名字是可以隨意定的，對js暴露的屬性名是Qtvalue，當訪問Qtvalue屬性的時候，會自動調用Q_PROPERTY聲明中READ后面指定的函數去獲取值，並且調用WRITE后面指定的函數去設置值，而不在乎這兩個函數的名字。
另外這兩個函數獲取的值或者設置的值從哪里得來呢，我們可以在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字符串。例如：
|
1
|
ui->btnTest->setStyleSheet(
"border:1px solid red;"
);
//設置按鈕的邊框
|
另外我們可以將所有的QSS放到文件中，例如main.qss，然后將該文件添加到Qt的資源文件中，在主UI界面中加載該main.qss文件，並調用主UI界面類的成員函數設置其下控件的樣式：
|
1
2
3
4
5
6
|
QFile file(
":/qss/main.qss"
);
file.open(QFile::ReadOnly);
QTextStream filetext(&file);
QString stylesheet = filetext.readAll();
this
->setStyleSheet(stylesheet);
file.close();
|
要注意的是main.qss中設置的樣式應該是針對當前UI界面上的控件的，也就是這里調用的this->setStyleSheet(stylesheet);中的this就是當前UI界面的類的實例。
有關QSS的細節很多，而且每個控件的美化技巧不同，同時QSS中還提供了偽類，子控件樣式等功能，限於篇幅，本節只做一個大致的介紹，后面將會單獨一篇文章詳細講解QSS的細節，以及如何美化Qt中的各種常見控件。
編碼問題
之前在寫Qt程序的時候，如果在原文件中的字符串直接寫中文，例如有些地方需要彈出錯誤或者警告的對話框提示，那么提示內容就是中文信息，我發現有部分字符會出現亂碼，並且有時候編譯的時候會報錯：error C2001: 常量中有換行符這一般是編碼問題。我是這么解決的，在包含中文(即使是注釋中有中文有時候也報錯)的源文件的開頭加入 #pragma execution_character_set("utf-8") 這一行指定文件的編碼，同時使用UE編輯器打開該文件，另存為UTF-8的編碼，在QtCreator中重新打開即可。遇到跟我同樣問題的人也可以試一下這個辦法。
QT的內存管理
這一小節說題目命名為QT的內存管理，題目有點過大，其實我在寫Qt程序的時候，包括Qt的例子程序，中經常出現類似如下的代碼：
|
1
2
3
4
5
|
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設計界面上操作：
在按鈕控件上點擊右鍵，選擇“轉到槽”菜單之后彈出如下的對話框：
可以看到按鈕控件會發射很多信號，只要選擇一個信號，點擊OK之后就會生成對應的槽函數對按鈕發出的該信號進行處理
|
1
2
3
|
void
MainWindow::on_btnTest_clicked()
{
}
|
選擇clicked()信號之后生成的處理該信號的槽函數，除了通過UI界面自動生成槽函數的方式以外，我們還可以在代碼中自己手寫槽函數，並通過QObject::connect()函數將特定對象的信號與另外一個對象的槽函數進行連接，當該對象的信號發射之后，會被關聯的對象的槽函數處理。例如我們可以用下面的一行代碼完成上面的功能：
|
1
|
connect(ui->btnTest,SIGNAL(clicked()),
this
,SLOT(on_btnTest_clicked()));
|
使用代碼的好處是，很多控件的信號在上面的對話框中並沒有顯示出來，也就是說上面的對話框中其實只列出了該控件對象的一部分信號，另外如果我們的對象是在程序中通過代碼動態構建的，那么我們也就需要在代碼中為該控件的信號指定處理的槽函數了。上面的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界面控件進行操作。有關信號的連接方式可以參考這篇文章：對信號與事件的認識(http://blog.chinaunix.net/uid-25147458-id-3706122.html)
QT中繪圖
我們可以在Qt中繪圖，在Qt的控件上繪圖，一般是需要重寫該控件的重繪事件的，例如：
|
1
2
3
4
5
6
7
8
9
10
|
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，具體步驟如下：
在項目上點擊右鍵，選擇“添加庫”菜單
選擇外部庫
指定對應的lib文件，以及頭文件的包含路徑，設置平台為windows，選擇庫的連接類型然后點擊下一步
最后點擊完成既可，可以看到實際上在Qt的個工程文件中，也就是pro文件中添加了如下的代碼：
|
1
2
3
4
5
|
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>. 在該槽函數中生成菜單代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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());
}
|
當然這里僅僅是demo代碼，每次點擊右鍵的時候，我們都要重新new出菜單來，這樣肯定會耗費資源，這些菜單創建的代碼可以放在一個全局的函數中，只需要創建一次，但是cmenu->exec(QCursor::pos());這條語句是顯示菜單用的，執行之后菜單才能顯示出來，所以每次槽函數被執行的時候都需要調用一次來呼出菜單。
最終顯示效果如下：
除了上面的方法之外，還可以通過重寫contextMenuEvent()事件來實現右鍵菜單，這里就不細說了，可以自行百度。
結束語
本篇總結性的講解了Qt的諸多方面的知識點，有些地方限於篇幅，可能需要單獨另起一篇文章進行講解，有的是我自己也並沒有完全弄透徹怕誤人子弟。
由於公司需要開發一個窗口程序，要求不需要安裝附帶的框架，所以.NET就被排除在外了，因為公司之前有同事使用WPF開發過其他的程序，界面也比較漂亮，但是工程部的同事在外面部署的時候由於安裝框架的原因經常出現各種系統問題。至於MFC太古老，學習周期長，所以也被排除，另外兩個一個是Flex AIR，一個是Qt，權衡之下還是選擇了Qt，經過一個月的邊學邊做，效果還可以。其實Qt還是比較好學的，基本上熟練掌握了QSS的話，也可以實現非常好的界面效果，而且還是跨平台的，特別是在嵌入式系統中，如果需要顯示界面的話，會是一個非常好的選擇。
希望這篇文章對大家有所幫助，由於篇幅比較長，雖然我已經檢查過，如果發現文字錯誤，還希望園友不吝指正，我會及時改正。