今天来学一学 QFrame 类。

QFrame 类族

QFrame 类是带有边框的部件的基类。它的子类包括常用的标签部件 QLabel、以及 QLCDNumber、QSplitter、QStackedWidget、QToolBox、QAbstractScrollArea 等。其中 QAbstractScrollArea 类是所有带有滚动区域的部件类的抽象基类。在QT 中凡是带有 Abstract 的类都是抽象基类。抽象基类不能直接使用，但是可以继承该类，来实现自己的类，或使用它提供的子类。QAbstractScrollArea 的子类中包含常用的文本编辑器 QTextEdit 类和各种项目视图类。

带边框部件主要特点就是有个一明显的边框。QFrame 类的一项主要功能就是实现不同边框效果，主要由边框形状和边框阴影组合来形成。 QFrame 类中定义的主要边框形状和阴影如图所示


这里说两个参数，lineWidth 是边框边界的线的宽度，midLineWidth 是在边框中额外插入的一条线的宽度，这条线的作用是为了形成3D效果，并且只在 Box、HLine、VLine 表现为凸起或凹陷时有用。

新建 Qt Widget 应用，命名 myframe，选择 QWidgets 为基类，类名 MyWidget。完成后打开 mywidget.ui 文件，在设计模式从部件列表里拖入一个 Frame 到界面上，然后在右下方的属性编辑器中更改其 frameShape 为 Box，frameShadow 为 Sunken，lineWidth 为 5，midLineWidth 为 10。这些设置你也可以在 mywidget.cpp 文件中的 MyWidget 构造函数里使用如下代码来设置。

ui -> frame -> setFrameShape(QFrame::Box);
ui -> frame -> setFrameShadow(QFrame::Sunken);
ui -> frame -> setLineWidth(5);
ui -> frame -> setMidLineWidth(10);

QFrame 的子类都继承了 QFrame 的边框设置功能。
在Qt标准部件中，能在设计模式中属性栏中设置的参数，其类中一定有对应的函数，可以用代码实现。

QLabel 标签部件

QLabel 是标签部件，用来显示文本或者图片。
拖入一个 Label，属性编辑器中设置宽为 170，高为 30。修改 font 属性中的字体设置。
font 设置对应的代码为

QFont font;
font.setFamily("华文行楷");
font.setPointSize(10);
font.setBold(true);				//加粗
font.setItalic(true);			//斜体
ui -> label -> setFont(font);

QLabel 中的 wordWarp 属性可以实现文本的自动换行。如果不想自动换行，而是在后面自动省略，那么可以使用 QFontMetrics 类，该类用来计算给定字体的字符或字符串的大小，其中包含了多个使用函数。要使用 QFontMetrics，则可以通过创建对象的方式，或通过 QWidget::fontMetrics() 来返回当前部件字体的 QFontMetrics 对象。下面继续在构造函数中添加代码：

QString string = tr("标题太长，需要省略！");
//elidedText() 文本省略，参数一:指定要省略的文本，参数二:省略方式，参数三:文本长度
QString str = ui -> label -> 
fontMetrics().elidedText(string,Qt::ElideRight,150);
ui -> label -> setText(str);

QLabel 属性栏中的 scaledContents 属性可以用于缩放标签中的内容，比如在标签中放一张较大的图片，可以选中该属性来显示整个图片。
如果在标签中使用图片。先在 mywidget.cpp 中添加头文件 QPixmap头文件和构造函数中添加代码：
如果在标签中显示GIF动态图，添加 QMoive头文件和构造函数中添加代码。

//显示图片
ui -> label -> setPixmap(QPixmap("../logo.png"));
//显示GIF动态图
QMovie *movie = new QMovie("../donghua.gif");
ui -> label -> setMovie(movie);
ui -> label -> resize(550,150);
movie -> start();

按钮部件

QAbstractButton 类是按钮部件的抽象基类，提供了按钮的通用功能。他的子类包括复选框 QCheckBox、标准按钮 QPushButton、单选按钮 QRadioButton、工具按钮 QToolButton。
演示一个 QPushButton 的用法，其他部件用法相似。
新建 Qt Widgets 项目，命名 mybutton，基类选择 QWidget，类名设为 MyWidget。完成后在项目中新建 images 文件夹，里面放几张图片。

QPushButton 提供一个标准按钮。在项目中打开 mywidget.ui 文件，拖入三个 Push Button 到界面上，然后在属性编辑器中将它们的 objectName 依次更改为 pushBtn1、pushBtn2、pushBtn3.然后选中 pushBtn1的 checkable 属性，使它拥有“选中”和“未选中”两种状态。再选中 pushBtn2 的 flat 属性，可以不显示该按钮的边框。

按钮最常见的应用就是通过单击或双击来实现一些功能，在Qt中，这种应用是通过信号和槽的机制来实现的。一个例子演示一下信号和槽关联的一种方法。

右击 pushBtn1 按钮，选择“转到槽”，在弹出的“转到槽 - Qt Creator”对话框中选择 toggled(bool)信号

