【Qt学习笔记03】UI设计
一、QMainWindow
1.1 QMainWindow结构概览
QMainWindow由一个菜单栏、多个工具栏、多个铆接部件、一个状态栏、一个中心部件组成。各部件的具体布局区域如图所示。
上面图片所用到的代码及注释附在本文的最后
1.2 菜单栏QMenuBar
菜单栏是窗口最上方的区域,基本每个软件的标题栏下面都会有这么一行,这就是菜单栏。
注意:菜单栏只能创建一个
代码示例
引入菜单栏QMenuBar
1 |
菜单栏创建
1 | QMenuBar * bar = menuBar(); |
将菜单栏放入到窗口中
1 | setMenuBar(bar); |
创建菜单栏的菜单(比如文件、编辑、工具、帮助等)
1 | QMenu * fileMenu = bar->addMenu("文件"); |
创建菜单项(比如文件菜单下的新建、打开项)
1 | QAction * newAction = fileMenu->addAction("新建"); |
1.3 工具栏QToolBar
工具栏一般位于菜单栏下方,或者左右两侧、或底部。
注意:工具栏可以创建多个。
代码示例
引入工具栏头文件
1 |
创建工具栏(工具栏创建后可以随意拖动)
1 | QToolBar * toolBar = new QToolBar(this); |
将工具栏放入窗口,Qt::TopToolBarArea是默认放上侧,以此类推。
1 | addToolBar(Qt::LeftToolBarArea,toolBar); |
设置只允许左右停靠
1 | toolBar->setAllowedAreas( Qt::LeftToolBarArea | Qt::RightToolBarArea ); |
设置浮动(可以拖拽,但移动不了)
1 | toolBar->setFloatable(false); |
设置移动(总开关,设为False后无法拖拽)
1 | toolBar->setMovable(false); |
在工具栏中添加内容
1 | //将刚才创建的菜单项Action添加到工具栏中 |
1.4 状态栏QStatusBar
状态栏是窗口最低不,显示软件状态的栏。(例如ppt、word最下面显示字数、幻灯片数量的那一行)
注意:状态栏最多有一个。
代码示例
引入状态栏头文件
1 |
创建状态栏
1 | QStatusBar * stBar = statusBar(); |
将状态栏设置到窗口
1 | setStatusBar(stBar); |
在菜单栏中放入标签控件
1 | //引入头文件 |
1 | QLabel * label = new QLabel("提示信息",this); |
1.5 铆接部件QDockWidget
铆接部件又称为浮动窗口,是窗口中,在中心窗口周围的部件,通常是可以修改位置,可以拖出来成为单独的窗口,也可以双击使其回到父窗口中。
常见的铆接部件包括(IDE左侧或右侧的项目栏、底部的编译输出栏等)
铆接部件可以有多个
代码示例
引入头文件
1 |
创建铆接部件
1 | QDockWidget * dockWidget = new QDockWidget("浮动",this); |
将铆接部件添加到窗口中
1 | addDockWidget(Qt::BottomDockWidgetArea,dockWidget); |
设置铆接部件的停靠区域,例如只允许上下(与工具栏设置参数一致)
1 | dockWidget->setAllowedAreas( Qt::TopDockWidgetArea | Qt::BottomDockWidgetArea ); |
1.6 中心部件QTextEdit
中心部件就是一个程序中心的部分,例如IDE的程序编写区域,WPS的文字编辑区域等。
中心部件只能设置一个。
代码示例
引入头文件
1 |
创建中心部件
1 | QTextEdit * edit = new QTextEdit(this); |
设置中心部件到父窗口
1 | setCentralWidget(edit); |
中间白色的区域就是中心部件。
1.7 UI工具设计图形界面
在Qt中也提供了图形化的UI设计界面。
通过双击项目文件中的xxx.ui
文件,就可以打开设计页面。
在这里,上文提到的所有项目(菜单栏、工具栏等),以及各自的属性,都可以直接拖拽放置,并在右下角修改其属性。
创建的控件,在代码中通过ui->abcd
可以找到所有控件。
但是这种布局方式所产生的代码结构较差。
通常是在代码中编写大概,然后在设计中进行微调。
二、资源文件
很多时候,在窗口中我们不仅需要文字,还需要添加一些图标,图片等,让应用显得更人性化。这就需要我们在项目中导入资源文件。
2.1 资源文件的导入
-
首先将图片复制到项目文件夹中(注意图片必须是png格式,直接更改用户名无效,必须通过图片编辑软件转换)
-
右键项目名 -> 添加新文件 -> Qt -> QtResourceFile
-
得到一个
.qrc
文件,右键,open in edit
-
添加 -> 前缀,自己设置一个前缀
-
添加 -> 文件 -> 找到图片文件夹 -> 选中所有图片 -> 打开
-
可以看到
.qrc
文件下方多了一个“前缀”文件夹
2.2 代码中使用
代码中使用示例如下:
1 | `ui->actionNew->setIcon(QIcon(``":/前缀/图片文件夹名/图片文件名.png"``));` |
附
1 | //mainwindow.cpp |