Qt界面布局管理详解Word文件下载.docx
《Qt界面布局管理详解Word文件下载.docx》由会员分享，可在线阅读，更多相关《Qt界面布局管理详解Word文件下载.docx（11页珍藏版）》请在冰豆网上搜索。
QCheckBox
Underline"
设置字体为下划线
chkBoxItalic
Italic"
设置字体为斜体
chkBoxBold
Bold"
设置字体为粗体
rBtnBlack
QRadioButton
Black"
字体颜色为黑色
rBtnRed
Red"
字体颜色为红色
rBtnBlue
Blue"
字体颜色为蓝色
btnOK
QPushButton
确定"
返回确定，并关闭窗口
btnCancel
取消"
返回取消，并关闭窗口
btnClose
退出"
退出程序
QWDialog
windowTitle="
DialogbyDesigner"
界面窗口的类名称是QWDialog，objectName不要修改
对于界面组件的属性设置，需要注意以下几点。
1.objectName是窗体上创建的组件的实例名称，界面上的每个组件需要有一个唯一的objectName，程序里访问界面组件时都是通过其objectName进行访问，自动生成的槽函数名称里也有objectName。
所以，组件的objectName需要在设计程序之前设置好，设置好之后一般不要再改动。
若设计程序之后再改动objectName，涉及的代码需要相应的改动。
2.窗体的objectName就是窗体的类名称，在UI设计器里不要修改窗体的objectName，窗体的实例名称需要在使用窗体的代码里去定义。
界面组件布局
Qt的界面设计使用了布局（Layout）功能。
所谓布局，就是界面上组件的排列方式，使用布局可以使组件有规则地分布，并且随着窗体大小变化自动地调整大小和相对位置。
布局管理是GUI设计的必备技巧，下面逐步讲解如何实现图1所示的界面设计。
界面组件的层次关系
为了将界面上的各个组件的分布设计得更加美观，经常使用一些容器类，如QgoupBox、QtabWidget、QFrame等。
例如，将3个CheckBox组件放置在一个GroupBox组件里，该GroupBox组件就是这3个CheckBox的容器，移动这个GroupBox就会同时移动其中的3个CheckBox。
图3界面组件的放置及层次关系
图3显示的是设计图1界面的前期阶段。
在窗体上放置了2个GroupBox组件，在groupBox1里放置3个CheckBox组件，在groupBox2里放置3个RadioButton组件。
图3右侧ObjectInspector里显示了界面上各组件之间的层次关系。
布局管理
Qt为界面设计提供了丰富的布局管理功能，在UI设计器中，组件面板里有Layouts和Spacers两个组件面板，在窗体上方的工具栏里有布局管理的按钮（如图4所示）。
图4用于布局可视化设计的组件面板和工具栏
Layouts和Spacers两个组件面板里的布局组件的功能见表5：
表5组件面板上用于布局的组件
布局组件
功能
VerticalLayout
垂直方向布局，组件自动在垂直方向上分布
HorizontalLayout
水平方向布局，组件自动在水平方向上分布
GridLayout
网格状布局，网状布局大小改变时，每个网格的大小都改变
FormLayout
窗体布局，与网格状布局类似，但是只有最右侧的一列网格会改变大小
HorizontalSpacer
一个用于水平分隔的空格
VerticalSpacer
一个用于垂直分隔的空格
使用组件面板里的布局组件设计布局时，先拖放一个布局组件到窗体上，如在设计图4中3个按钮的布局时，先放一个HorizontalLayout到窗体上，布局组件会以红色边框显示。
再往布局组件里拖放3个PushButton和2个HorizontalSpacer，就可以得到图1中3个按钮的水平布局效果。
在设计窗体的上方有一个工具栏，用于调整设计器进入不同的状态，以及进行布局设计，工具栏上各按钮的功能见表6。
表6UI设计器工具栏各按钮的功能
按钮及快捷键
EditWidget（F3）
界面设计进入编辑状态，就是正常的设计状态
EditSignals/Slots（F4）
进入信号与槽的可视化设计状态
EditBuddies
进入伙伴关系编辑状态，可以设置一个Label与一个组件成为伙伴关系
EditTabOrder
进入Tab顺序编辑状态，Tab顺序是在键盘上按Tab键时，输入焦点在界面各组件之间跳动的顺序
LayOutHorizontally（Ctrl+H）
将窗体上所选组件水平布局
LayOutVertically（Ctrl+L）
将窗体上所选组件垂直布局
LayOutHorizontallyinSplitter
将窗体上所选组件用一个分割条进行水平分割布局
LayOutVerticallyinSplitter
将窗体上所选组件用一个分割条进行垂直分割布局
LayOutinaFormLayout
将窗体上所选组件按窗体布局
LayOutinaGrid
将窗体上所选组件网格布局
BreakLayout
解除窗体上所选组件的布局，也就是打散现有的布局
AdjustSize（Ctrl+J）
自动调整所选组件的大小
使用工具栏上的布局控制按钮时，只需在窗体上选中需要设计布局的组件，然后点击某个布局按钮即可。
在窗体上选择组件时同时按住Ctrl键，可以实现组件多选，选择某个容器类组件，相当于选择了其内部的所有组件。
例如，在图3的界面中，选中groupBox1，然后单击“LayOutHorizontally”工具栏按钮，就可以对groupBox1内的3个CheckBox水平布局。
在图4的界面上，使groupBox1里的3个CheckBox水平布局，groupBox2里的3个RadioButton水平布局，下方3个按钮水平布局。
在窗体上又放置了一个PlainTextEdit组件。
现在，改变groupBox1、groupBox2或按钮的水平布局的大小，其内部组件都会自动改变大小。
但是当改变窗体大小时，界面上的各组件却并不会自动改变大小。
随后还需为窗体指定一个总的布局。
选中窗体（即不要选择任何组件），单击工具栏上的“LayOutVertically”按钮，使4个组件垂直分布。
这样布局后，当窗体大小改变时，各个组件都会自动改变大小。
在UI设计器里可视化设计布局时，要善于利用水平和垂直空格组件，善于设置组件的最大、最小宽度和高度来实现某些需要的布局效果。
Tab顺序
在UI设计工具栏上单击“EditBuddies”按钮可以进入编辑状态，如设计一个窗体时，进入编辑状态之后的界面如图7所示。
图7
图8Tab顺序编辑状态
在UI设计器工具栏上单击“EditTabOrder”按钮进入Tab顺序编辑状态（如图8所示）。
Tab顺序是指在程序运行时，按下键盘上的Tab键时输入焦点的移动顺序。
一个好的用户界面，在按Tab键时，焦点应该以合理的顺序在界面上移动，而不是随意地移动。
进入Tab顺序编辑状态后，在界面上会显示具有Tab顺序组件的编号，依次按希望的顺序单击组件，就可以重排Tab顺序了。
没有输入焦点的组件是没有Tab顺序的，如Label组件。
项目功能实现
下面开始设计程序功能。
对于该程序，希望它的功能如下：
1.单击UnderLine、Italic、Bold3个CheckBox时，根据其状态，设置PlainTextEdit里的文字的字体样式；
2.Black、Red、Blue3个RadioButton是互斥选择的，单击某个RadioButton时，设置文字的颜色；
3.单击“确定”“取消”或“退出”按钮时，关闭窗口，退出程序。
字体样式设置
窗体在设计模式下，选中chkBoxUnder组件，单击右键调出其快捷菜单。
在快捷菜单中单击菜单项“Gotoslot…”（中文状态为“转到槽”），出现如图9所示的对话框。
图9QcheckBox的Gotoslot对话框
该对话框列出了QCheckBox类的所有信号，第一个是clicked（），第二个是带一个布尔类型参数的clicked（bool）。
信号clicked（bool）会将CheckBox组件当前的选择状态作为一个参数传递，在响应代码里可以直接利用这个传递的参数。
而如果用信号clicked（），则需要在代码里读取CheckBox组件的选中状态。
为了简化代码，选择clicked（bool）信号。
选择clicked（bool），然后单击“OK”按钮，在QWDialog的类定义中，会在privateslots部分自动增加一个槽函数声明，函数名是根据发射对象及其信号名称自动命名的。
voidon_chkBoxUnder_clicked（boolchecked）;
同时，在qwdialog.cpp文件中自动添加了函数on_chkBoxUnder_clicked（bool）的框架，在此函数中添加如下的代码，实现文本框字体下划线的控制。
voidQWDialog:
:
on_chkBoxUnder_clicked（boolchecked）
{
QFontfont=ui->
txtEdit->
font（）;
font.setUnderline（checked）;
ui->
setFont（font）;
}
以同样的方法为Italic和Bold两个CheckBox设计槽函数，编译后运行，发现已经实现了修改字体的下划线、斜体、粗体属性的功能，说明信号与槽函数已经关联了。
但是，查看QWDialog的构造函数，构造函数只有简单的一条语句。
QWDialog:
QWDialog（QWidget*parent）:
QDialog（parent）,ui（newUi:
QWDialog）
setupUi（this）;
这里没有发现用connect（）函数进行几个CheckBox的信号与槽函数关联的操作。
这些功能是如何实现的呢？
查看编译生成的ui_qwdialog.h文件。
构造函数里调用的setupUi（）是在ui_qwdialog.h文件里实现的。
查看setupUi（）函数的内容，也没有发现用connect（）函数进行几个CheckBox的信号与槽关联的操作，只是在setupUI（）里发现了如下的一条语句：
QMetaObject:
connectSlotsByName（QWDialog）;
秘密就在于这条语句。
connectSlotsByName（QWDialog）函数将搜索QWDialog界面上的所有组件，将信号与槽函数匹配的信号和槽关联起来，它假设槽函数的名称是：
voidon_<
objectname>
_<
signalname>
（<
signalparameters>
）;
例如，通过UI设计器的操作，为chkBoxUnder自动生成的槽函数是：
它就正好是chkBoxUnder的信号clicked（bool）的槽函数。
那么，connectSlotsByName（）就会将此信号和槽函数关联起来，如同执行了下面的这样一条语句：
connect（chkBoxUnder,SIGNAL（clicked（bool））,
this,SLOT（on_chkBoxUnder_clicked（bool））;
这就是用UI设计器可视化设计某个组件的信号响应槽函数，而不用手工去将其关联起来的原因，都是在界面类的构造函数里调用setupUi（）自动完成了关联。
字体颜色设置
设置字体的3个RadioButton是互斥性选择的，即一次只有一个RadioButton被选中，虽然也可以采用可视化设计的方式设计其clicked（）信号的槽函数，但是这样就需要生成3个槽函数。
这里可以简化设计，即设计一个槽函数，将3个RadioButton的clicked（）信号关联到这一个槽函数。
为此，在QWDialog类的privateslots部分增加一个槽函数定义如下：
voidsetTextFontColor（）;
提示将鼠标光标移动到这个函数的函数名上面，单击右键，在弹出的快捷菜单中选择“Refactor”→“AddDefinitioninqwdialog.cpp”，就可以在qwdialog.cpp文件中自动为函数setTextFontColor（）生成一个函数框架。
在qwdialog.cpp文件中，为setTextFontColor（）编写实现代码如下：
setTextFontColor（）
QPaletteplet=ui->
palette（）;
if（ui->
rBtnBlue->
isChecked（））
plet.setColor（QPalette:
Text,Qt:
blue）;
elseif（ui->
rBtnRed->
red）;
rBtnBlack->
black）;
else
setPalette（plet）;
由于这个槽函数是自定义的，所以不会自动与RadioButton的clicked（）事件关联，此时编译后运行程序不会实现改变字体颜色的功能。
需要在QWDialog的构造函数中手工进行关联，代码如下：
connect（ui->
rBtnBlue,SIGNAL（clicked（））,this,SLOT（setTextFontColor（）））;
rBtnRed,SIGNAL（clicked（））,this,SLOT（setTextFontColor（）））;
rBtnBlack,SIGNAL（clicked（））,this,SLOT（setTextFontColor（）））;
在构造函数中将3个RadioButton的clicked（）信号与同一个槽函数setTextFontColor（）相关联。
再编译后运行，就可以更改文字的颜色了。
三个按钮的功能设计
界面上还有“确定”“取消”“退出”3个按钮，这是在对话框中常见的按钮。
“确定”表示确认选择并关闭对话框，“取消”表示取消选择并关闭对话框，“退出”则直接关闭对话框。
QWDialog是从QDialog继承而来的，QDialog提供了accept（）、reject（）、close（）等槽函数来表示这三种状态，只需将按钮的clicked（）信号与相应槽函数关联即可。
下面采用可视化的方式，将按钮的clicked（）信号与这些槽函数关联起来。
在UI设计器里，单击上方工具栏里的“EditSignals/Slots”按钮，窗体进入信号与槽函数编辑状态，如图10所示。
图10窗体进入Signals/Slot编辑状态
将鼠标移动到“确定”按钮上方，再按下鼠标左键，移动到窗体的空白区域释放左键，这时出现如图11所示的关联设置对话框。
图11信号与槽关联编辑对话框
在图11中，左侧的列表框里显示了btnOK的信号，选择clicked（），右边的列表框里显示了QWDialog的槽函数，选择accept（），单击“OK”按钮。
同样的方法可以将btnCancel的clicked（）信号与QWDialog的reject（）槽函数关联，将btnClose的clicked（）信号与QWDialog的close（）槽函数关联。
注意，在图11的右侧列表框中没有close（）槽函数，需要勾选下方的“ShowsignalsandslotsinheritedfromQWidget”才会出现close（）函数。
设置完3个按钮的信号与槽关联之后，在窗体下方的Signals和Slots编辑器里也显示了这3个关联。
实际上，可以直接在Signals和Slots编辑器进行关联设置。
现在编译并运行程序，单击这3个按钮都会关闭程序。
那么，这3个按钮的信号与槽函数的关联是在哪里实现的呢？
答案在setupUi（）函数里，在setupUi（）函数里自动增加了以下3行代码：
QObject:
connect（btnOK,SIGNAL（clicked（））,QWDialog,SLOT（accept（）））;
connect（btnCancel,SIGNAL（clicked（））,QWDialog,SLOT（reject（）））;
connect（btnClose,SIGNAL（clicked（））,QWDialog,SLOT（close（）））;
这个实例程序的功能全部完成了。
采用UI设计器设计了窗体界面，采用可视化和程序化的方式设计槽函数，设计信号与槽函数之间的关联。
升级会员 