常用界面设计组件 —— 窗体(QT)

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

二、常用界面设计组件

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

常用界面设计组件 —— 窗体(QT)_第1张图片

2.1 窗体

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

常用界面设计组件 —— 窗体(QT)_第2张图片

  • QMainWindow

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

常用界面设计组件 —— 窗体(QT)_第3张图片 常用界面设计组件 —— 窗体(QT)_第4张图片

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

常用界面设计组件 —— 窗体(QT)_第5张图片

  • QDialog

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

    常用界面设计组件 —— 窗体(QT)_第6张图片

  • QWidget

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

    常用界面设计组件 —— 窗体(QT)_第7张图片

    如果是主窗口,就使用 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");
}

运行效果如下图所示

常用界面设计组件 —— 窗体(QT)_第8张图片

2.1.2 设置窗体标题

添加图片资源
常用界面设计组件 —— 窗体(QT)_第9张图片
常用界面设计组件 —— 窗体(QT)_第10张图片

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

记得在mainwindow.h文件中加上 “#include “dialog.h” ”
常用界面设计组件 —— 窗体(QT)_第11张图片
添加图片
常用界面设计组件 —— 窗体(QT)_第12张图片

常用界面设计组件 —— 窗体(QT)_第13张图片
常用界面设计组件 —— 窗体(QT)_第14张图片
常用界面设计组件 —— 窗体(QT)_第15张图片

:图标可以去阿里矢量图库下载: 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();
    }
    

    运行效果:

    常用界面设计组件 —— 窗体(QT)_第16张图片

    注意:窗口左上角的图标显示不出来,是跟ubuntu系统 的显示相关(windows环境下正常显示)。

2.1.3 多窗体调用

  • 创建基于QMainWindow的项目
    常用界面设计组件 —— 窗体(QT)_第17张图片

  • 增加新的窗口类
    常用界面设计组件 —— 窗体(QT)_第18张图片
    常用界面设计组件 —— 窗体(QT)_第19张图片

  • 代码编辑

    #ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    
    #include 
    #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
    
    

常用界面设计组件 —— 窗体(QT)_第20张图片

  • 添加按钮对应的槽函数
    常用界面设计组件 —— 窗体(QT)_第21张图片

    /* 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();
    }
    
  • 运行效果

    常用界面设计组件 —— 窗体(QT)_第22张图片

你可能感兴趣的:(qt,数据库,开发语言)