qt如何实现如下界面？

Qt向开发人员提供了可以轻松设计现代GUI和开发应用程序所必需的多种API。Qt可用于开发C++应用程序，也可使用Qt Quick进行开发。Qt Quick使用QML语言。QML是解释型语言，开发人员即使不熟悉C++知识，也可以用QML设计GUI。

QML是一种描述性脚本语言(过程化语言)具有扩展JavaScript类型的语法结构。QML具有的Qt Declarative模块可以解释JavaScript之类编程语言。使用C++编写源代码后，需要编译程序生成可执行的二进制文件。与之类似，Qt Declarative模块可转换为可执行QML代码的应用程序，而且QML中可使用C++API。

使用Qt Quick和QML不能创建完美的应用程序。例如，要创建一个可以查询网络流量的应用程序时，需要使用本地库以控制系统层级的网络流量。因此，提供给用户的GUI使用Qt Quick,以图形的形式显示网络流量，而测定网络流量的API最好是传统的Qt API或系统层级的API。

用Qt Quick实现GUI时，实际运行的模块是传统的Qt API。这种方式与使用HTML5创建应用程序的操作类似。换言之，用HTML5创建GUI时，实际使用本地API模块实现应用程序。

Qt Quick的优势在于，设计逻辑和程序逻辑是可分离的。也就是说，不需要C++知识，只用QML就可以设计GUI。QML类似于HTML5，既直观又容易理解，而且支持传统C++中提供的所有功能。例如，Qt WebKit、动画、多媒体等都可使用QML。

Qt支持多种平台,如MS Windows . Linux/Unix . Mac OS及Android . ios、Windows 8( WinRT ).BlackBerry 10、 QNX、VxWorks.嵌入式Linux等移动设备和嵌入式平台。不必重新编写源代码即可将Qt应用于多种平台，平台附属功能除外。

Qt可以跨平台使用网络、图形图像、数据库、OpenGL/ES、 WebKit. HTMLS、多媒体等多种API创建应用程序，并将之应用于多种平台，且可在各平台使用统一的IDE 工具。Qt Creator是Qt的官方IDE，它提供了集Qt Designer. Help. Assistant功能于- .体的综合环境。 因此，开发程序时，如果想从Qt API中获得更详细的信息，则将光标定位到相应类或函数上并按FI键即可。

Qt API可应用于多个领域，Qt拥有丰富的API和易操作且结构直观的库，不仅可轻松创建源代码，而且能够大大缩减应用程序的开发时间。

Qt不仅支持2D/3D图形谊染，还支持OpenGL之类的图形API、SVG API，以及可轻松运用多媒体功能的API。

为了在移动设备与嵌人式设备上运行3D图形，Q引入了3D图形加速器。Qt不仅可运用3D图形，还可在2D图形中运用3D图形加速器。因此，在Qt中, 2D/3D图形都可运用硬件图形加速器。

Qr支持WebKit。因此，Qt可利用浏览器和互联网内容创建应用程序，也可使用HTMLS。

Qt 5是最新版本。Qt 5不仅可以使用QML和JavaScript,还可以开发HTML5等网络应用程序。Qt 5增加了利用OpenGL创建的多种动画效果。

Qt主要包含开发所需的IDE ( Integrated Development Environment,集成开发环境)工具QtCreator.帮助文件Qt Assistant和IGUI设计工具Qt Designer。

Qt还提供了qmake工具，可以将用Qt创建的应用程序源代码编译为二进制可执行文件。

Qt Creator IDE

Qt Creator是使用Qt框架支持应用程序开发的IDE。Qt支持Unix/Linux. Windows. Mac os x.Android, BlackBerry、 QNX等多种平台。Qt Creatr为不同平台提供了统- -的开发环境。 使用QtCreator IDE工具创建的应用程序可部署到开发目标平台。

例如，应用程序可在嵌入式设备之类的手机、平板电脑、嵌入式Linux等远程开发目标平台上直接运行，还可使Qu应用程序在实际设备中运行，以方便调试。Qt Creator集成了Qt Designer. Help. Qt Assistant。因此，开发程序时，如果想从Qt API中获得更详细的信息，只要将光标定位到相应类或函数并按FI键即可。

开发程序时，会有多人合作开发的情况。此时通常使用Git. CVS等版本控制工具。Qt Creator集成了此版本控制系统,可管理QU项目。Qt Creator.支持GNU Symbolic Debugger( GDB ). MicrosoftConsole Debugger ( CDB )和QML/JavaScript Debugger,以调试Qt应用程序，也支持源代码中检测分析内存泄漏等问题的工具。下面详细介绍Qt Creator的功能。

