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

最新推荐文章于 2024-05-17 10:49:34 发布

_小白__

最新推荐文章于 2024-05-17 10:49:34 发布

阅读量206

点赞数 9

分类专栏： # Qt 文章标签： qt c++ 开发语言

本文链接：https://blog.csdn.net/qq_41566483/article/details/134890673

版权

Qt 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

QT 资源文件

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

widget.ui

在这里插入图片描述

.qrc

在这里插入图片描述

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QtWidgets>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    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_OBJECT

public:
    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_OBJECT

public:
    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;
}