文章目錄
- 1.輸入類控件
- 1.1 LineEdit
- 1.2 Text Edit
- 1.3 Combo Box
- 1.4 SpinBox
- 1.5 Date Edit & Time Edit
- 1.6 Dial
- 1.7 Slider
- 2. 多元素控件
- 2.1 List Widget
- 2.2 Table Widget
- 2.3 Tree Widget
- 3. 容器類控件
- 3.1 Group Box
- 3.2 Tab Widget
- 4. 布局管理器
- 4.1 垂直布局
- 4.2 水平布局
- 4.3 網格布局
- 4.4 表單布局
- 4.5 Spacer
1.輸入類控件
1.1 LineEdit
QLineEdit ?來表示單行輸?框,可以輸?一段文本,但是不能換行
核心屬性說明
屬性 | 說明 |
---|---|
text | 輸?框中的?本 |
inputMask | 輸?內容格式約束 |
maxLength | 最??度 |
frame | 是否添加邊框 |
echoMode | 顯??式。QLineEdit::Normal :這是默認值,?本框會顯?輸?的?本。 QLineEdit::Password :在這種模式下,輸?的字符會被隱藏,通常?星號(*)或等號(=)代替。 QLineEdit::NoEcho :在這種模式下,?本框不會顯?任何輸?的字符。 |
cursorPosition | 光標所在位置 |
alignment | 文字對齊方式,設置?平和垂直?向的對? |
dragEnabled | 是否允許拖拽 |
readOnly | 是否是只讀的(不允許修改);類似于label |
placeHolderText | 當輸?框內容為空的時候,顯示什么樣的提?信息 |
clearButtonEnabled | 是否會自動顯示出 “清除按鈕” |
核心信號
信號 | 說明 |
---|---|
void cursorPositionChanged(int old, int new) | 當?標移動時發出此信號,old為先前的位置,new為新位置 |
void editingFinished() | 當按返回或者回?鍵時,或者?編輯失去焦點時,發出此信號 |
void returnPressed() | 當返回或回?鍵按下時發出此信號. 如果設置了驗證器, 必須要驗證通過, 才能觸發. |
void selectionChanged() | 當選中的?本改變時,發出此信號 |
void textChanged(const QString &text) | 當QLineEdit中的?本改變時,發出此信號,text是新的?本。 代碼對?本的修改能夠觸發這個信號. |
void textEdited(const QString &text)) | 當QLineEdit中的?本改變時,發出此信號,text是新的?本。 代碼對?本的修改不能夠觸發這個信號 |
- 錄入個人信息的案例:
- inputMask 只能進行簡單的輸?格式校驗,實際開發中,基于正則表達式的方式是更核心的方法,下面我們來看一下正則表達式
此處要求在輸?框中輸??個合法的電話號碼(1 開頭, 11 位, 全都是數字)。如果驗證不通過,則確定按鈕?法點擊
- 使用
QRegExp
創建?個正則表達式對象. “^1\\d{10}$
” 表? “以 1 開頭, 后?跟上任意的10個?進制數字”. - 使用
QRegExpValidator
創建?個驗證器對象. Qt 中內置了四個主要的驗證器對象
給 lineEdit 添加 textEdited 信號的 slot 函數
執?程序,觀察效果,可以看到此時嘗試輸?字?是?法輸?的,并且只有當輸?的內容符合要求,確定按鈕才能被使?。
- 其它屬性:Alignment、MaxLength、槽函數
- 切換顯示密碼
1.2 Text Edit
QTextEdit 表示多行輸?框,也是?個富文本 & markdown 編輯器,并且能在內容超出編輯框范圍時?動提供滾動條。
屬性 | 說明 |
---|---|
markdown | 輸?框內持有的內容. ?持 markdown 格式. 能夠?動的對markdown ?本進?渲染成 html |
html | 輸?框內持有的內容. 可以?持?部分 html 標簽. 包括 img 和 table 等 |
placeHolderText | 輸?框為空時提?的內容 |
readOnly | 是否是只讀的 |
undoRedoEnable | 是否開啟 undo / redo 功能。 按下 ctrl + z 觸發 undo;按下 ctrl + y 觸發 redo |
autoFormating | 開啟?動格式化. |
tabstopWidth | 按下縮進占多少空間 |
overwriteMode | 是否開啟覆蓋寫模式 |
acceptRichText | 是否接收富?本內容 |
verticalScrollBarPolicy | 垂直?向滾動條的出現策略 Qt::ScrollBarAsNeeded : 根據內容?動決定是否需要滾動條,這是默認值。 Qt::ScrollBarAlwaysOff : 總是關閉滾動條; Qt::ScrollBarAlwaysOn : 總是顯?滾動條 |
horizontalScrollBarPolicy | ?平?向滾動條的出現策略 Qt::ScrollBarAsNeeded : 根據內容?動決定是否需要滾動條,這是默認值。 Qt::ScrollBarAlwaysOff : 總是關閉滾動條。 Qt::ScrollBarAlwaysOn : 總是顯?滾動條。 |
核心信號:
信號 | 說明 |
---|---|
textChanged() | ?本內容改變時觸發 |
selectionChanged() | 選中范圍改變時觸發 |
cursorPositionChanged() | 光標移動時觸發 |
undoAvailable(bool) | 可以進? undo 操作時觸發 |
redoAvailable(bool) | 可以進? redo 操作時觸發 |
copyAvaiable(bool) | ?本被選中/取消選中時觸發 |
- 獲取多行輸入框的內容
- 測試undo、redo、copy
1.3 Combo Box
QCombo Box 表示下拉框
屬性 | 說明 |
---|---|
currentText | 當前選中的?本 |
currentIndex | 當前選中的條?下標,從 0 開始計算. 如果當前沒有條?被選中, 值為 -1 |
editable | 是否允許修改 設為 true 時, QComboBox 的?為就?常接近 QLineEdit ,也可以設置 validator |
iconSize | 下拉框圖標 (?三?) 的大小 |
maxCount | 最多允許有多少個條? |
核心方法
屬性 | 說明 |
---|---|
addItem(const QString&) | 添加?個條? |
currentIndex() | 當前選中的條?下標,從 0 開始計算. 如果當前沒有條?被選中, 值為 -1 |
currentText() | 獲取當前條?的?本內容 |
核心信號
信號 | 說明 |
---|---|
activated(int) | 當??選擇了?個選項時發出(下標) |
activated(const QString & text) | 當??選擇了?個選項時發出(內容) |
currentIndexChanged(int) | 當前選項改變時發出 |
currentIndexChanged(const QString & text) | 此時??已經明確的選擇了?個選項 |
editTextChanged(const QString & text) | 當編輯框中的?本改變時發出 (editable 為 true 時有效) |
- 下面我們使用下拉框,實現一個點餐案例
很多時候下拉框的選項并非是固定的,而是通過讀取文件/讀取網絡獲取到的
- 從文件中讀取
創建文件,編寫選項,每個選項占?行
- Qt 中也提供了 QFile 實現讀寫?件的功能. 當然使? C++ 標準庫的 std::fstream 也是完全可以的.
- 之所以存在兩套, 是因為 Qt 誕?較早 (1991 年左右), 此時 C++ 還沒有完成 “標準化” 的?作, C++ 標準庫這樣的概念?然也沒有誕?.
- 因此 Qt 就??打造了?套庫, 實現了字符串, 容器, ?件操作, 多線程, ?絡操作, 定時器, 正則表達式等內容
1.4 SpinBox
使用 QSpinBox 或者 QDoubleSpinBox 表示 “微調框”,它是帶有按鈕的輸?框, 可以?來輸?整數/浮點數,通過點擊按鈕來修改數值大小
屬性 | 說明 |
---|---|
value | 存儲的數值 |
singleStep | 每次調整的 “步?”. 按下?次按鈕數據變化多少 |
displayInteger | 數字的進制. 例如 displayInteger 設為 10, 則是按照 10 進制表?. 設為 2 則為 2 進制表? |
minimum、maximum | 最小值、最大值 |
wrapping | 是否允許換行 |
suffix、prefix | 后綴、前綴 |
buttonSymbol | 按鈕上的圖標。UpDownArrows 上下箭頭形式 PlusMinus 加減號形式 NoButtons 沒有按鈕 |
accelerated | 按下按鈕時是否為快速調整模式 |
correctionMode | 輸?有誤時如何修正。如果??輸?了?個?效的值,那么SpinBox會恢復為上?個有效值 |
核心信號
信號 | 說明 |
---|---|
textChanged(QString) | 微調框的?本發?改變時會觸發,參數 QString 帶有 前綴 和 后綴 |
valueChanged(int) | 微調框的?本發?改變時會觸發,參數 int 表?當前的數值 |
該控件較為簡單,就不過多贅述了
1.5 Date Edit & Time Edit
這?個控件?法?常相似,我們以 QDateTimeEdit 為例進?介紹
屬性 | 說明 |
---|---|
dateTime | 時間?期的值. 形如 2000/1/1 0:00:00 |
date | 單純?期的值. 形如 2001/1/1 |
time | 單純時間的值. 形如 0:00:00 |
displayFormat | 時間?期格式. 形如 yyyy/M/d H:mm::ss (這?的格式化符號的含義,不同語?/庫的設定規則是存在差異的) |
minimumDateTime、maximumDateTime | 最小、最大時間日期 |
timeSpec | Qt::LocalTime :顯?本地時間、 Qt::UTC :顯?協調世界時(UTC)、Qt::OffsetFromUTC :顯?相對于UTC的偏移量(時差) |
核心信號
信號 | 說明 |
---|---|
dateChanged(QDate) | ?期改變時觸發 |
timeChanged(QTime) | 時間改變時觸發 |
dateTimeChanged(QDateTime) | 時間?期任意?個改變時觸發. |
- 案例:實現日期計算器
- 使? daysTo 函數可以計算兩個?期的天數. time.daysTo(time2),使用time2-time1
- 使? secsTo 函數可以計算兩個時間的秒數.
- 通過 (秒數 / 3600) 換算成?時數, 再余上 24 得到零?個?時
1.6 Dial
使用 QDial 表示?個 旋鈕
核心屬性
屬性 | 說明 |
---|---|
value | 持有的數值 |
minimum、maximum | 最小值、最大值 |
singleStep | 按下?向鍵的時候改變的步? |
pageStep | 按下 pageUp / pageDown 的時候改變的步? |
sliderPosition | 界面上旋鈕顯?的 初始位置 |
wrapping | 是否允許循環調整. 即數值如果超過最?值, 是否允許回到最?值. (調整過程能否 “套圈”) |
value | 持有的數值 |
notchesVisible | 是否顯示刻度線 |
notchTarget | 刻度線之間的相對位置. 數字越?, 刻度線越稀疏. |
核心信號
信號 | 說明 |
---|---|
valueChanged(int) | 數值改變時觸發 |
rangeChanged(int, int) | 范圍變化時觸發 |
使用旋鈕調整不透明度
1.7 Slider
使用 QSlider 表示?個滑動條
QSlider
和 QDial 都是繼承?QAbstractSlider
,因此?法上基本相同.
下面值羅列一下Slider的核心屬性
屬性 | 說明 |
---|---|
sliderPosition | 滑動條顯?的 初始位置 |
tracking | 外觀是否會跟蹤數值變化. 默認值為 true. ?般不需要修改 |
orientation | 滑動條的?向是?平還是垂直 |
invertedAppearance | 是否要翻轉滑動條的?向 |
tickPosition | 刻度的位置 |
tickInterval | 刻度的密集程度 |
- 案例: 在界面上創建兩個滑動條,分別是水平和垂直滑動條,用來調整窗口大小
- 通過自定義快捷鍵調整滑動條位置
設置 - 減小 value,設置 = 增加 value
默認情況下滑動條可以通過方向鍵或者 pageUp / pageDown 調整大小
2. 多元素控件
Qt 中提供的多元素控件有:
- QListWidget
- QListView
- QTableWidget
- QTableView
- QTreeWidget
- QTreeView
QTableView
是基于 MVC 設計的控件,QTableView 自身不持有數據,使用 QTableView 的時候需要??創建?個 Model 對象 (比如 QStandardModel ),并且把 Model 和 QTableView 關聯起來,后續修改 Model 中的數據就會影響 QTableView 的顯示;修改 QTableView 的顯示也會影響到 Model 中的數據(雙向綁定).QTableWidget
則是 QTableView 的子類,對 Model 進行了封裝,不需要用戶手動創建 Model 對象,直接就可以往 QTableWidget 中添加數據了
2.1 List Widget
使用 QListWidget
能夠顯示?個縱向的列表,其中的每個選項都可以被選中
核心屬性
屬性 | 說明 |
---|---|
currentRow | 當前被選中的是第幾行 |
count | ?共有多少? |
sortingEnabled | 是否允許排序 |
isWrapping | 是否允許換? |
itemAlignment | 元素的對??式 |
selectRectVisible | 被選中的元素矩形是否可? |
spacing | 元素之間的間隔 |
核心方法
屬性 | 說明 |
---|---|
addItem(const QString& label) | 列表中添加元素 |
addItem(QListWidgetItem *item) | 列表中添加元素 |
currentItem() | 返回 QListWidgetItem* 表?當前選中的元素 |
setCurrentItem(QListWidgetItem* item) | 設置選中哪個元素 |
setCurrentRow(int row) | 設置選中第??的元素 |
insertItem(const QString& label, int row) | 在指定的位置插?元素 |
insertItem(QListWidgetItem *item, int row) | 在指定的位置插?元素 |
item(int row) | 返回 QListWidgetItem* 表?第 row ?的元素 |
takeItem(int row) | 刪除指定?的元素, 返回 QListWidgetItem* 表?是哪個元素被刪除了 |
還有核心信號這里就不羅列了
在上述介紹中,涉及到?個關鍵的類, QListWidgetItem
,這個類表? QListWidget 中的?個元素.
核心方法如下,本質上就是?個 “文本+圖標” 構成的
方法 | 說明 |
---|---|
setFont | 設置字體 |
setIcon | 設置圖標 |
setHidden | 設置隱藏 |
setSizeHint | 設置尺? |
setSelected | 設置是否選中 |
setText | 設置?本 |
setTextAlignment | 設置?本對??式 |
在界?上創建?個 ListView , 右鍵 => 變形為 => ListWidget
2.2 Table Widget
核心方法
- 創建表,設置表頭名稱
- 增加行/列
默認情況下,單元格中的內容直接就是可編輯的如果不想讓用戶編輯,可以設置 ui->tableWidget-> setEditTriggers(QAbstractItemView::NoEditTriggers);
2.3 Tree Widget
QTreeWidget 核心方法
QTreeWidgetItem 核心方法
方法 | 說明 |
---|---|
addChild(QTreeWidgetItem* child) | 新增?節點 |
childCount() | ?節點的個數 |
child(int index) | 獲取指定下標的?節點. 返回 QTreeWidgetItem* |
takeChild(int index) | 刪除對應下標的?節點 |
removeChild(QTreeWidgetItem* child) | 刪除對應的?節點 |
parent() | 獲取該元素的?節點 |
QTreeWidget 支持多列顯示,每一列都有一個從左到右的索引編號。索引從 0 開始,0 表示第一列,1 表示第二列,依此類推
設置槽函數
3. 容器類控件
3.1 Group Box
使用 QGroupBox
實現?個帶有標題的分組框,可以把其他的控件放到里面作為?組,這樣看起來能更好看?點.
可以把控件放到Group Box中,這些內部的控件的父元素就是這個Group Box了
核心屬性
方法 | 說明 |
---|---|
title | 分組框的標題 |
alignment | 分組框內部內容的對??式 |
checkable | 是否可選擇. 設為 true, 則在 title 前?會多出?個可勾選的部分 |
checked | 描述分組框的選擇狀態 (前提是 checkable 為 true) |
3.2 Tab Widget
使用 QTabWidget
實現?個帶有標簽頁控件,可以往??添加?些 widget. 進?步的就可以通過標簽頁來切換
核心屬性
方法 | 說明 |
---|---|
tabPosition | 標簽?所在的位置. North 上? South 下? West 左側 East 右側 |
currentIndex | 當前選中了第?個標簽? (從 0 開始計算) |
currentTabText | 當前選中的標簽?的?本 |
currentTabName | 當前選中的標簽?的名字 |
currentTabIcon | 當前選中的標簽?的圖標 |
currentTabToolTip | 當前選中的標簽?的提?信息 |
tabsCloseable | 標簽?是否可以關閉 |
movable | 標簽?是否可以移動 |
核心信號
方法 | 說明 |
---|---|
currentChanged(int) | 在標簽?發?切換時觸發, 參數為被點擊的選項卡編號 |
tabBarClicked(int) | 在點擊選項卡的標簽條的時候觸發. 參數為被點擊的選項卡編號. |
tabCloseRequest(int) | 在標簽?關閉時觸發,參數為被關閉的選項卡編號 |
實現部分槽函數
4. 布局管理器
之前使用 Qt 在界?上創建的控件,都是通過 “絕對定位” 的方式來設定的。也就是每個控件所在的位置,都需要計算坐標,最終通過 setGeometry 或者 move 方式擺放過去。
這種設定?式其實并不?便,尤其是界?如果內容?較多,不好計算。而且?個窗口大小往往是可以調整的, 按照絕對定位的?式,也?法自適應窗口大小。
因此 Qt 引? “布局管理器” (Layout) 機制來解決上述問題
4.1 垂直布局
使用 QVBoxLayout
表示垂直的布局管理器( V 是 vertical 的縮寫)
核心屬性
方法 | 說明 |
---|---|
layoutLeftMargin | 左側邊距 |
layoutRightMargin | 右側邊距 |
layoutTopMargin | 上?邊距 |
layoutBottomMargin | 下?邊距 |
layoutSpacing | 相鄰元素之間的間距 |
注意:Layout 只是?于界?布局,并沒有提供信號
注意:?個 widget 只能包含?個 layout
通過 Qt Designer 創建的布局管理器,其實是先創建了?個 widget,設置過 geometry 屬性的,再把這個 layout 設置到這個 widget 中,此時的布局并不會隨著窗口大小的改變而改變
4.2 水平布局
核心屬性與垂直布局相同,這里就不贅述了
使用嵌套布局
4.3 網格布局
Qt 中還提供了 QGridLayout
用來實現網格布局的效果,可以達到 M * N 的這種網格的效果
核心屬性
方法 | 說明 |
---|---|
layoutLeftMargin | 左側邊距 |
layoutRightMargin | 右側邊距 |
layoutTopMargin | 上?邊距 |
layoutBottomMargin | 下?邊距 |
layoutHorizontalSpacing | 相鄰元素之間?平?向的間距 |
layoutVerticalSpacing | 相鄰元素之間垂直?向的間距 |
layoutRowStretch | ??向的拉伸系數 |
layoutColumnStretch | 列?向的拉伸系數 |
設置行和列的時候,如果設置的是?個很?的值,但是這個值和上?個值之間并沒有其他的元素,那么并不會在中間騰出額外的空間
另外,QGridLayout 也提供了 setRowStretch 設置?之間的拉伸系數,上述案例中,直接設置
setRowStretch
效果不明顯,因為每個按鈕的?度是固定的,需要把按鈕的垂直?向的 sizePolicy 屬性設置為
QSizePolicy::Expanding
盡可能填充滿布局管理器,才能看到效果.
使用 setSizePolicy 設置按鈕的尺?策略,可選的值如下:
QSizePolicy::Ignored
: 忽略控件的尺?,不對布局產?影響。QSizePolicy::Minimum
: 控件的最?尺?為固定值,布局時不會超過該值。QSizePolicy::Maximum
: 控件的最?尺?為固定值,布局時不會?于該值。QSizePolicy::Preferred
: 控件的理想尺?為固定值,布局時會盡量接近該值。QSizePolicy::Expanding
: 控件的尺?可以根據空間調整,盡可能占據更多空間。QSizePolicy::Shrinking
: 控件的尺?可以根據空間調整,盡可能縮?以適應空間
4.4 表單布局
上述的布局管理器之外,Qt 還提供了 QFormLayout,屬于是 QGridLayout 的特殊情況,專門用于實現兩列表單的布局。
這種表單布局多用于讓用戶填寫信息的場景,左側列為提示,右側列為輸?框
4.5 Spacer
使?布局管理器的時候, 可能需要在控件之間, 添加?段空?. 就可以使? QSpacerItem 來表?.
方法 | 說明 |
---|---|
width | 寬度 |
height | ?度 |
hData | ?平?向的 sizePolicy |
vData | 垂直?向的 sizePolicy |