1.创建Qt项目

在Qt Creator中按照项目创建过程，使用项目向导分阶段创建新项目。依据项目向导生成新项目时，使用Qt构建工具qmake。后面会详细介绍qmake。

可以用Q项目向导创建项目，也可以只使用qmake在记事本之类的编辑器上创建。后面会详细介绍这种方法，本章主要介绍如何使用项目向导创建新项目。

Qt可跨平台使用统-的开发环境( IDE ) Qt Creator界面，即使平台不同，也可用统一的方法创建项目。

如图2-2所示，运行项目向导创建新项目，只需选择Qt Creator的File (文件)菜单，或者按Ctrl+N快捷键即可运行。

向导的第-一个画面中，可根据想要创建的Qt应用程序的种类选择项目,如基于控件的GUI应用程序、基于Mobile的程序、基于系统的程序等。此处准备创建基于GUI应用程序的项目，所以在Projects (项目)栏选择Applications (应用程序),在中间的菜单栏选择Qt Gui Application,点击下拉菜单中的Choose (选择)键，然后选择出现的向导画面。

第二个向导画面是类向导。此阶段中，要指定C++源文件和头文件名，以及生成项目类的基类(Base class)。 基类是QMainWindow. QDialog. QWidget之- -。 此处选择了QWidget,类名定义为MyWidget。

勾选图2-3中的Generate form项是指，可以使用项目设计师指定UI文件。设计师可以使用鼠标拖曳GUI组件，以放置UI文件。

点击图2-3中的Next(下一步)键，进入下个界面。下个界面是目前为止用项目向导生成的结果汇总，点击下方的Finish (完成)键完成项目创建。

生成项目后，项目文件中已生成了扩展名为.pro的文件。该文件指定了项目编译所需的库和模块。例如，如果开发的Qt应用程序想使用Network模块，就要如图2-4所示，向pro文件添加Network模块。

除Qt应用程序外，Qt Creator项目向导还可生成Qt库开发向导等多种项目,

2.项目版本控制/配置控制

Qt Creator支持多种版本控制系统，以集成项目版本控制配置控制。

Qt Creator使用版本控制系统时，必须从版本控制系统中为PC客户端下载指定的目录。确定指定目录PATH前，要先在Qt Creator菜单中依次选择Tools- +Options- →Version Control (工具- +选项一版本控制),然后设置要使用的版本控制系统。

3.设置项目的构建和运行配置项

Qt Creator可根据要开发的平台设置Build & Run (构建和运行)。例如，在Android, QNX或嵌入式Linux等被物理隔离的开发平台中，创建适宜的开发环境以设置构建和运行。现在，为了修改设置，按CTRL+5快捷键即可设置构建和运行。在菜单中依次选择Tools- +Options- +Build &Run- oKits(工具- +选项- -构建和运行一+构建套件)即可。

4.调试Qt应用程序

Qt Creator支持调试功能。可使用GDB和CDB调试工具调试当前已编译的可执行二进制文件。在菜单中选择Tools- +Options- +Debugger (工具- +选项-→调试器)即可设置GDB和CDB。

Qt Creator还可以在GUI环境下调试程序。在Qt Creator的Debug菜单中可对用C++或QML开发的应用程序的调试配置进行设置。

按F5键开始调试。点击编辑器的行( Line )即可设置Qt Creator的断点。

Qt Creator可以使用调试模式的快捷键进行如下调试。

5.编辑器功能

Qt Creator的编辑器功能可分为导航和编辑代码。用户可以在头文件、源文件、资源文件、项目文件以及不同项目中使用导航功能，还可以通过项目的树形结构检索。图2-10右边一栏是代码编辑器，可以直接生成C++和QML ( Qt Quick)代码。

通过包含于当前源文件的符号(Symbol),菜单栏下端的编辑器工具栏可以搜索成员变量和成员函数。

菜单栏左侧的←和→键可保存当前打开文件的历史记录( History),并可以前后移动。在下拉菜单展开当前文件目录和符号目录时，可以双击当前文件和符号右下方的箭头实现移动。使用Split功能后，Qt Creator的代码编辑器可以同时打开多个文件。

Qt Creator代码编辑器可以高亮显示丽数、for语句等源代码，还可以打开或隐藏特定区域。

要想在编辑器中使用高亮功能，需要在菜单中依次点击Tools- +Options- +Text Editor- +Display- Highlighing blocks (工具-选项-→文本编辑器- +显示- +高亮显示段落)。生成源代码时，会自动标记语法( Syntax )错误部分。如果把鼠标指针放在出错区域，使用工具提示控件( TolTip )可指出语法错误部分。

