Qt—常用窗口部件
QFrame类族
QFrame基本属性概述
QFrame类是带有边框的部件的基类。它的子类有我们最为常用的标签部件QLabel,另外还有QLCDNumber、QSplitter、 QStackedWidget、QToo1Box和QAbstractScrollArea类。
QAbstractScrollArea类是所有带有滚动区域的部件类的抽象基类。
QAbstractScrollArea的子类中有最常用的QTextEdit类和各种项目视图类
QT中凡是带有Abstract字样的类基本都是抽象基类。
抽象基类是不能直接使用的,但是可以继承该类实现自己的类,或者使用它提供的子类
带边框部件最主要的特点就是可以有一个明显的边界框架。QFrame类的主要功能也就是用来实现不同的边框效果,这主要是由边框形状(Shape)和边框阴影(Shadow) 组合来形成的。
这里需要说明的二个名词: lineWidth 和 midLineWidth
lineWidth 是边框边界线的宽度;
midLineWidth是边框额外插入的一条线的宽度;为了形成3D效果;
而且只有在BOX 、Hline和 VLine 表现为凸起或者凹陷时候有用。
QFrame类族的所有边框效果如下图所示
下面在程序中演示一下:
新建QT WIdget项目,名字为myframe,基类为QWidget,类名为MyWidget。
完成后打开ui界面,拖入一个Frame到界面上。
然后在右下方的属性栏更改其frameShape为Box,frameShadow为Sunken,lineWidth为5,midLineWidth为10.
其实直接在mywidget.cpp中的MyWidget构造函数中也可以实现
MyWidget::MyWidget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::MyWidget)
{
ui->setupUi(this);
ui->frame->setFrameShape(QFrame::Box);
ui->frame->setFrameShadow(QFrame::Sunken);
// 以上两个函数可以使用setFrameStyle(QFrame::Box | QFrame::Sunken)代替
ui->frame->setLineWidth(5);
ui->frame->setMidLineWidth(10);
}
其余属性可以直接查找QFrame的手册
对于QFrame的子类,它们都继承QFrame的边框设置功能,所以下面对它的子类的介绍中就不再涉及这方面的内容了,而是讲解各个子类的独有特性;
1. QLabel
标签QLabel用来显示显示文本或者图片。
在设计器中向界面拖入一个Label,然后将其放大,在属性中设置对齐方式alignment的属性,水平的改为AlignHCenter,垂直的改为AlignVCenter,这样QLabel中的文本就会在正中间显示。
font属性可以对字体进行设置,也可以通过代码进行设置,下面打开mywidget.cpp文件,在构造函数中
QFont font;
font.setFamily("华文行楷");
font.setPointSize(20);
font.setBold(true);
font.setItalic(true);
ui->label->setFont(font);
QFont font ,font使用华文行楷,大小20,加粗,斜体
通过QLabel的setFont函数使用
自动换行
QLabel属性栏中的wordWrap属性可以实现文本的自动换行。
如果不想自动换行,而是在后面自动省略,那么可以使用QFontMetrics类,该类用来计算给定字体的字符或字符串大小。要使用QFontMetrics类,则可以通过创建对象的方式,或者通过**QWidget::fontMetrics()**来返回当前部件字体的QFontMetrics对象
QString string = tr("标题太长,需要进行省略!");
QString str = ui->label->fontMetrics().elidedText(string, Qt::ElideRight, 180);
ui->label->setText(str);
elidedText()函数是用来进行文本省略的,elidedText(string, Qt::ElideRight, 180);
elidedText(1要省略的文本,2省略模式(…出现位置),3文本长度);
指定的文本超过这个长度就会进行省略
///
缩放
QLabel属性栏中的scaledContents属性可以实现缩放标签中的内容,比如在标签中放一张较大的图片,则可以选中该属性来显示整个图片。
//图片
下面在标签中使用图片
添加头文件
#include < QPixmap>
然后在构造函数里面添加一行代码
ui->label->setPixmap(QPixmap("C:/QtCode/wailaidaima/myframe/logo.png"));
//自己图片路径修改
也可以使用相对路径,把图片放在项目文件的bulid debug中。直接写logo.png就行了
其实,最好的方法是使用资源管理器,放在程序里面
QT–使用QT资料文件管理
ui->label->setPixmap(QPixmap(":/image/logo.png"));
这样也行
也可以添加gif动态图片
添加头文件#include <QMovie>
QMovie *movie = new QMovie(":/image/donghua.gif");
ui->label->setMovie(movie); // 在标签中添加动画
movie->start();
会遮盖以前的图片,用的一个label
2. QLCDNumber
说明可以显示很多,可以显示0-9 还可以数字 冒号,度符号,负号,小数点等
详细看帮助:
效果:
3. QStackedWidget
QStackedWidget类提供了一个部件栈,可以有多个界面(称为页面),每个界面可以拥有自己的部件,不过每次只能显示一个界面。这个部件需要使用QComboBox
或者QListWidget
来选择它的各个页面。
在设计模式中向界面上拖入一个List Widget
和一个stackedWidget
。在ListWidget
上右击,在弹出的级联菜单中选择“编辑项目”项,然后在“编辑列表窗口部件”对话框中按下左下角的加号添加两项,并更该名称为“第一页”和“第二页”。然后在Stacked Widget.上拖入一个Label,更改文本为“第一页”,再单击Stacked Widget右上角的小箭头进人下一页,再拖入一个标签,更改文本为“第二页”。然后再将Stacked Widget部件的frameShape属性更改为StyledPanel。
最后,在信号和槽设计模式将listWidget部件的currentRowChanged()信 号和stackedWidget的setCurrentIndex()槽关联。设置完成后运行程序可以看到,现在可以单击listWidget中的项目来选择stackedWidget的页面了。
可以在设计模式中在stackedWidget上右击来为它添加新的页面
最后关联他俩
进入信号与槽设计模式
效果:
4. QToolBox
复选框
按钮部件
QAbstractButton类是标准部件的抽象基类,提供了按钮的通用功能。
它的子类包括复选框QcheckBox
、标准按钮QPushButton
、单选框QRadioButton
和工具按钮QToolButton。
新建widget项目,在项目文件夹里面放几张图片
1 QPushButton
QPushButton提供一个标准按钮。
在项目中打开mywidget. ui文件,拖入3个PushButton到界面上,然后将它们的objectName依次更改为pushBtn1、pushBtn2和pushBtn3。
下面选中pushBtn1的checkable属性,使得它可以拥有“选中”和“未选中”两种状态;
再选中pushBtn2的flat属性,可以不显示该按钮的边框。
然后转到push-Btn1的toggled(bool)信号的槽,更改如下:
void MyWidget::on_pushBtn1_toggled(bool checked) //判断按钮是否处于被按下状态
{
qDebug()<<tr("按钮是否被按下;")<<checked;
}
看帮助文档
运行:
然后在构造函数中添加代码:
ui->pushBtn1->setText(tr("&nihao")); // 这样便指定了Alt+N为加速键
ui->pushBtn2->setText(tr("帮助(&H)"));
ui->pushBtn2->setIcon(QIcon("../mybutton/images/help.png"));
ui->pushBtn3->setText(tr("z&oom"));
QMenu *menu = new QMenu(this);
menu->addAction(QIcon("../mybutton/images/zoom-in.png"), tr("放大"));
ui->pushBtn3->setMenu(menu);
注:这里的& 表示设置加速键,在字母前面加上&符号,就可以将这个按钮的加速键设置为Alt+这个字母。
如果要在文本中显示& 就这样:& & ,第二个&就显示出来了
用setIcon加图标,也可以设计模式
这里的按钮3,为其添加了menu下拉菜单,现在这个菜单什么也没实现
2. QCheckBox、QRadioButton和QGroupBox
对于调查表之类的应用,往往提供多个选项供选择,有些是可以选择多项的,有些只能选择其中一项。复选框QCheckBox
类提供了同时选择多项的功能,而QRadioButton
提供了只能选择一项的功能,一般要把一组按钮放到一个QGroupBox
中来管理。
在设计模式时可往界面上拖人两个Group Box,将它们的标题分别改为“复选框”和“单选框”。
然后往复选框中拖人3个Check Box,分别更改显示内容为“跑步”、“踢球”和“游泳”。再往单选框中拖入3个Radio Button,分别更改其显示内容为“很好”、“一般”和“不好”。
这里还可以选中CheckBox的tristate属性,让它拥有不改变状态、选中状态和未选中状态3种状态。
对于选择按钮后的操作,可以关联它们的state-Changed()信号和自定义的槽
表示checkBox—》statechange,如果状态改变。那就是checkBox—》click()按下
也可以使用isChecked()函数查看一个按钮是否被选中
QGroupBox *testGroupBox = new QGroupBox(QObject::tr("测试"));
QCheckBox* testCheckBox = new QCheckBox(QObject::tr("checkbox test"));
QVBoxLayout *layout=new QVBoxLayout;
layout->addWidget(testCheckBox);
testGroupBox->setLayout(layout);
testGroupBox->isCheckable(); //是否按下 bool型 返回true 或者 fault 也可以用setCheckable
testGroupBox->show();
除了GroupBox,还可以使用QButtonGroup类来管理多个按钮。
QButtonGroup 类:https://doc.qt.io/qt-5/qbuttongroup.html
官方文档
好处是能够统一一组的属性,修改多个窗口的内容
例子:
原项目文件:https://wwa.lanzouo.com/iUxf5xj5nmh
效果:
3. QLineEdit
行编辑器QLineEdit部件
是一个单行的文本编辑器,它允许用户输入和编辑单行的纯文本内容,而且提供了一系列有用的功能,包括撤销与恢复、剪切和拖放等操作。其中,剪切复制等功能是行编辑自带的,不用自己编码实现,拖放功能会在后面讲到
新建一个widget项目,项目名称:mylineedit,类名MyWidget。
在ui界面上拖入几个标签和Line Edit,如图:
改变4个Line Edit的objectname为lineEdit1,2,3,4
1.显示模式
行编辑器QLineEdit
有4种显示模式(echoMode),可以在echoMode属性中更改它们,分别是:Normal正常显示输入的信息
;NoEcho不显示任何输人
,这样可以保证不泄露输入的字符位数;
Password显示为密码样式,就是以小黑点或星号之类的字符代替输人的字符:
PasswordEchoOnEdit在编辑时显示正常字符,其他情况下显示为密码样式。
这里设置lineEdit1的echoMode为Password
2.输入掩码
QLineEdit提供输入掩码(inputMaskx)
来限制输入的内容。
可以使用一些特殊的字符来设置输入的格式和内容,这些字符中有的起限制作用且必须要输入一个字符,有的只是起限制作用,但可以不输人字符而是以空格代替。
先来看一下这些特殊字符的含义,如表3-3所列。
下面将lineEdit2的inputMask属性设置为> AA-90-bb-! aa\# H; *
其含义为:>
号表明后面输人的字母自动转为大写;“AA"
表明开始必须输入两个字母,因为有前面的“>”
号的作用,所以输人的这两个字母会自动变为大写;“-”
号为分隔符,直接显示,该位不可输入;“9”
表示必须输入一个数字;“0”
表示输入一个数字,或者留空;“bb”
表示这两位可以留空,或者输人两个二进制字符,即0或1;“!"
表明停止大小写转换,就是在最开始的“>”
号不再起作用;“aa”
表示可以留空,或者输入两个字母;“\ #”
表示将“#”
号作为分隔符,因为“#”
号在这里有特殊含义,所以前面要加上“\”
号;“H"
表明必须输入一个十六进制的字符;“; *”
表示用“*”
号来填充空格。
另外,也可以使用setInputMask()函数在代码中来设置输入掩码
转到lineEdit2的 returnPressed()槽中,更改如下:
void MyWidget::on_lineEdit2_returnPressed()
{
ui->lineEdit3->setFocus(); //让lineEdit3获得焦点
qDebug()<<ui->lineEdit2->text();//输出lineEdit2的内容
qDebug()<<ui->lineEdit2->displayText();//输出lineEdit2显示的内容
}
这里是按下回车显示输入的内容,即显示lineEdit2的内容
3. 输入验证
使用验证器validator来对输入进行约束。在mywidget.cpp文件的构造函数中添加代码:
#include < QIntValidator>头文件
//新建验证器,指定范围为100~999
QValidator *validator=new QInValidator(100,999,this);
//在行编辑器中使用验证器
ui->lineEdit3->setValidator(validator);
设置最小值范围
在到lineEdit3的returnpress槽
void MyWidget::on_lineEdit3_returnPressed()
{
ui->lineEdit4->setFocus(); //让lineEdit4获得焦点
qDebug()<<ui->lineEdit3->text();//输出lineEdit3的内容
qDebug()<<ui->lineEdit3->displayText();//输出lineEdit3显示的内容
}
然后输入小于100或者大于999的数字时候,按下回车键是不会出现的
按下1不显示
还提供了浮点数
更详细的见:
Qt中验证器的使用
QdoubleValidator, QIntValidator, QRegExpValidator类
如果想要设置更强大的字符约束,就要使用正则表达式了
这里QRegExpValidator类:提供了对满足正则表达的字符串的范围检查
举个简单的例子:
//正则表达式
QRegExp rx("-?\\d{1,3}"); //输入-号 或者不输入,输入1-3个数字限制
QValidator *validator1 = new QRegExpValidator(rx, this);
4.自动补全
用QComplete类
完成
在构造函数中添加
QStringList wordList;
wordList << "Qt" << "Qt Creator" << tr("你好");
QCompleter *completer = new QCompleter(wordList, this); // 新建自动完成器
completer->setCaseSensitivity(Qt::CaseInsensitive); // 设置大小写不敏感
ui->lineEdit4->setCompleter(completer);
要添加>#include < QCompleter>头文件
运行
4. QAbstractSpinBox
QAbstractSpinBox类是一个抽象基类,提供了一个数值设定框和一个行编辑器来显示设定值。
它有3个子类QDateTimcEdit
、QSpinBox
和QDoubleSpinBox
,分别用来完成日期时间、整数和浮点数的设定。
新建一个widget项目,项目名称myspinbox,类名MyWidget
1.QDateTimeEdit
提供了一个可以编辑日期和时间的部件。到设计模式ui,拖入Time Edit、Date Edit和Date/Time Edit到界面上:
然后设置timeEdit的displayFormat为"h:mm:ssA"
,这就可以使用12h制来进行显示,
对于dateEdit,选中它的calendarPopup属性,就可以使用弹出的日历部件来设置日期,
然后在构造函数中添加
//设置时间为现在的系统时间
ui->dateTimeEdit->setDateTime(QDateTime::currentDateTime());
//设置时间的显示格式
ui->dateTimeEdit->setDisplayFormat(tr("yyyy年MM月dd日dddHH时mm分ss秒"));
这里使用代码设置了dateTimeEdit中的日期和时间。
简单说明一下:
y表示年;M表示月:d表示日:而ddd表示星期:H表示小时,使用24h制显示,而h也表示小时,如果最后有AM或者PM的,则是12h制显示,否则使用24h制:m表示分;s表示秒;还有一个z可以用来表示毫秒。
更多的格式可以参考QDateTime类。现在运行程序查看效果。还要说明,可以使用该部件的text()函数获取设置的值,它返回QString类型的字符串:也可以使用dateTime()函数,它返回的是QDateTime类型数据
//设置时间为现在的系统时间
ui->dateTimeEdit->setDateTime(QDateTime::currentDateTime());
//设置时间的显示格式
ui->dateTimeEdit->setDisplayFormat(tr("yyyy年MM月dd日dddHH时mm分ss秒"));
2. QSpinBox和QDoubleSpinBox
QSpinBox用来设置整数,QDoubleSpinBox 用来设置浮点数。
从ui拖入
设置spinBox的属性:后缀属性suffix属性,设置为"%",这样就可以显示百分数了。
然后前缀属性prefix,比如表示金钱时前面有"¥"字符
最小值minimum属性,设置其最小值;最大值maximum属性设置其最大值;
单步值singleStep属性值设置每次增加的数值,默认为1
value为现在的数值
doubleSpinBox又增加了一个小数位数decimals属性,用来设置小数的位数
其他的可以自行摸索
可以在代码中使用value()函数来获取设置的数值
//函数输出结果
qDebug()<<ui->doubleSpinBox->value();
qDebug()<<ui->spinBox->value();
QAbstractSlider
QAbstractSlider类用于提供区间内的一个整数值,它有一个滑块,可以定位到一个整数区间的任意值。
该类是一个抽象基类,它有3个子类QScrollBar
、Qslider
和QDial
。
其中,滚动条QScrollBar多数是用在QScrllArea类中来实现滚动区域;
QSlider就是常见的音量控制或多媒体播放进度等滑块部件
QDial是一个刻度表盘部件。
新建一个widget项目,跟以前一样,类名MyWidget
拖入:
先看二个Scroll Bar的属性:maximum属性是用来设置最大值,minimum属性用来设置最小值;
singleStep属性是每步的步长,默认为1;按下方向键后其数值增加或减少1
pageStep是每页的步长,默认为10;就是按下PageUP/Down数值±10
value与sliderPosition 是当前值;
tracking设置是否跟踪,默认为是,就是在拖动滑块时,每移动一个刻度,都会发射valueChanged()信号,如果选择否,则只有拖动滑块释放时才发射该信号;
orientation设置部件的方向,有水平和垂直两种选择;
invertedAppearance属性设置滑块所在的位置,比如默认滑块开始在最左端,选中这个属性后,滑块默认就会在最右端。
invertedControls设置反向控制,比如默认是向上方向键是增大,向下方向键是减小,如果选中这个属性,那么控制就会正好反过来。
另外,为了使部件可以获得焦点,需要将focusPolicy设置为StrongFocus。
再来看两个Slider,它们有了自己的两个属性tickPosition 和tickInterval, 前者用来设置显示刻度的位置,默认是不显示刻度;后者是设置刻度的间隔。
向上above,间隔2
而Dial有自己的属性wrapping,用来设置是否首尾相连,默认开始与结束是分开的;
属性notchTarget用来设置刻度之间的间隔;
属性notchesVisible用来设置是否显示刻度。
完成,当然也可以在main中创建类与对象,用代码显示,在调用函数
#include "mywidget.h"
#include <QSlider>
#include <QDial>
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MyWidget w;
//加一个dial
QDial dial(&w);
//初始化dial
dial.setValue(100);
w.show();
return a.exec();
}