项目里会生成带.ui的文件,双击就可以进行ui设计。
双击 .ui文件,会弹出UI设计器,其布局大概为:
可以把控件直接拖进来进行布局。
所以在界面设计区的控件都能在这看到。
可以对界面设计区选中的控件进行属性设置。比如在界面设计区加入一个按钮。
另外也可以在界面设计区选择按钮,然后右键 - 转到槽…,去添加自定义槽函数。
然后在窗口的类声明中的自动生成如下槽函数。然后去实现槽函数即可。这种方式就不需要自己去定义槽函数。
所谓 GUI 界面,归根结底,就是一堆控件的叠加。我们创建一个窗口,把按钮放上面,把图标放上面,这样就成了一个界面。在放置时,控件的位置尤其重要。我们必须要指定控件放在哪里,以便窗口能够按照我们需要的方式进行渲染。这就涉及到控件定位的机制。
Qt 提供的布局中以下三种是我们最常用的:
QHBoxLayout:按照水平方向从左到右布局;
QVBoxLayout:按照竖直方向从上到下布局;
QGridLayout:在一个网格中进行布局,类似于 HTML 的 table(网格布局可以任意布局)
#include "mywidget.h"
#include "ui_mywidget.h"
#include <QSpinBox>
#include <QSlider>
#include <QHBoxLayout>
MyWidget::MyWidget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::MyWidget)
{
ui->setupUi(this);
QSpinBox *spinBox = new QSpinBox(this);
QSlider *slider = new QSlider(Qt::Horizontal, this);
connect(slider, &QSlider::valueChanged,
spinBox, &QSpinBox::setValue);
void (QSpinBox:: *spinBoxSignal)(int) = &QSpinBox::valueChanged;
/* 因为valueChanged信号重载了所以用函数指针来区分调用带参的信号 */
connect(spinBox, spinBoxSignal,
slider, &QSlider::setValue);
spinBox->setValue(35); /* 设置spinBox值 */
/* 给控件设置布局 指定布局的父对象(this) 相当把控件放到窗口 */
QHBoxLayout *layout = new QHBoxLayout(this);
layout->addWidget(spinBox);
layout->addWidget(slider);
}
进行水平布局运行如下:
当窗口的大小改变时,窗口布局里的控件也会自动发生变化。
#include "mywidget.h"
#include "ui_mywidget.h"
#include <QLineEdit>
#include <QCompleter>
#include <QStringList>
MyWidget::MyWidget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::MyWidget)
{
ui->setupUi(this);
QLineEdit *edit = new QLineEdit(this);
//设置内容
edit->setText("12345678");
/* 移动行编辑的位置 */
edit->move(200,300);
//设置内容显示间隙
edit->setTextMargins(15, 0, 0, 0);
//设置内容显示方式
//ui->lineEdit->setEchoMode(QLineEdit::Password);
QStringList list;
list << "hello" << "How are you" << "hehe";
QCompleter *com = new QCompleter(list, this);
/* 设置是否区分大小写 */
com->setCaseSensitivity(Qt::CaseInsensitive);
/* 将QCompleter对象设置到QLineEdit中 */
edit->setCompleter(com);
}
按’H’会有提示
在资源里生成image.qrc文件 添加前缀:可以设置前缀 添加文件:可以添加文件
右键—>复制资源路径到剪贴板 。就可以复制选中的资源路径。比如复制如下 //image/LuffyQ.png 根据这路经就可以加载资源。
#include "mywidget.h"
#include "ui_mywidget.h"
#include <QLabel>
#include<QMovie> /* 动画头文件 */
#include <QDesktopServices>
MyWidget::MyWidget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::MyWidget)
{
ui->setupUi(this);
/* 1. 设置文本 */
QLabel *lable_1 = new QLabel(this);
lable_1->move(200,100);
lable_1->setText("标签");
/* 2. 设置图片 */
QLabel *lable_2 = new QLabel(this);
lable_2->move(200,200);
lable_2->setPixmap(QPixmap("://image/LuffyQ.png"));
/* 让图片自适应标签的大小 */
lable_2->setScaledContents(true);
/* 3. 设置动画 */
QLabel *lable_3 = new QLabel(this);
lable_3->move(400,200);
/* 创建动画 */
QMovie *movie = new QMovie("://image/mario.gif"); /* 资源要是动态的图片 */
/* movie指定父对象 */
movie->setParent(this);
/* 标签里设置动画 */
lable_3->setMovie(movie);
/* 启动动画 */
movie->start();
/* 让动画自适应标签的大小 */
lable_3->setScaledContents(true);
/* 4. 显示HTML链接 */
QLabel *lable_4 = new QLabel(this);
lable_4->move(500,400);
lable_4 ->setText("<h1><a href=\"https://www.baidu.com\">百度一下</a></h1>");
/* 设置打开外部链接方法1 */
lable_4 ->setOpenExternalLinks(true);
/* 设置打开外部链接方法2 */
//connect(lable_4, &QLabel::linkActivated, this, &MyWidget::slotOpenUrl);
}
MyWidget::~MyWidget()
{
delete ui;
}
void MyWidget::slotOpenUrl(const QString &link)
{
QDesktopServices::openUrl(QUrl(link.toLocal8Bit()));
}
原则:先局部在整体布局。
总结:布局需要多练习。对象属性里熟悉合理设置。
不是在已有的控件拖到界面设计区。
怎么添加类文件:
生成Smallwidget.h Smallwidget.cpp
在Smallwidget.cpp里添加如下代码
#include "smallwidget.h"
#include <QSpinBox>
#include <QSlider>
#include <QHBoxLayout>
Smallwidget::Smallwidget(QWidget *parent)
: QWidget{parent}
{
QSpinBox *spin = new QSpinBox(this);
QSlider *slider = new QSlider(Qt::Horizontal, this);
//把控件添加到布局中
QHBoxLayout *hLayout = new QHBoxLayout(this);
hLayout->addWidget(spin);
hLayout->addWidget(slider);
connect(spin, static_cast<void (QSpinBox::*)(int)>(&QSpinBox::valueChanged),
slider, &QSlider::setValue);
connect(slider, &QSlider::valueChanged, spin, &QSpinBox::setValue);
}
在界面设计区添加空容器。
最终运行如下:
提升的Smallwidget类在容器里显示出来。
Qt样式表是一个可以自定义部件外观的十分强大的机制﹐控件的都可以使用Qt样式表来美化。Qt样式表的概念,术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CSS)的启发,不过与CSS不同的是,Qt样式表应用于部件。
样式表可以使用QApplication: : setStyleSheet()函数将其设置到整个应用程序上,也可以使用QWidget::setStyleSheet()函数将其设置到一个指定的部件(还有它的子部件)上。如果在不同的级别都设置了样式表,那么Qt会使用所有有效的样式表,这被称为样式表的层叠。
#include "mywidget.h"
#include "ui_mywidget.h"
#include <QLabel>
#include <QPushButton>
MyWidget::MyWidget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::MyWidget)
{
ui->setupUi(this);
QLabel *pLable = new QLabel(this);
QLabel *pLable1 = new QLabel(this);
QPushButton *button = new QPushButton(this);
pLable->move(100,100);
pLable->resize(200,200);
pLable1->resize(100,100);
button->move(300,300);
button->resize(300,300);
this->setStyleSheet("QLabel{color:rgb(0, 255, 255);"
"background-color:red;"
"}"); /* 设置整个窗口的标签 */
pLable->setStyleSheet("QLabel{color:rgb(0, 255, 255);"
"background-color:blue;"
"border-image:url(://image/down.png);"
"}");
button->setStyleSheet("QPushButton{"
"border-image:url(:/image/Sunny.jpg);" /* 填充边框的图像 */
"}"
"QPushButton:hover{"
"border-image:url(:/image/up.png);" /* 鼠标悬空在按钮的图像 */
"}"
"QPushButton:pressed{"
"border-image:url(:/image/Luffy.png);" /* 按钮按下图像 */
"}"
);
}
主要介绍QT的UI界面及控件的简单使用与布局。及自定义控件。控件的渲染样式表的简单介绍。