还提供标记语义错误( Semantic error )和预警( waring )功能。

符号窗口标注了常见图标及其对应类别，可提高源代码的可读性，如表2-4所示。

按F2键可向头文件的源代码文件移动。源代码文件中，将光标放到成员函数或成员变量上，按Shif+F2后，成员函数或成员变量会向所在的行移动。

Qt Assistant

Qt Assistant包含可以查找Qt API的帮助文档以及讲解各模块的示例应用程序，支持关键字索引和书签( Bookmark)功能，可单独保存常用文件，还可通过索引快速查找帮助文档。

通过Qt Assistant左侧菜单中的“内容"和“索引”标签，可以查找各模块和功能对应的帮助文件。“书签”标签页将常用帮助文件和收藏夹整理为目录结构，便于查找。

Qt Assistant可以切换帮助文件字体，依次选择[编辑]→[配置]进人对话框即可。

Qt Designer

Qt Designer是-款配置并设计Qt组件和用户自定义组件的设计工具,它可以在Qt Creator IDE工具中运行，也可以单独运行。

Qt Designer最大的特点是，可以拖放控件或组件以布置用户界面(GUI)窗口。

使用硬编码布置窗口既耗时又不够直观，使用Qt Designer就能大大节省开发人员的精力。

如图2-19所示，在左侧的Widget Box (窗口部件盒)中拖曳Qt控件布置窗口，在右侧的“对象查看器”中设置窗口内各控件的类名( class name ).大小( size).字体( font).焦点位置( focusposition)等全部属性。后续章节会结合具体示例讲解Qt Designer工具。

qmake

利用qmake.工具可以对通过Qt实现的应用程序进行编译。Qt在Linux/Unix、Windows、Mac OSx、Android等多种平台使用统- -的语法结构， 这简化了编译过程。

例如，在Linux平 台使用gcc等工具编译应用程序时，会生成多个甚至几十个源文件;如果使用Qt之外的其他库，则必须生成复杂的Makefile。而iqmake可 以自动生成Makefile。假设有如下3个源文件。

口addressbook.h

口addressbook.cpp

口main.cpp

如果使用qmake将上述源文件移动到相应目录，就会生成扩展名为pro的项目文件。在目录终端窗口输人如下内容即可生成项目文件( .pro)。

qmake可执行文件位于子目录bin目录下，如果不设置目录PATH,将不能找到qmake可执行文件。

安装Qt后，可通过“管理员设置命令提示符”在命令提示符中运行qmake，如图2-21所示。

qmake生成的项目文件( .pro)内容如下所示。

HEADERS关键词表示头文件, SOURCES关键词表示源文件。TARGET自动生成可执行文件名，与项目文件名一-致。 TARGET生成的文件名是应用程序编译后的可执行二进制文件名。例如，在Windows平台上可以用address exe作为可执行文件名。

在项目窗口执行下列命令，用qmake生成的项目文件( .pro )生成Makefile。

如果使用Visual Studio，则执行如下命令。

1.调试模式

Release版本的Qt程序不包含任何调试符号。如下调试项目文件,在开发过程中将程序编译为调试版本。

2.向特定平台添加源文件

Qtf能够识别大多数平台，在特定平台进行如下操作即可添加指定的源文件。

如果在Unix/Linux下进行如下操作，则添加指定选项和源文件即可。

3.如果特定文件不存在

如果没有指定的源文件，qmake是不能生成Makefile的。qmake生 成Makefile前，使用如下选项查看文件是否存在。

GUI设计与制作

基础控件

