Qt部件和设计师ppt课件.ppt

《Qt部件和设计师ppt课件.ppt》由会员分享，可在线阅读，更多相关《Qt部件和设计师ppt课件.ppt（73页珍藏版）》请在三一办公上搜索。

1、1,用户界面组件,2,用户界面组件,用户界面由单个部件（widget）构成设计器（Qt Designer）中有46个部件（widget）直接派生自QWidget的部件超过59个,QLabel,QPushButton,QLineEdit,QDoubleSpinBox,QScrollBar,3,部件中的部件,部件被分层次放置容器类提供可视化结构，但同时也是具有一定功能化的如 QRadioButton，需要用彼此间实现互斥，可以将多个QRadioButton放到一个GroupBox中,QGroupBox,QTabWidget,4,部件的特点,占据屏幕中一个方形的区域从输入设备接收事件当部件产生变化时

2、，发出信号多个部件以层次式的方法组合构建一个部件中可以包含其他部件,5,布局管理,6,一个对话框例子,部件被放置在布局管理器中使用户界面具有弹性易伸缩,7,弹性好在哪里？,让部件的大小适应内容让部件适应翻译变化让部件适应用户设置，如字体设置等,8,布局管理,几种可用的布局布局管理器和部件“协商”各个部件大小与位置弹簧可以用来填充空白处,QVBoxLayout,QHBoxLayout,9,一个对话框例子,对话框由多个层次的布局管理器和部件组成,10,对话框例子,QVBoxLayout *outerLayout = new QVBoxLayout(this); QHBoxLayout *topLa

