资源文件、布局管理器、样式表拓展

QT 资源文件

提供了和本地路径无关的资源管理。
图片资源的获取：阿里巴巴矢量图库（👈 安全链接，放心跳转）

widget.ui

在这里插入图片描述

.qrc

在这里插入图片描述

widget.h

#ifndef WIDGET_H
#define WIDGET_H#include <QtWidgets>namespace Ui {
class Widget;
}class Widget : public QWidget
{Q_OBJECTpublic:explicit Widget(QWidget *parent = 0);~Widget();private slots:void on_addBtn_clicked();void on_subBtn_clicked();private:Ui::Widget *ui;int prog;
};#endif // WIDGET_H

widget.cpp

在这里插入图片描述

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget)
{ui->setupUi(this);this->prog = 50;ui->progressBar->setValue(prog);ui->addBtn->setIcon(QIcon(":/new/prefix/add.png"));ui->subBtn->setIcon(QIcon(":/new/prefix/sub.png"));
}Widget::~Widget()
{delete ui;
}void Widget::on_addBtn_clicked()
{this->prog++;ui->progressBar->setValue(prog);
}void Widget::on_subBtn_clicked()
{this->prog--;ui->progressBar->setValue(prog);
}

在这里插入图片描述

布局管理器

界面布局方法

手工布局（绝对定位）：

适用于测试某个小功能。
简单快捷，但不能做到自适应窗口，需要自己计算子部件位置和大小。

布局管理器布局：

适用于真正项目开发。
1、子部件的定位
2、窗口的合理默认空间
3、窗口的合理最小空间
4、窗口自适应管理
5、字体大小或者内容变化
详见帮助文档：Layout Management
在这里插入图片描述

布局中的属性

margin（页边空白）：布局和外围窗体之间的间隔（left、top、right、bottom）
spacing：代表布局内部件之间的间隔
stretch：代表布局内部件所占的比例

布局相关的方法

以 QHBoxLayout 横向布局为例。

QHBoxLayout(QWidget * parent)
在parent部件上增加横向布局void addWidget(QWidget *widget, int stretch = 0, Qt::Alignment alignment = 0)
布局上加部件void addLayout(QLayout *layout, int stretch = 0)
布局上加布局void QBoxLayout::addStretch(int stretch = 0)
在布局中增加指定比例的空白void QBoxLayout::setStretch(int index, int stretch)
设置部件的比例void QBoxLayout::setSpacing(int spacing) 
设置部件之间的空白距离void QBoxLayout::setMargin(int margin) 
void QLayout::setContentsMargins(int left, int top, int right, int bottom)
设置布局和外围窗体之间的空白距离

在这里插入图片描述

💡 练习

设置主窗体大小为 400*400，窗体上放置两个文本输入框（QTextEdit）
横向均分两个文本输入框。

ui 实现

在这里插入图片描述

代码实现

#ifndef WIDGET_H
#define WIDGET_H#include <QtWidgets>namespace Ui {
class Widget;
}class Widget : public QWidget
{Q_OBJECTpublic:explicit Widget(QWidget *parent = 0);~Widget();private:Ui::Widget *ui;QTextEdit *edit_1;QTextEdit *edit_2;
};#endif // WIDGET_H

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget)
{ui->setupUi(this);this->resize(480, 300);// 实例化界面组件edit_1 = new QTextEdit;edit_2 = new QTextEdit;// 实例化一个组件，并且把布局应用到整个界面上QHBoxLayout *box = new QHBoxLayout(this);// 把部件添加到布局上box->addWidget(edit_1, 1);box->addWidget(edit_2, 1);          // 设比例为 1: 1，可以不写（默认0: 0）// 重设比例box->setStretch(0, 309);			// 第 0 个组件box->setStretch(1, 500);			// 第 1 个组件// 右侧添加一块空白，括号内的参数是比例值box->addStretch(100);// 设置边距box->setMargin(0);// 设置间距box->setSpacing(0);
}Widget::~Widget()
{delete ui;
}

在这里插入图片描述

QT 样式表拓展

（👆 安全链接，放心跳转）

💡 练习

根据设计图，完成双向进度条显示部件，要求界面可自适应，界面基础大小为 600*50，总体使用横向布局。（图中数字为比例关系）
在这里插入图片描述

进度条无法自适应高度请参考：sizePolicy 属性帮助文档。
在这里插入图片描述

进度条样式参考

#define  PROGRESS_LEFT_STYLE (QString(""\"QProgressBar {"\"background-color: #dbdee0;"\"border-right:1px solid #00ff00"\""\"}"\"QProgressBar::chunk {"\"background-color:  #FF5500" "}"))#define  PROGRESS_RIGHT_STYLE (QString(""\"QProgressBar {"\"background-color: #dbdee0;"\"border-left:1px solid #00ff00"\""\"}"\"QProgressBar::chunk {"\"background-color:  #FF5500" "}"))

widget.h

#ifndef WIDGET_H
#define WIDGET_H#include <QtWidgets>namespace Ui {
class Widget;
}class Widget : public QWidget
{Q_OBJECTpublic:explicit Widget(QWidget *parent = 0);~Widget();private:Ui::Widget *ui;QProgressBar *lbar;QProgressBar *rbar;
};#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget)
{ui->setupUi(this);this->resize(600, 50);// 初始化两个进度条lbar = new QProgressBar;rbar = new QProgressBar;// 为进度条设置默认值lbar->setValue(30);rbar->setValue(30);// 取消显示进度条的百分比lbar->setTextVisible(false);rbar->setTextVisible(false);// 使进度条可以纵向拉伸lbar->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);rbar->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);// 翻转左进度条lbar->setInvertedAppearance(true);// 添加进度条样式，每个进度条中包含有 1px 的 border边框// lbar->setStyleSheet(PROGRESS_LEFT_STYLE);// rbar->setStyleSheet(PROGRESS_RIGHT_STYLE);// 左右两进度条横向布局QHBoxLayout *box = new QHBoxLayout;box->addWidget(lbar);box->addWidget(rbar);box->setMargin(0);box->setSpacing(0);// 添加进度条两侧的空白，再次横向布局QHBoxLayout *hbox = new QHBoxLayout;hbox->addStretch(1);hbox->addLayout(box, 28);hbox->addStretch(1);hbox->setMargin(0);hbox->setSpacing(0);// 添加进度条上下的空白，然后纵向布局QVBoxLayout *vbox = new QVBoxLayout(this);vbox->addStretch(1);vbox->addLayout(hbox, 5);vbox->addStretch(1);vbox->setMargin(0);vbox->setSpacing(0);// 累了，下一行自己看吧// this->setStyleSheet("background-color:white");
}Widget::~Widget()
{delete ui;
}