使用setGcomtry(方法布局控件时，setGeometry(虽然 可以改变Window窗体的大小，但是不能改变控件的位置和大小。

而使用layout布局时，既可以改变Window窗体的大小，也可以改变控件的位置和大小。3.2节将介绍Layout布局的相关内容。

使用QStyle类可以改变控件的风格。例如，就像通过改变Windows或者Linux OS的主题来改变整体风格-一样，在应用程序中使用QSyle可以改变UI的整体风格。

QStyle除了提供基本的风格以外，还为用户提供可直接定制UI风格的机制。用户可以利用QtStyle Sheet实现定制，此方法使用HTML CSS ( Cascading Style Sheet),并将其应用于控件。例如，在QLineEdit、QCheckBox 和QPushButton控件上应用CSS,方法如下所示。

以上简单介绍了Qt Style的功能，此外，用户还可创建能够直接操作UI风格和功能的Customi控件。后文会具体介绍Custom控件操作方法。

Qt控件可分为QCheckBox、QPushButton 和QListView、QCalendarWidget 等高级控件，QButtonGroup. QGroupBox等同属性的组合控件,以及抽象控件三大类。了解这些控件对开发应用程序有很大帮助。具体介绍如表3-1所示。

QCheckBox和QButtonGroup

Qt中QCheckBox控件的特点是提供了可以多选的用户界面。

QCheckBox有Check ( On )和UnCheck( off)两个选项，可任选其- -。第一个参数是CheckBox项目文本，第二个参数可以声明父类。

“&”字符表示可以使用CheckBox的快捷键(Short-Cut),快捷键AIt+E可以激活或禁用CheckBox。

应用程序中使用CheckBox时，可以使用QButtonGroup将其分为多个组。

第一个参数指定父类。QButtonGroup类控件使用成员函数addButton()将CheckBox包含在组内。

CheckBox的特点是可以在多个项目中多选，而若使用QButtonGroup类控件的setExclusive()函数，则可将CheckBox的属性转换为“只能单选"

QCheckBox的第- -个参数声明CheckBox的文本,第二个参数声明父类控件。第三行指定了包.含CheckBox的组。因为已经指定了组，所以并不影响Programming. Qt. OS复选框的选择。

Game、Office. Develop为第- -组, Programming、Qt. OS为第二组。第- -组的特点是 只能单选，第二组则能多选。

在应用程序中，CheckBox使用函数connect)查看是否被用户激活。

选择第一组的复选框或者未被激活时，运行槽( SLOT )函数的成员函数chkChanger)。

若CheckBox被激活，则函数chackState()返回TRUE，否则返回FALSE。

QCheckBox可以向文本位置添加图像。利用QAbstractButton控件的 成员函数setlcon(0便可以在QCheckBox中使用图像资源文件。

QComboBox

用户点击控件后，可从出现的下拉菜单中选择一项，QComboBox提供此GUI。

要向QComboBox控件.上添加项目( Item )的话，可以使用文本添加对象或者图像与文本- -起使用。

向QComboBox控件添加项目时，使用函数addItem()。如下所示，使用重写( Overriding)后的兩数addltem()向项目添加图标。

QComboBox编辑项目时，提供返回指定的项目索引的信号。

使用信号函数currentIndexChangedint)编辑项目时，返回编辑后的项目索引。

如果使用成员函数currentIndex)接收用户选定的项目索引,则会返回当前QComboBox选定的项目索引。

利用添加的项目索引删除项目或提供全部项目个数的返回函数,此外还提供返回选定的项目文本的成员函数。

QCommandLinkButton

此控件与QPushButton控件功能相同，具有与MS Windows的Link Button相同的风格。

输人按钮上显示的标签，添加第二个参数Description (描述性标签)，按钮下方会显示描述( Description),如图3-9所示。

如果不想使用第二个参数Description,亦可使用重写的构造函数进行如下操作。

QCommandL inkButton控件继承自QPushButton父类控件，故可以使用QPushButton控件类的函数。

QDate类 和QDateEdit控件

QDateEdit是用于显示和编辑日期的控件，可以使用QDate类提供的功能显示日期。QDate类是用于显示年、月、日的控件，而且除了提供用于显示日期的函数之外,还提供可以编辑8期的多种成员函数。

指定年、月、日,或从系统时钟读取当前日期后，QDate的构造函数连接到QDateEdit控件即可显示。

QDate类提供的成员函数可以使用读取日期或返回星期索引的成员函数，确定当前设定的日期是星期几。

实例dt1设定的日期中，为了知道从这一年开始经过的天数，使用成员函数DayOfYear()后，通过int返回过去的日期。用类似的成员函数设定日期，使用下列成员函数即可得知该日期当月最后一天的日期、当年最后一天的日期。

QDate类利用成员函数显示多种类型的日期，该成员雨数通过显示设定日期的方法返回QString数据类型。

利用成员函数isValid()查看QDate设定的日期是否为有效日期。

显示星期的函数dayOfWeek)返回用数字1~7表示的星期。如果想把此函数收到的返回值转换为QString类型的字符串，可利用成员丽数longDayName0返回用字符表示的星期。

利用与此类似的成员函数longMonthName),可以将用数字表示的月返回为用完整字符表示的月。

此外还提供成员函数ShortDayName0和ShortMonthNameO，返回除完整字符串外的短字符串。

显示日期的QData类能够切换显示风格的标准类型。

QTime类 和QTimeEdit控件

QTime类可以显示并编辑时、分、秒、毫秒。QTime类利用成员函数提供开发程序必需的多种时间相关功能，它可以显示系统时钟和当前时间到特定时间的时间跨度，还可以比较时间。

