带滚动条界面用QT中专业的术语来说就是ScrollArea,这种界面的好处就是假如自己有一张图片大到界面装不下时,就可以利用此界面使用滚轮来查看完整的图像。本文介绍两种新建此类界面的方式:1.控件拖动。2.代码编写。
首先说明一下ScrollArea的特殊之处,如果是在ui界面通过控件新建此界面时,新建它的同时会新建一个QWidget界面。两者的关系为ScrollArea为主界面(带有滚动条),QWidget为实际界面(用来放上文中完整图片的界面)。
如果是选择纯代码编写此类界面的话,在新建完ScrollArea之后,需要新建一个QWidget界面,理由如上。前者为主界面,后者为实际界面。
这些话看着很枯燥而且难以理解,那我们直接进入主题看代码和效果。
一、控件拖动
1.新建工程
基类类型选择QWidget,以前的文章说过,这种类型的基类比QMainWindow要简洁一些,不写大工程时拿来学习很方便。
2.进入ui界面
选择控件ScrollArea,拖一个过来。
拖过来之后我们点击此控件在右侧看一下他的属性,发现其新建出来后包括了一个QWidget界面。
3.修改widget.cpp文件
在构造函数里对其进行设置,主界面原点为(0,0),长宽为300,200.
实际界面原点为(0,0),长宽为700,1200.
设置完参数之后用代码的方式加一个label让结果更加直观。
#include "widget.h"
#include "ui_widget.h"
#include "QLabel"
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
ui->scrollArea->setGeometry(0, 0, 300, 200);//主界面参数
ui->scrollArea->setWidgetResizable(false);//可以拖动滚动条
//竖滚动条和横滚动条都可以一直显示
ui->scrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
ui->scrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
//设置主界面的实际界面
ui->scrollArea->setWidget(ui->scrollAreaWidgetContents);
ui->scrollAreaWidgetContents->setGeometry(0, 0, 700, 1200);//实际界面参数
QLabel *label=new QLabel(ui->scrollAreaWidgetContents);
label->setText("111");
label->move(400,300);
}
Widget::~Widget()
{
delete ui;
}
在ui界面中我们可以看到拖出来的ScrollArea控件其名称为scrollArea,同时生成的QWidget名称为scrollAreaWidgetContents。对带滚动界面的设置分为如下几步:
1.设主界面参数
2.滚动条显示方式和是否可以拖动。
3.设置主界面的实际界面
4.实际界面的参数设置(一般实际界面都比主界面要大,否则滚动条没有实际意义;实际界面原点的意义不大,重要是长宽的设置)
做完这一切后,点击运行按钮,并拖动进度条来寻找我们新建的label。
效果如下:
接下来是纯代码的编写方式
二、代码编写
1.修改widget.cpp
引入相关的头文件 QScrollArea和QScrollBar
在构造函数中加入如下代码(就是在第一段代码下面加如下代码):
其实现过程为:
1.新建一个QScrollArea变量,名称为sa
2.设置sa的位置长宽,进度条显示
3.在sa界面中新建一个QWidget界面w
5.将 w装配到sa中并设置w的位置长宽(sa为主界面,w为实际界面)
6.在w中新建一个label,显示效果
QScrollArea *sa = new QScrollArea(this);
sa->setGeometry(400, 300, 300, 200);
sa->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
sa->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
QWidget *w = new QWidget(sa);
sa->setWidget(w);
w->setGeometry(0, 0, 700, 1200);//主要是设置长宽,xy意义不大
QLabel *label_2=new QLabel(w);
label_2->setText("222");
label_2->move(400,300);
效果图如下:
本章到此结束,下一篇会是QT绘制简单图形的文章。