Qt部件和設計師.ppt

用戶界面組件 1 用戶界面組件 用戶界面由單個部件 widget 構成設計器 QtDesigner 中有46個部件 widget 直接派生自QWidget的部件超過59個 QLabel QPushButton QLineEdit QDoubleSpinBox QScrollBar 2 部件中的部件 部件被分層次放置容器類提供可視化結構 但同時也是具有一定功能化的如QRadioButton 需要用彼此間實現(xiàn)互斥 可以將多個QRadioButton放到一個GroupBox中 QGroupBox QTabWidget 3 部件的特點 占據(jù)屏幕中一個方形的區(qū)域從輸入設備接收事件當部件產生變化時 發(fā)出信號多個部件以層次式的方法組合構建一個部件中可以包含其他部件 4 布局管理 5 一個對話框例子 部件被放置在布局管理器中 使用戶界面具有彈性易伸縮 6 彈性好在哪里 讓部件的大小適應內容讓部件適應翻譯變化讓部件適應用戶設置 如字體設置等 7 布局管理 幾種可用的布局布局管理器和部件 協(xié)商 各個部件大小與位置彈簧可以用來填充空白處 QVBoxLayout QHBoxLayout 8 一個對話框例子 對話框由多個層次的布局管理器和部件組成 9 對話框例子 QVBoxLayout outerLayout newQVBoxLayout this QHBoxLayout topLayout newQHBoxLayout topLayout addWidget newQLabel Printer topLayout addWidget c newQComboBox outerLayout addLayout topLayout QHBoxLayout groupLayout newQHBoxLayout outerLayout addLayout groupLayout outerLayout addSpacerItem newQSpacerItem QHBoxLayout buttonLayout newQHBoxLayout buttonLayout addSpacerItem newQSpacerItem buttonLayout addWidget newQPushButton Print buttonLayout addWidget newQPushButton Cancel outerLayout addLayout buttonLayout 10 對話框例子 QHBoxLayout groupLayout newQHBoxLayout QGroupBox orientationGroup newQGroupBox QVBoxLayout orientationLayout newQVBoxLayout orientationGroup orientationLayout addWidget newQRadioButton Landscape orientationLayout addWidget newQRadioButton Portrait groupLayout addWidget orientationGroup QGroupBox colorGroup newQGroupBox QVBoxLayout colorLayout newQVBoxLayout colorGroup colorLayout addWidget newQRadioButton BlackandWhite colorLayout addWidget newQRadioButton Color groupLayout addWidget colorGroup Horizontalbox 包含groupboxes verticalboxes radiobuttons 11 對話框例子 可以使用Qt設計器來建立同樣的結構 12 跨平臺 13 跨平臺風格 部件的繪制使用平臺相關的風格以確保本地化外觀 14 跨平臺問題 比較不同用戶界面后我們知道 不僅僅是改變部件外觀這么簡單 還有其他的一些差別表單布局管理對話框按鈕順序標準對話框 15 跨平臺問題 比較不同用戶界面后我們知道 不僅僅是改變部件外觀這么簡單 還有其他的一些差別表單布局管理對話框按鈕順序標準對話框 Plastique ClearLooks Windows MacOSX 16 跨平臺問題 比較不同用戶界面后我們知道 不僅僅是改變部件外觀這么簡單 還有其他的一些差別表單布局管理對話框按鈕順序標準對話框 17 跨平臺問題 比較不同用戶界面后我們知道 不僅僅是改變部件外觀這么簡單 還有其他的一些差別表單布局管理對話框按鈕順序標準對話框 18 通用部件 19 通用部件 Qt包含針對所有常見需求的大量通用部件Qt設計器中為部件組提供很好的概貌 20 通用部件 按鈕 所有按鈕繼承自QAbstractButton這個基本類 信號clicked 當按鈕被按下 并彈起后 發(fā)出 toggled bool 當按鈕的狀態(tài)發(fā)生改變時發(fā)出 屬性checkable 當按鈕可檢查時為真 使按鈕激活 checked 當按鈕被標記時為真 用于復選或單選按鈕 text 按鈕的文本 icon 按鈕的圖標 可以和文本同時顯示 QAbstractButton QPushButton QCheckBox QRadioButton 21 通用部件 列表項部件 QListWidget用于顯示列表項添加項目addItem QString 將項目附加到列表末端insertItem introw QString 將項目插入到指定行選擇項目selectedItems 返回QListWidgetItem的列表 使用QListWidgetItem text來形成文本信號itemSelectionChanged 當選擇狀態(tài)改變時發(fā)出QComboBox以更緊密的格式展示一個單選的項目列表 QListWidget QComboBox 22 通用部件 容器 容器部件用來結構化用戶界面一個簡單的QWidget對象可當做容器來使用設計器 將部件放置在容器中并為容器提供一個布局管理器代碼 為容器創(chuàng)建一個布局管理器并將部件添加進布局管理器 布局管理器以容器為父對象 QGroupBox box newQGroupBox QVBoxLayout layout newQVBoxLayout box layout addWidget QGroupBox QTabWidget QFrame 23 通用部件 輸入部件 使用QLineEdit實現(xiàn)單行文本輸入信號textChanged QString 文本狀態(tài)改變時發(fā)出editingFinished 部件失去焦點時發(fā)出returnPressed 回車鍵被按下時發(fā)出屬性text 部件的文本maxLength 限定輸入的最大長度readOnly 設置為真時文本不可編輯 仍允許復制 QLineEdit 24 通用部件 輸入部件 使用QTextEdit和QPlainTextEdit實現(xiàn)多行文本輸入SignalstextChanged 文本狀態(tài)改變時發(fā)出屬性plainText 無定義格式文本html HTML格式文本readOnly 設置為真時文本不可編輯QComboBox通過editable屬性使其可編輯SignalseditTextChanged QString 當文本正被編輯時發(fā)出屬性currentText combobox的當前文本 QComboBox QTextEdit 25 通用部件 輸入部件 編輯整型數(shù)據(jù)有許多可選的輸入部件也有許多用于double time和date類型的部件信號valueChanged int 當數(shù)值更新時發(fā)出屬性value 當前值maximum 最大值minimum 最小值 QSlider QScrollBar QDial QSpinBox QAbstractSlider 26 通用部件 顯示部件 QLabel部件顯示文本或者圖片屬性text 標簽文本pixmap 顯示的圖片QLCDNumber用于顯示整形數(shù)值屬性intValue 顯示的數(shù)值 使用display int 函數(shù)進行設置 QLabel QLCDNumber QLabel 27 通用部件 屬性 所有部件有一系列繼承自QWidget類的共同屬性enabled 用戶交互可用或不可用visible 顯示或不顯示 show或hide函數(shù) 這些屬性同時影響到子部件例如使一個容器部件不可用時 28 QMessageBox 信息框是可以顯示提示信息 并接受用戶按鈕輸入的一種對話框信息框使用方式一 靜態(tài)函數(shù)StandardButtonQMessageBox warning QWidget parent constQString title constQString text StandardButtonsbuttons Ok StandardButtondefaultButton NoButton Parent 父組件指針Title 標題Text 提示文本Buttons 提示框中的按鈕 可用或 運算添加多個按鈕defaultButton 默認選中的按鈕類似函數(shù)還有QMessageBox information QMessageBox critical QMessageBox question QMessageBox about 29 QMessageBox intret QMessageBox warning this tr MyApplication tr Thedocumenthasbeenmodified n Doyouwanttosaveyourchanges QMessageBox Save QMessageBox Discard QMessageBox Cancel QMessageBox Save switch ret caseQMessageBox Save Savewasclickedbreak caseQMessageBox Discard Don tSavewasclickedbreak caseQMessageBox Cancel Cancelwasclickedbreak default shouldneverbereachedbreak 30 QMessageBox 信息框使用方式二 構造函數(shù)QMessageBox QMessageBox Iconicon constQString title constQString text StandardButtonsbuttons NoButton QWidget parent 0 Qt WindowFlagsf Qt Dialog Qt MSWindowsFixedSizeDialogHint icon 圖標 可取值為MessageBox NoIcon QMessageBox Question QMessageBox Information QMessageBox Warning QMessageBox CriticalTitle 標題Text 提示文本Buttons 提示框中的按鈕 可用或 運算添加多個按鈕parent 父組件指針F 窗口系統(tǒng)屬性 31 QMessageBox QMessageBoxmessage QMessageBox NoIcon tr MyApplication tr Thedocumenthasbeenmodified n Doyouwanttosaveyourchanges QMessageBox Save QMessageBox Discard QMessageBox Cancel switch message exec caseQMessageBox Save Savewasclickedbreak caseQMessageBox Discard Don tSavewasclickedbreak caseQMessageBox Cancel Cancelwasclickedbreak default shouldneverbereachedbreak 32 尺寸策略 33 尺寸 size 的策略 布局是在布局管理器和部件間進行協(xié)調的過程布局管理器提供布局結構水平布局和垂直布局網(wǎng)格布局部件則提供各個方向上的尺寸策略最大和最小尺寸 34 尺寸的策略 printerList setSizePolicy QSizePolicy Expanding QSizePolicy Fixed 35 尺寸的策略 每一個部件都有一個尺寸大小的示意 hint 給出水平和垂直方向上的尺寸的策略Fixed 規(guī)定了widget的尺寸Minimum 規(guī)定了可能的最小值Maximum 規(guī)定可能的最大值Preferred 給出最佳值 但不是必須的Expanding 同preferred 但希望增長MinimumExpanding 同minimum 但希望增長Ignored 忽略規(guī)定尺寸 widget得到盡量大的空間 36 尺寸的策略 每一個部件都有一個尺寸大小的示意 hint 給出水平和垂直方向上的尺寸的策略Fixed 固定大小 最嚴格 Minimum 可增長Maximum 可縮小Preferred 可增長可縮小Expanding 可增長可縮小 希望增長MinimumExpanding 可增長并且希望增長Ignored 忽略尺寸示意 可增長可縮小 37 如果 2個preferred相鄰1個preferred 1個expanding2個expanding相鄰空間不足以放置widget fixed 38 關于尺寸的更多內容 可用最大和最小屬性更好地控制所有部件的大小maximumSize 最大可能尺寸minimumSize 最小可能尺寸 ui pushButton setMinimumSize 100 150 ui pushButton setMaximumHeight 250 39 QtDesigner 40 QtDesigner Qt應用程序除了使用手工編寫代碼的方式外 還可以用過QtDesinger來完成QtDesigner曾是一個獨立的Qt桌面工具 現(xiàn)在集成于QtCreator中只需要拖動相應的控件輸出為 ui文件 內容其實就是XMLUic編譯器把 ui文件轉換成 h文件myproject ui ui myproject h 41 設計器介紹 sources cpp executables objectfiles o headers h generatedmoc cpp userinterfaces ui 42 設計器介紹 sources cpp executables objectfiles o headers h generatedmoc cpp generatedui h userinterfaces ui uic 43 使用代碼 ifndefWIDGET H defineWIDGET H includenamespaceUi classWidget classWidget publicQWidget Q OBJECTpublic Widget QWidget parent 0 Widget private Ui Widget ui endif WIDGET H Ui Widget類的前置聲明 一個Ui Widget類指針ui 指向所有部件 基本上是一個標準的QWidget派生類 44 使用代碼 include widget h include ui widget h Widget Widget QWidget parent QWidget parent ui newUi Widget ui setupUi this Widget Widget deleteui 實例化類Ui Widget為ui 刪除ui對象 調用函數(shù)setupUi 生成所有父窗體 this 的子窗體部件 45 使用設計器 基本工作流程粗略地放置部件在窗體上從里到外進行布局 添加必要的彈簧進行信號連接在代碼中使用在整個過程中不斷修改編輯屬性實踐創(chuàng)造完美 46 使用設計器 拖放部件 粗略地放置部件在窗體上 47 使用設計器 從里到外進行布局 添加必要的彈簧 1 2 1 選中每一個groupbox 2 應用垂直布局管理 48 使用設計器 從里到外進行布局 添加必要的彈簧 1 1 選中l(wèi)abel click 2 選中combobox Ctrl click 2 49 使用設計器 從里到外進行布局 添加必要的彈簧 1 1 應用一個水平布局管理 50 使用設計器 從里到外進行布局 添加必要的彈簧 1 3 1 選中2個groupbox并進行布局管理 2 添加一個水平彈簧 3 將彈簧和按鈕放置進一個布局管理器中 2 51 使用設計器 從里到外進行布局 添加必要的彈簧 1 3 1 添加一個垂直彈簧 2 選中窗體本身 3 應用一個垂直布局管理 2 52 使用設計器 進行信號連接 部件之間 1 2 3 4 1 轉到signalsandslot編輯模式 2 從一個部件拖放鼠標到另一個部件 3 選中signalandslot 4 在信號和槽編輯器中查看結果 53 使用設計器 進行信號連接 到你的代碼中 1 2 3 1 在widgetediting模式中2 右擊一個部件并選擇Gotoslot 3 選擇一個信號來連接到你的代碼 54 使用設計器 在代碼中使用通過ui類成員使用訪問其所有子部件 classWidget publicQWidget private Ui Widget ui voidWidget memberFunction ui pushButton setText 55 頂層窗體 56 頂層窗體 沒有父部件的部件自動成為窗體QWidget 普通窗體 通常無模式QDialog 對話框 通常期望一個結果如OK Cancel等QMainWindow 應用程序窗體 有菜單 工具欄 狀態(tài)欄等QDialog和QMainWindow繼承自QWidget 57 使用QWidget作為窗體 任何部件都可成為窗體沒有父部件的部件自動成為窗體擁有父部件的部件需要傳遞Qt Window標志給QWidget構造函數(shù)使用setWindowModality函數(shù)設定不同模式NonModal 所有窗體可立即使用WindowModal 父窗體阻塞ApplicationModal 所有其他窗體阻塞 58 窗體屬性 使用setWindowTitle設置窗體標題QWidget構造函數(shù)和窗體標志位QWidget QWidget QWidget parent Qt WindowFlagsf 0 Qt Window 生成一個窗體Qt CustomizeWindowHint 自定制 不用缺省設置Qt WindowMinimizeButtonHintQt WindowMaximizeButtonHintQt WindowCloseButtonHintetc 59 使用QDialog 搜索對話框是典型的自定對話框繼承自QDialog使用設計器或代碼來建立用戶界面QLabel和QRadioButton是 輸出 OK Cancel按鈕 60 程序接口 classSearchDialog publicQDialog Q OBJECTpublic explicitSearchDialog constQString 61 SearchDialog SearchDialog constQString 實現(xiàn) 62 使用Dialog voidMyWindow myFunction SearchDialogdlg settings value searchText toString settings value searchBackward false toBool this if dlg exec QDialog Accepted QStringtext dlg searchText boolbackwards dlg isBackward 軟件接口已經(jīng)被定義以使其更易于使用 63 使用QMainWindow QMainWindow是普通桌面程序的文檔窗體菜單欄工具欄狀態(tài)欄?？看绑w中心部件 64 QAction 65 QAction介紹 許多用戶界面元素有相同的用戶行為 action 一個QAction對象可以表示所有這些操作方式 并保持工具提示 狀態(tài)欄提示等等 Ctrl S Action 66 QAction介紹 一個QAction封裝所有菜單 工具欄和快捷鍵需要的設置常用屬性有text 各處所用的文本icon 各處用到的圖標shortcut 快捷鍵checkable checked 當前操作