QTimeEdit控件可以把从QTime类中读取的时间显示到GUI。如果QTimeEdit构造函数的第一个参数指定了从QTime类中读取的时间，那么可以在QTimeEdit控件上显示时间。

如图3-14所示，将光标移动到时，分、秒的位置后，点击右侧微调按钮( spin button)即可编辑时间。

QTime类利用成员函数提供计算时间的功能。下 面通过示例代码介绍QTime类的成员函数。

利用成员函数addSecs(0和laddMSecs0可以添加指定到当前时间、秒和毫秒的值。

成员函数currentTime(获取设置好的系统当前时间。

QTime可以使用成员函数star()和elapsed()计算过程时间，start()开 始计时，elapsed0处理调用的源代码行。成员函数fromStringO可以通过多种方法显示时间。

为了从当前设定的时间中获得小时(0-23 ),可以使用成员函数hour(),用int返回小时。与之类似，使用成员函数minute(、second()可以返 回分和秒。

成员函数toString0可以通过多种方法显示时间。

QDateTime类 和QDate TimeEdit控件

QDateTime类用于编辑日期和时间并提供GUI,通过QDateTimeEdit控件显示其得到的日期和时间。

QDateTimeEdirt控件不仅可以使用QDateTimc类,也可以使用QDate类和QTime类显示日期和时间。

从QDateTime类得到系统时间，并将日期和时间显示到QDateTimeEdit控件。成员丽数setDisplayFromat()可以依据Q提供的表达格式显示日期和时间。

QDteTimeEdit可以用微调框按钮编辑控件上显示的日期和时间，也可以指定日期和时间的变更范围。

成员函数setMinimumDate(和IsetMaximumDate(在用微调按钮编辑日8期时，只能在指定范围内编辑。

QDial

QDial控件提供了圆形volume调节器之类的的用户界面，可以利用成员函数指定范围。

QDial控件类继承自QAbstractSlider,与slider控件类似， 可以利用信号与槽设置QDial的范围或编辑设置值。

成员函数setRangeO可以指定QDial控件的范围。成员函数setNotchesVisible0可以在QDial控件上显示刻度。用户如果用鼠标编辑QDial控件的值,那么连接valueChanged(int)信号后，可以得到编辑后的QDial的当前值。

头文件widget.h声明槽函数changeDate)，如果槽函数在源文件widget.cpp中被信号调用，会生成返回QDial控件当前值的成员函数，如下所示。

使用onnect()丽数调用槽两数changeDate()，以编辑QDial控件的值。为了与信号连接，向构造函数添加如下源代码。

QSpinBox和QDoubleSpinBox

QSpinBox提供GUI,该界面可以使用上下按钮编辑int数据类型的整数值。QDoubleSpinBox则可编辑double数据类型的值。这两个控件在功能上唯一的区别就是处理的数据类型不同。

QSpinBoxi和QDoubleSpinBox控件可以设定GUI用户编辑值的范围，且可以在用数字显示的Prefix和Suffx部分使用特定字符或单位字符。例如，可以显示货币单位。

成员函数setMinimum0和IsetMaximum0可以设置控件的最小值和最大值。

成员函数setValue()可以设置控件要显示的默认值。如果用成员函数setValue()设置的默认值大于最大值，那么最大值将被设为默认值。

QSpinBox和QDoubleSpinBox控件可以在Prefix和Sufix部分指定特定字符。

成员丽数setPrefix()和setSuffix0可以分别在Prefix和sufix部分指定特定字符。

QSpinBox和QDoublesSpinBox控件如果利用上下按钮编辑默认值，那么会提供处理事件的信号与槽。编辑完成后，在头文件重添加如下源代码以处理事件。

valueChange()是编辑完QSpinBox控件的默认值时要调用的槽函数，double_ valueChange()是QDoubleSpinBox控件的信号事件发射完成时调用的槽函数。

点击控件的上下按钮后，设置的默认值输出到调试窗口。信号事件发射完成后，添加如下源代码，以调用生成的槽函数。

就先说这么多了，希望能帮到大家。如有任何问题，欢迎与我联系。需要C语言入门大礼包、各种C语言C++学习资料的小伙伴可以加入小编的学习圈，里面聚集了一些正在学习C语言的小伙伴，在学习C语言的过程中遇到任何的问题，大家都可以一起交流，大家可以根据自己需要领取源码素材。希望大家都能够实现自己的梦想，加油！大家可以根据自己需要领取源码素材！

点击下方链接进群领取学习资料以及项目源码和素材！

点击链接加入群聊