选择 toggled 后会自动切换到编辑模式并添加该信号对应的槽函数 On_pushBtn1_toggled(boolchecked），添加一些代码：

void Widget::on_pushBtn1_toggled(bool checked)
{
    qDebug() << tr("按钮是否按下：") << checked;
}

当 pushBtn1 处于按下状态时，checked 为 true，否则为 false。==使用 qDebug() 可以在 “应用程序输出” 窗口输出信息。==你可以运行一下看看。

在 MyWidget 类的构造函数中添加代码，看一下如何使用代码进行设置。需要在头文件中添加 QMenu 库文件。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //为三个按钮添加了文本显示
    //这里的 & 字符，如果你想让一个按键成为快捷键，就可以在这个按键前加上 &
    //举个例子，设置 H 键为快捷键，就在 setText 中写上 &H，不区分大小写
    //如果要显示 & 字符，就用 &&
    ui->pushBtn1->setText(tr("&nihao"));    //快捷键是 n
    ui->pushBtn2->setText(tr("帮助(&H)"));    //快捷键是 H

    //setIcon() 添加图标函数，根据路径创建一个 QIcon 对象来设置成图标
    //Qt的路径是以 exe 文件所在路径为根目录的，需要知道。
    ui->pushBtn2->setIcon(QIcon("../../images/robot0.png"));
    ui->pushBtn3->setText(tr("z&oom"));     //快捷键是 z

    //QMenu 下拉菜单部件
    QMenu *menu = new QMenu(this);
    menu->addAction(QIcon("../../images/robot1.png"),tr("放大"));
    ui->pushBtn3->setMenu(menu);
}

QLineEdit 行编辑器部件

QLineEdit 是一个单行的文本编辑器，允许用户输入和编辑单行的纯文本内容，而且提供了一些列有用的功能，包括撤销与恢复、剪切、复制、拖放等功能。其中，剪切、复制等是行编辑器自带的，不用编码即可实现。关于该部件，读者还可以查看 Qt 的示例程序 Line Edits。

新建一个 Qt Widgets 项目，命名 mylineedit，基类选择 QWidget，类名设为 MyWidget。在 ui 界面中拖入四个 label 和 Line Edit，将各个 Line Edit 依次更改其 objectName 为 lineEdit1、lineEdit2、lineEdit3、lineEdit4.

• 显示模式
  QLineEdit 有 4 种显示模式（echo Model），可以在 echoMode 属性中更改它们。四种模式分别是：Normal，正常显示输入的信息；NoEcho，不显示任何输入，可以不泄露字符位数；Password，显示为密码样式（…或***）；PasswordEchoOnEdit，编辑时显示正常字符，其他情况下显示为密码样式。

  我们现在将 lineEdit1 设置成 Password 模式。

• 输入掩码
  QLineEdit 提供了输入掩码（InputMask）来限制输入的内容。可以使用一些特殊的字符来设置输入的格式和内容。（类似正则表达式）这些字符中，有的起限制作用且必须要输入一个字符，有的只起限制作用可以不输入字符或空格代替,看一下这些特殊字符的含义。
  
  我们将 lineEdit2 设置为 >AA-90-bb-!aa#H;* 解释一下含义。
  含义：>”号表明后面输入的字母自动转为大写；​“AA”表明开始必须输入两个字母，因为有前面的“>”号的作用，所以输入的这两个字母会自动变为大写；​“-”号为分隔符，直接显示，该位不可输入；​“9”表示必须输入一个数字；​“0”表示输入一个数字，或者留空；​“bb”表示这两位可以留空，或者输入两个二进制字符，即0或1；​“！”表明停止大小写转换，就是在最开始的“>”号不再起作用；​“aa”表示可以留空，或者输入两个字母；​“#”表示将“#”号作为分隔符，因为“#”号在这里有特殊含义，所以前面要加上“\”号；​“H”表明必须输入一个十六进制的字符；​“;”表示用“”号来填充空格。另外，也可以使用setInputMask()函数在代码中设置输入掩码。

  右击 lineEdit2 选择转到槽中的 returnPressed() ，然后改代码。

void Widget::on_lineEdit2_returnPressed()
{
    //让 lineEdit2 获得焦点
    ui->lineEdit2->setFocus();
    //输出 lineEdit2 的内容
    qDebug() << ui->lineEdit2->text();
    //输出 lineEdit2 的显示内容
    qDebug() << ui->lineEdit2->displayText();
}

这里先让下一个行编辑器获得焦点，然后输出lineEdit2的内容和显示出来的内容，它们有时是不一样的，编程时更多的是使用text()函数来获取它的内容。这时运行程序在lineEdit2中进行输入，完成后按下回车键，可以查看一下输出的内容。注意，如果没有输入完那些必须要输入的字符，按下回车键是不起作用的。

• 输入验证
  在 QLineEdit 中还可以使用验证器来对输入进行约束。在 mywidget.cpp 文件的构造函数中添加代码。

