常用界面设计组件 —

常用界面设计组件 —— 窗体（QT）

二、常用界面设计组件
- 2.1 窗体
- - 2.1.1 设置窗体位置、大小及背景颜色
  - 2.1.2 设置窗体标题
  - 2.1.3 多窗体调用

二、常用界面设计组件

组件是GUI的基本元素，也称为UI控件。它接受来自底层平台的不同用户事件，如鼠标和键盘事件（以及其它事件）。所有组件都继承自QObject。QWidget是一个基本的组件，是所有UI组件的基类。它描述组件所需要的大多数属性，包括几何图形、颜色、键盘行为、工具提示等属性。继承关系如下图所示。

2.1 窗体

窗体是指程序的整体界面，可以包含标题栏、菜单栏、工具栏、关闭按钮、最小化按钮、最大化按钮等。 QMainWindow、QWidget、QDialog 三个类就是用来创建窗体的，可以直接使用也可以继承后再使用。

在这里插入图片描述

QMainWindow

QMainWindow 窗口可以包含菜单栏、工具栏、状态栏、标题栏等，是最常见的窗口形式，可以作为GUI程序的主窗口

注意：若不显示菜单栏可按如下方式设置

QDialog

QDialog 是对话框窗口的基类。对话框主要用来执行短期任务，或与用户进行互动，它可以是模态的也可以是非模态的。QDialog 没有菜单栏、工具栏、状态栏等。
QWidget

QWidget是Qt中所有可绘制类的基类。任何基于 QWidget的类都可以在没有父类的情况下显示为窗口。

如果是主窗口，就使用 QMainWindow；如果是对话框，就是用 QDialog；如果不确定，或有可能作为顶级窗口，也有可能嵌入到其他窗口中，那么使用 QWidget。

2.1.1 设置窗体位置、大小及背景颜色

窗体初始位置为（100,100），控制窗体不可更改大，最大、最小均为 800x640，背景色为红色。

MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
	ui->setupUi(this);
	//或者使用 setGeometry
	move(100,100);
	setMaximumSize(800,640);
	setMinimumSize(800,640);
	setStyleSheet("background:red");
}

运行效果如下图所示

在这里插入图片描述

2.1.2 设置窗体标题

添加图片资源
在这里插入图片描述

一直下一步点击完成之后，系统会自动为我们创建出四个文件

记得在mainwindow.h文件中加上 “#include “dialog.h” ”
在这里插入图片描述
添加图片

在这里插入图片描述

注：图标可以去阿里矢量图库下载： https://www.icon font.cn/ 或者https://www.51tool.com/ico/?action=make 转换ico图标。

修改代码

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    move(500,150); //移动窗口位置
    setMaximumHeight(800); //限制窗口拉伸高度
    setMaximumWidth(600);  //限制窗口拉伸宽度
    setStyleSheet("background:green"); //设置窗口底色 “绿色”
    setWindowTitle("打开 QT 新世界！！！"); //窗口表头
    setWindowIcon(QIcon(":/images/favicon.ico")); //这一块的路径：在左边项目栏->选中favicon.ico文件->鼠标右击->选择Copy Path...选项
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_pushButton_clicked()
{
    dlg.show();
}

运行效果：

在这里插入图片描述

注意：窗口左上角的图标显示不出来，是跟ubuntu系统的显示相关（windows环境下正常显示）。

2.1.3 多窗体调用

创建基于QMainWindow的项目
增加新的窗口类

代码编辑

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include "dialog.h"

QT_BEGIN_NAMESPACE
namespace Ui {
class MainWindow;
}
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    // 构造函数
    MainWindow(QWidget *parent = nullptr);

    // 析构函数
    ~MainWindow();

private slots:
    // 槽函数，处理按钮点击事件
    void on_pushButton_clicked();

private:
    // UI指针
    Ui::MainWindow *ui;

    // 对话框实例
    Dialog dlg;
};
#endif // MAINWINDOW_H

在这里插入图片描述

添加按钮对应的槽函数
在这里插入图片描述

/* mainwindow.cpp */

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    // 在构造函数中初始化界面
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    // 在析构函数中释放界面对象的内存
    delete ui;
}

void MainWindow::on_pushButton_clicked()
{
    // 当按钮被点击时，显示对话框
    dlg.show();
}