3、yout = new QHBoxLayout(); topLayout-addWidget(new QLabel(Printer:); topLayout-addWidget(c=new QComboBox(); outerLayout-addLayout(topLayout); QHBoxLayout *groupLayout = new QHBoxLayout(); . outerLayout-addLayout(groupLayout); outerLayout-addSpacerItem(new QSpacerItem(.); QHBoxLayout *buttonLayout = n

4、ew QHBoxLayout(); buttonLayout-addSpacerItem(new QSpacerItem(.); buttonLayout-addWidget(new QPushButton(Print); buttonLayout-addWidget(new QPushButton(Cancel); outerLayout-addLayout(buttonLayout);,11,对话框例子,QHBoxLayout *groupLayout = new QHBoxLayout(); QGroupBox *orientationGroup = new QGroupBox();QV

5、BoxLayout *orientationLayout = new QVBoxLayout(orientationGroup);orientationLayout-addWidget(new QRadioButton(Landscape);orientationLayout-addWidget(new QRadioButton(Portrait);groupLayout-addWidget(orientationGroup);QGroupBox *colorGroup = new QGroupBox();QVBoxLayout *colorLayout = new QVBoxLayout(c

6、olorGroup);colorLayout-addWidget(new QRadioButton(Black and White);colorLayout-addWidget(new QRadioButton(Color);groupLayout-addWidget(colorGroup);,Horizontal box, 包含 group boxes, vertical boxes, radio buttons,12,对话框例子,可以使用Qt设计器来建立同样的结构,13,跨平台,14,跨平台风格,部件的绘制使用平台相关的风格以确保本地化外观,15,跨平台问题,比较不同用户界面后我们知道，不

7、仅仅是改变部件外观这么简单，还有其他的一些差别表单布局管理对话框按钮顺序标准对话框,16,跨平台问题,比较不同用户界面后我们知道，不仅仅是改变部件外观这么简单，还有其他的一些差别表单布局管理对话框按钮顺序标准对话框,Plastique,ClearLooks,Windows,MacOS X,17,跨平台问题,比较不同用户界面后我们知道，不仅仅是改变部件外观这么简单，还有其他的一些差别表单布局管理对话框按钮顺序标准对话框,18,跨平台问题,比较不同用户界面后我们知道，不仅仅是改变部件外观这么简单，还有其他的一些差别表单布局管理对话框按钮顺序标准对话框,19,通用部件,20,通用部件,Qt包含针对所

8、有常见需求的大量通用部件Qt设计器中为部件组提供很好的概貌,21,通用部件按钮,所有按钮继承自QAbstractButton这个基本类。信号clicked() 当按钮被按下（并弹起后）发出。toggled(bool) 当按钮的状态发生改变时发出。属性checkable 当按钮可检查时为真。使按钮激活。checked 当按钮被标记时为真。（用于复选或单选按钮）text 按钮的文本。icon 按钮的图标（可以和文本同时显示）。,QAbstractButton,QPushButton,QCheckBox,QRadioButton,22,通用部件列表项部件,QListWidget用于显示列表项添加项目

9、addItem(QString) 将项目附加到列表末端insertItem(int row, QString) 将项目插入到指定行选择项目selectedItems 返回QListWidgetItem的列表, 使用 QListWidgetItem:text来形成文本信号itemSelectionChanged 当选择状态改变时发出QComboBox 以更紧密的格式展示一个单选的项目列表。,QListWidget,QComboBox,23,通用部件容器,容器部件用来结构化用户界面一个简单的 QWidget 对象可当做容器来使用设计器：将部件放置在容器中并为容器提供一个布局管理器代码：为容器创建一

10、个布局管理器并将部件添加进布局管理器（布局管理器以容器为父对象）,QGroupBox *box = new QGroupBox();QVBoxLayout *layout = new QVBoxLayout(box);layout-addWidget(.);.,QGroupBox,QTabWidget,QFrame,24,通用部件输入部件,使用QLineEdit 实现单行文本输入信号textChanged(QString) 文本状态改变时发出editingFinished() 部件失去焦点时发出returnPressed() 回车键被按下时发出属性text 部件的文本maxLength 限定输

11、入的最大长度readOnly 设置为真时文本不可编辑（仍允许复制）,QLineEdit,25,通用部件输入部件,使用QTextEdit 和 QPlainTextEdit 实现多行文本输入SignalstextChanged() -文本状态改变时发出属性plainText 无定义格式文本html HTML格式文本readOnly 设置为真时文本不可编辑QComboBox 通过editable属性使其可编辑SignalseditTextChanged(QString) 当文本正被编辑时发出属性currentText combo box的当前文本,QComboBox,QTextEdit,26,通用部

12、件输入部件,编辑整型数据有许多可选的输入部件也有许多用于double，time和date类型的部件信号valueChanged(int) 当数值更新时发出属性value 当前值maximum 最大值minimum 最小值,QSlider,QScrollBar,QDial,QSpinBox,QAbstractSlider,27,通用部件显示部件,QLabel 部件显示文本或者图片属性text 标签文本pixmap 显示的图片QLCDNumber 用于显示整形数值属性intValue 显示的数值(使用display(int)函数进行设置),QLabel,QLCDNumber,QLabel,28,通

13、用部件属性,所有部件有一系列继承自QWidget类的共同属性enabled 用户交互可用或不可用visible 显示或不显示(show 或hide函数)这些属性同时影响到子部件 例如使一个容器部件不可用时：,29,QMessageBox,信息框是可以显示提示信息，并接受用户按钮输入的一种对话框信息框使用方式一：静态函数StandardButton QMessageBox:warning ( QWidget * parent, const QString & title, const QString & text, StandardButtons buttons = Ok, StandardBu

14、tton defaultButton = NoButton )Parent：父组件指针Title：标题Text：提示文本Buttons：提示框中的按钮，可用或（|）运算添加多个按钮defaultButton：默认选中的按钮类似函数还有QMessageBox:information (), QMessageBox:critical(), QMessageBox:question(), QMessageBox:about(), ,30,QMessageBox,int ret = QMessageBox:warning(this, tr(My Application), tr(The documen

15、t has been modified.n Do you want to save your changes?), QMessageBox:Save | QMessageBox:Discard | QMessageBox:Cancel, QMessageBox:Save);switch (ret) case QMessageBox:Save: / Save was clicked break; case QMessageBox:Discard: / Dont Save was clicked break; case QMessageBox:Cancel: / Cancel was clicke

16、d break; default: / should never be reached break; ,31,QMessageBox,信息框使用方式二：构造函数QMessageBox:QMessageBox ( Icon icon, const QString & title, const QString & text, StandardButtons buttons = NoButton, QWidget * parent = 0, Qt:WindowFlags f = Qt:Dialog | Qt:MSWindowsFixedSizeDialogHint )icon：图标，可取值为Mess

17、ageBox:NoIcon, QMessageBox:Question, QMessageBox:Information, QMessageBox:Warning, QMessageBox:CriticalTitle：标题Text：提示文本Buttons：提示框中的按钮，可用或（|）运算添加多个按钮parent：父组件指针F：窗口系统属性,32,QMessageBox,QMessageBox message(QMessageBox:NoIcon, tr(My Application), tr(The document has been modified.n Do you want to sav

18、e your changes?), QMessageBox:Save | QMessageBox:Discard | QMessageBox:Cancel);switch (message.exec() case QMessageBox:Save: / Save was clicked break; case QMessageBox:Discard: / Dont Save was clicked break; case QMessageBox:Cancel: / Cancel was clicked break; default: / should never be reached brea

19、k; ,33,尺寸策略,34,尺寸（size）的策略,布局是在布局管理器和部件间进行协调的过程布局管理器提供布局结构水平布局和垂直布局网格布局部件则提供各个方向上的尺寸策略最大和最小尺寸,35,尺寸的策略,printerList-setSizePolicy(QSizePolicy:Expanding, QSizePolicy:Fixed),36,尺寸的策略,每一个部件都有一个尺寸大小的示意（hint），给出水平和垂直方向上的尺寸的策略Fixed 规定了widget的尺寸Minimum 规定了可能的最小值Maximum 规定可能的最大值Preferred 给出最佳值，但不是必须的Expandin

20、g 同preferred，但希望增长MinimumExpanding 同minimum，但希望增长Ignored 忽略规定尺寸， widget得到尽量大的空间,37,尺寸的策略,每一个部件都有一个尺寸大小的示意（hint），给出水平和垂直方向上的尺寸的策略Fixed 固定大小（最严格）Minimum 可增长Maximum 可缩小Preferred 可增长可缩小Expanding 可增长可缩小，希望增长MinimumExpanding 可增长并且希望增长Ignored 忽略尺寸示意，可增长可缩小,38,如果?,2个 preferred 相邻1个 preferred, 1个 expanding2个

21、 expanding 相邻空间不足以放置widget (fixed),39,关于尺寸的更多内容,可用最大和最小属性更好地控制所有部件的大小maximumSize 最大可能尺寸minimumSize 最小可能尺寸,ui-pushButton-setMinimumSize(100, 150);ui-pushButton-setMaximumHeight(250);,40,Qt Designer,41,Qt Designer,Qt应用程序除了使用手工编写代码的方式外，还可以用过Qt Desinger来完成Qt Designer曾是一个独立的Qt桌面工具，现在集成于Qt Creator中只需要拖动相应

22、的控件输出为.ui文件，内容其实就是XMLUic编译器把.ui 文件转换成.h文件myproject.ui - ui_myproject.h,42,设计器介绍,sources*.cpp,executables,object files*.o,headers*.h,generatedmoc_*.cpp,user interfaces*.ui,43,设计器介绍,sources*.cpp,executables,object files*.o,headers*.h,generatedmoc_*.cpp,generatedui_*.h,user interfaces*.ui,uic,44,使用代码,#

23、ifndef WIDGET_H#define WIDGET_H#include namespace Ui class Widget;class Widget : public QWidget Q_OBJECTpublic: Widget(QWidget *parent = 0); Widget();private: Ui:Widget *ui;#endif / WIDGET_H,Ui:Widget类的前置声明,一个 Ui:Widget 类指针ui ，指向所有部件,基本上是一个标准的 QWidget 派生类,45,使用代码,#include widget.h#include ui_widget.

24、hWidget:Widget(QWidget *parent) : QWidget(parent), ui(new Ui:Widget) ui-setupUi(this);Widget:Widget() delete ui;,实例化类Ui:Widget 为 ui,删除 ui对象,调用函数 setupUi, 生成所有父窗体 (this)的子窗体部件,46,使用设计器,基本工作流程粗略地放置部件在窗体上从里到外进行布局，添加必要的弹簧进行信号连接在代码中使用在整个过程中不断修改编辑属性实践创造完美!,47,使用设计器,拖放部件,粗略地放置部件在窗体上,48,使用设计器,从里到外进行布局，添加必要的

25、弹簧,1,2,1. 选中每一个 group box, 2. 应用垂直布局管理,49,使用设计器,从里到外进行布局，添加必要的弹簧,1,1. 选中label (click), 2. 选中combobox (Ctrl+click),2,50,使用设计器,从里到外进行布局，添加必要的弹簧,1,1. 应用一个水平布局管理,51,使用设计器,从里到外进行布局，添加必要的弹簧,1,3,1. 选中2个group box并进行布局管理, 2. 添加一个水平弹簧, 3. 将弹簧和按钮放置进一个布局管理器中,2,52,使用设计器,从里到外进行布局，添加必要的弹簧,1,3,1. 添加一个垂直弹簧, 2. 选中窗体本

26、身, 3. 应用一个垂直布局管理,2,53,使用设计器,进行信号连接(部件之间),1,2,3,4,1. 转到signals and slot 编辑模式, 2. 从一个部件拖放鼠标到另一个部件, 3. 选中signal and slot, 4. 在信号和槽编辑器中查看结果,54,使用设计器,进行信号连接(到你的代码中),1,2,3,1. 在widget editing 模式中 2. 右击一个部件并选择 Go to slot.3. 选择一个信号来连接到你的代码,55,使用设计器,在代码中使用通过ui类成员使用访问其所有子部件,class Widget : public QWidget .priva

27、te: Ui:Widget *ui;void Widget:memberFunction() ui-pushButton-setText(.);,56,顶层窗体,57,顶层窗体,没有父部件的部件自动成为窗体QWidget 普通窗体，通常无模式QDialog 对话框，通常期望一个结果如OK，Cancel等QMainWindow 应用程序窗体，有菜单，工具栏，状态栏等QDialog 和 QMainWindow 继承自 QWidget,58,使用QWidget作为窗体,任何部件都可成为窗体没有父部件的部件自动成为窗体拥有父部件的部件需要传递 Qt:Window 标志给 QWidget 构造函数使用

28、setWindowModality函数设定不同模式NonModal 所有窗体可立即使用WindowModal 父窗体阻塞ApplicationModal 所有其他窗体阻塞,59,窗体属性,使用setWindowTitle设置窗体标题 QWidget构造函数和窗体标志位QWidget:QWidget(QWidget *parent, Qt:WindowFlags f=0)Qt:Window 生成一个窗体Qt:CustomizeWindowHint 自定制，不用缺省设置Qt:WindowMinimizeButtonHintQt:WindowMaximizeButtonHintQt:WindowCl

29、oseButtonHintetc,60,使用QDialog,搜索对话框是典型的自定对话框继承自 QDialog使用设计器或代码来建立用户界面QLabel 和 QRadioButton 是“输出”OK，Cancel按钮,61,程序接口,class SearchDialog : public QDialog Q_OBJECTpublic: explicit SearchDialog(const QString ,62,SearchDialog:SearchDialog(const QString ,实现,63,使用Dialog,void MyWindow:myFunction() SearchDi

30、alog dlg(settings.value(searchText,).toString(), settings.value(searchBackward, false).toBool(), this); if(dlg.exec() = QDialog:Accepted) QString text = dlg.searchText(); bool backwards = dlg.isBackward(); . ,软件接口已经被定义以使其更易于使用,64,使用QMainWindow,QMainWindow 是普通桌面程序的文档窗体菜单栏工具栏状态栏停靠窗体中心部件,65,QAction,66,

31、QAction介绍,许多用户界面元素有相同的用户行为（action）一个QAction对象可以表示所有这些操作方式 并保持工具提示，状态栏提示等等。,Ctrl+S,Action,67,QAction介绍,一个QAction封装所有菜单、工具栏和快捷键需要的设置常用属性有text 各处所用的文本icon 各处用到的图标shortcut 快捷键checkable/checked 当前操作是否可选中以及是否已选中toolTip/statusTip 工具栏提示文本(鼠标停顿，等待)和 状态栏提示文本(鼠标不用等待),68,QAction介绍,QAction *action = new QAction(

32、parent);action-setText(text);action-setIcon(QIcon(:/icons/icon.png);action-setShortcut(QKeySequence(Ctrl+G);action-setData(myDataQVariant);,或者在设计器中使用编辑器,69,添加Action,向不同部分的用户接口添加动作就是调用addAction那么简单在设计器中，只需简单地将每一个动作拖放到工具栏或者菜单栏,myMenu-addAction(action);myToolBar-addAction(action);,70,可停靠部件,可停靠部件是放置于QMa

33、inWindow边上的一些可拆分的部件便于使用和设置只需简单地将部件放着进QDockWidget中QMainWindow:addDockWidget向窗体添加可停靠部件,71,可停靠部件,void MainWindow:createDock() QDockWidget *dock = new QDockWidget(Dock, this); dock-setFeatures(QDockWidget:DockWidgetMovable | QDockWidget:DockWidgetFloatable); dock-setAllowedAreas(Qt:LeftDockWidgetArea | Qt:RightDockWidgetArea); dock-setWidget(actualWidget); . addDockWidget(Qt:RightDockWidgetArea, dock);,72,图标资源,将图标放进一个资源文件中，Qt会将它们内嵌进可执行文件避免部署多个文件不需要关心图标的路径位置一切都巧妙地在软件构建系统中自适应.可以将任何东西添加进资源文件中，不仅仅是图标,73,图标资源,可以轻松的在QtCreator中管理资源文件在路径和文件名前添加 : 以使用资源或者简单地在设计器的列表中选择一个图标,QPixmap pm(:/images/logo.png);,