// 新建验证器，指定范围为100~999
QValidator *validator = new QIntValidator(100, 999, this);
// 在行编辑器中使用验证器
ui->lineEdit3->setValidator(validator);

//若要使用正则表达式,需要添加 QRegularExpressionVilidator 库文件
QRegularExpression rx("-?\\d{1,3}");
QValidator *validator = new QRegularExpressionValidator(rx,this);

在代码中为lineEdit3添加了验证器，那么它现在只能输入数字100～999。可以再进入lineEdit3的回车键按下信号的槽，输出lineEdit3的内容。然后运行程序会发现，其他的字符无法输入，而输入小于100的数字时，按下回车键也是没有效果的。

• 自动补全
  QLineEdit 提供了自动补全功能，利用 QCompleter 类实现。
  在 MyWidget 类构造函数添加代码：
  需添加 QCompleter 头文件

QStringList wordList;
wordList << "Qt" << "Qt Creator" << tr("你好");
// 新建自动完成器
QCompleter *completer = new QCompleter(wordList, this);  
// 设置大小写不敏感
completer->setCaseSensitivity(Qt::CaseInsensitive);      
ui->lineEdit4->setCompleter(completer);

运行程序，在最后一个行编辑器中输入“Q”​，就会自动出现“Qt”和“QtCreator”两个选项。

QAbstractSpinBox

QAbstractSpinBox 类时一个抽象基类，提供了一个数值设定框和一个行编辑器来显示设定值。它有三个子类，QDateTimeEdit、QSpinBox、QDoubleSpinBox，分别用来完成日期时间、整数和浮点数的设定。

创建一个Qt Widget 项目，命名myspinbox，基类为 QWidget，类名MyWidget

QDateTimeEdit类提供了一个可以编辑日期和时间的部件。进入设计模式，从部件列表窗口中分别拖入Time Edit、Date Edit和Date/Time Edit到界面上，然后在属性编辑器中，设置timeEdit的displayFormat为“h:mm:ssA”​，这样可以使用12小时制来进行显示。对于dateEdit，选中它的calendarPopup属性，这样就可以使用弹出的日历部件来设置日期。然后在MyWidget类的构造函数中添加代码：

// 设置时间为现在的系统时间
ui->dateTimeEdit->setDateTime(QDateTime::currentDateTime());
// 设置时间的显示格式
//y表示年；M表示月；d表示日；ddd表示星期；H表示小时，使用24小时制显示，
//而h也表示小时，如果最后有AM或者PM的，则是12小时制显示，
//否则使用24小时制；m表示分；s表示秒；还有一个z可以用来表示毫秒。
ui->dateTimeEdit->setDisplayFormat(tr("yyyy年MM月dd日ddd HH时mm分ss秒"));

现在可以运行程序查看效果。另外，可以使用该部件的text()函数获取设置的值，它返回QString类型的字符串；也可以使用 dateTime() 函数，它返回的是 QDateTime 类型数据。

QAbstractSlider

QAbstractSlider类用于提供区间内的一个整数值，它有一个滑块，可以定位到一个整数区间的任意值。该类是一个抽象基类，它有3个子类QScrollBar、QSlider和QDial.

其中滚动条 QScrollBar 一般是用在 QScrollArea 类中实现滚动区域；QSlider就是常见的音量控制或多媒体播放进度等滑块部件；QDial是一个刻度表盘部件。这些部件的使用可以参考Sliders示例程序。

新建Qt Widget 项目，命名myslider，基类选 QWidget，类名 MyWidget。
从部件栏拖拽 Dial、Horizontal Scroll Bar、Vetrical Scroll Bar、Horizontal Slider、Vertical Slider 等部件到界面。
在属性编辑器编辑查看各个部件的属性。

先看 Scroll Bar 的属性：
maximum 设置最大值；minimum：设置最小值；
singleStep：每步的步长，默认：1；pageStep：每页的步长，默认：10；
value 和 sliderPosition：当前值；
tracking：设置是否跟踪，默认：是，拖动滑块时，每移动一个刻度，都会发射valueChanged()信号；
orientation：设置部件方向，有水平和垂直可选；
invertedAppearance：滑块位置，默认最左边；
inertedControls：反向控制；
为了使部件可以获得焦点，读者需要将focusPolicy设置为StrongFocus。

再来看两个Slider，它们有了自己的两个属性：
tickPosition 和 tickInterval，前者用来设置显示刻度的位置，默认是不显示刻度；后者是设置刻度的间隔。

Dial 有自己的属性 wrapping，用来设置是否首尾相连，默认开始与结束是分开的；
属性 notchTarget 用来设置刻度之间的间隔；
属性 notchesVisible 用来设置是否显示刻度。

在 ui 上拖入一个 Spin Box，按下 F4 或点击图标进入信号和槽编辑模式，将刻度表盘部件 dial 的 slideMoved(int) 信号分别与其他各个部件的 setValue(int)槽连接。

设置完成后运行程序，然后使用鼠标拖动刻度盘部件的滑块，可以看到其他所有的部件都跟着变化了。