0


QT界面开发--我的第一个windows窗体【菜单栏、工具栏、状态栏、铆接部件、文本编辑器、按钮、主界面】

经过前面的铺垫,今天我们就开始我们图形化界面之旅了,我们的第一个窗体主要包括:菜单栏、状态栏、工具栏、铆接部件、还有Qt提供的一些主窗体的API。

第一部分:主界面(QMainWindow)

当创建好项目后,我们直接运行,看一下运行结果:

86a3d50e8d294b42afe094155642af4e.png

你会发现,这个界面是小小的一坨,看起来一点也不舒服,那我们就可以使用resize()方法来更改界面尺寸。代码如下:

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->resize(600,400);//将界面尺寸设置为600*400
}

008d1d1b075045a2b59c475f92e574b7.png

此时大小的问题我们解决了,如果我们不想这个尺寸被更改,我们可以使用,将窗体的尺寸固定

setFixedSize(this->size());//将当前大小固定

然后还有一个问题就是这个窗体的标题不是我们想要的,我们如何改成我们想要的标题呢?

setWindowTitle("Stark系统");//设置窗体标题

49c227f1ed4f4b269226aa131d7fd591.png

设置之后,界面就是现在的效果了。更多内容可以查看Qt自带的帮助文档。

6bc7600bca2543b8b2ee911ee95b8ad3.png

第二部分:菜单栏 (QMenuBar)

菜单栏(QMenuBar)是用于在应用程序的窗口顶部显式菜单的组件。一般一个窗口最多拥有一个菜单栏。我们的菜单栏的设置需要有以下几个步骤:

1.在主窗口创建菜单栏

如果我们选择使用 **QMenuBar * mBar=new QMenuBar(this); **的话,设置出来的菜单栏没有任何设置,非常的丑陋,要我们亲自去设计也可以,那就非常麻烦,所以Qt就为我们提供了一套方法:

    // //第一步:创建菜单栏并接收
    QMenuBar * menuBar = menuBar();
    // //第二步:将菜单栏设置到该窗口内
    setMenuBar(menuBar);

设置好后点击运行,没有出现任何改变,不要慌张,不要着急,这是因为菜单栏中什么也没有。我们需要添加菜单项在菜单栏中。

2.添加菜单到菜单栏

使用QMenu来创建菜单,然后将其添加到菜单栏。主要的流程如下:

    // //第三步:创建菜单项
    QMenu * fileMenu=new QMenu("文件");
    QMenu * editMenu=new QMenu("编辑");
    QMenu * helpMenu=new QMenu("帮助");
    // //第四步:将菜单项加到菜单栏中
    menuBar->addMenu(fileMenu);
    menuBar->addMenu(editMenu);
    menuBar->addMenu(helpMenu);

这样的话,我们就创立了三个菜单项:文件、编辑、帮助。并添加到了菜单栏menuBar中 。此时看一下运行的效果是怎样的:

916fe8d36a59446d99c7cdf726aa084f.png

ok,此时窗体中就有了一个菜单栏,其中的菜单项根据你的实际需求进行添加。我们可以对比一下Qt的菜单栏:

9ca4f8dd71914672a6165c5e4f798983.png

Qt界面提供了九个菜单项。每个菜单项下又有一些子项,这些子项是什么?这些子项被称为动作。类型是QAction。

3.添加动作到菜单

我们可以声明几个动作来放到文件菜单下:

    // //第五步;创建活动项
    QAction * newAction=new QAction("新建文件");
    QAction * openAction=new QAction("打开文件");
    QAction * saveAction=new QAction("保存文件");
    // //第六步:将活动项加到菜单项下
    fileMenu->addAction(newAction);
    fileMenu->addAction(openAction);
    fileMenu->addAction(saveAction);

此时我们的【文件】菜单下就有了新建文件、打开文件、保存文件三个动作。这些动作实际起作用其实就需要我们使用connect来进行组件之间的信号与槽的关联。

除此以外,我们还可以添加分隔符、子菜单:

    //第七步:添加分隔符与子菜单
    fileMenu->addSeparator();
    fileMenu->addMenu(new QMenu("无效项"));

此时我们的运行观察结果:

c7128ce138dc4b4ca1838f8ba82e7914.png

ok,越来越像样了。

在这里,我们需要注意的是,千万不要忘了引用头文件

#include <QMenuBar>
#include <QMenu>
#include <QAction>

实际上我们只需要引用第一个就可以了。

第三部分:工具栏(QToolBar)

工具栏(QToolBar)是一个可用于放置常用操作和功能按钮的界面组件,通常位于主窗口的顶部或侧边。工具栏可以显著提高用户体验,是的常用功能更易访问。

万事开头都是头文件:这次我们需要添加#include <QToolBar>

1.在主窗口创建工具栏

添加工具栏时我们直接使用new即可:

    //第一步:创建工具栏并接收
    QToolBar * toolBar=new QToolBar();

    //第二步:添加工具栏至该窗口
    //addToolBar(toolBar);
    addToolBar(Qt::ToolBarArea::LeftToolBarArea,toolBar);//设置默认停靠区域:左部
    //addToolBar(Qt::ToolBarArea::TopToolBarArea,tbar2);//设置默认停靠区域:顶部
    toolBar->setMovable(false);//固定区域,不可移动
    //tbar2->setFloatable(false);//不可悬浮,必须停靠某个区域

在第二步中我们可以看到我们使用的是addToolBar将工具栏toolBar添加到该窗口,这是因为,窗口中理论上最多只有一个菜单栏,所以使用set设置,工具栏可以有多个,所以使用add,这是非常讲究的。对于该接口,如果我们只传工具栏对象指针,默认将工具栏停靠在窗口上方,但我们可以多传一个参数来确定工具栏的默认停靠位置:

Qt::ToolBarArea::LeftToolBarArea,代表默认停靠在窗口的左侧,对应的还有上、下、右。为什么称为默认停靠区域呢?显然,工具栏可以拖拽,浮动。我们可以选择不让他浮动在窗口,必须停靠在窗口的一边,这个是QToolBar的接口:setFloatable(false),将浮动的(Floatable)属性设置(set)为false,也就是不可浮动。我们也可以选择不允许移动该工具栏:setMovable(false)。

2.添加动作到工具栏

工具栏上可以拥有一些动作,这些动作其实就是菜单下的动作,只不过这些动作比较常用,我们就将其单独列到工具栏,方便用户交互。当然,我们也可以添加一些菜单栏中的菜单中所没有的动作,这不违反语法和规定,这是允许的。下面我们看一下如何添加动作呢?其实与在菜单中添加动作一样(你可以理解为:一个菜单项就是一个折叠起来的工具栏)。

    //第三步:添加工具栏选项
    QAction* debugAction=new QAction("调试");
    QAction* helpAction=new QAction("帮助");
    //第四步:将选项加载至工具栏
    toolBar->addAction(debugAction);
    toolBar->addAction(helpAction);

此时来看一下运行效果:

dc80d8fd5fd34ceeb21bb6dc3cf3d83e.png

当然,工具栏中也可以添加一些分隔符和一些像按钮一样的组件:

    toolBar->addSeparator();
    QPushButton *exitBtn = new QPushButton("退出",this);
    toolBar->addWidget(exitBtn);

再看效果图:

3b6ac7d26ce0424db93f5ff2a0dccf39.png

分隔符的存在是为了将不同的功能进行划分,而按钮的存在其实与动作的效果类似,只是进行connect时访问的信号不同,例如:

    //点击自添加退出按钮后,关闭窗口
    connect(exitBtn,&QPushButton::clicked,this,&QWidget::close);
    
    QMessageBox * msg=new QMessageBox(this);
    msg->setWindowTitle("提示");
    msg->setText("功能丰富,随便用。");
    
    //引发动作后,将弹出消息提示框
    connect(helpAction,&QAction::triggered,msg,&QWidget::show);

我们点击按钮时,触发的信号是点击:clicked。而动作不同,我们触发的信号是引发:triggered。

此外,二者也有其他的区别,比如按钮可以设置更的属性动作设置不了,类似背景色等的东西。

我们试着运行一下,测试效果:

17e2e1fbae0a4a838a1ca4c4fa42c819.png

点击退出后,窗口确实随之关闭了。

第四部分:状态栏(QStatusBar)

状态栏 (QStatusBar) 是一个用于显示应用程序当前状态的信息的组件,通常位于主窗口的底部。状态栏可以用来显示消息、进度信息或应用程序的状态等。一般一个窗口最多拥有一个状态栏。

创建状态栏的基本步骤:

前提:引用头文件:#include <QStatusBar>

1.在主窗口创建状态栏

创建状态栏也是new出来的。由于状态栏一般只有一个,所以我们添加的方法是set而非add。

    //第一步:建立状态栏
    QStatusBar * stBar=new QStatusBar();
    //第二步:设置到窗口
    setStatusBar(stBar);

2.添加标签到状态栏

我们添加一个提示信息的标签,这是一个固定的信息,除非后续我们使用setText("");为标签的Text属性进行修改,我们的标签文本内容就是固定的了。创建时也是new,添加时我们使用添加组件的方法addWidget即可,将label组件加入即可。默认将标签设置到状态栏左侧,可以额外传入一个int类型的参数e4589aaa4e6a4b6cab041092962a4cc5.png。进行拉伸的话,默认的位置就会发生变动。如果使用addPermanentWidget方法,默认位置则是右侧,也可以传入int类型的参数,效果与前者相反。

    //第三步:添加标签
    QLabel * label_hint=new QLabel("系统提示信息:");

    //第四步:设置标签位置
    stBar->addWidget(label_hint);//默认放到左侧
    //stBar->addPermanentWidget(label_hint);//默认放到右侧

当然,我们也可以添加其它的小部件:如进度条、按钮等。

3.添加消息到状态栏

我们可以使用showMessage方法向状态栏显示一条消息:

stBar->showMessage("欢迎使用Stark系统!", 5000); // 消息显示5秒 

37135c559b3649a28761dd02eabd9f3e.png

第四部分:文本编辑器

在窗口中心设置一个文本编辑器。

    //设置中心部件
    QTextEdit *textEdit=new QTextEdit(this);
    setCentralWidget(textEdit);

af2abb38009f41abade6eb085efedef1.png

此时我们就可以在窗口内输入一些信息,如果我们对【保存文件】动作和 保存文本信息 进行信号与槽的连接的话,我们就实现了一个简单的word编辑器,当然了我们还需要对文本进行字体大小、色彩、背景、等东西进行修改才能逐步完善。但此时,我们已经有很大的进步了。

第五部分:铆接部件

    QDockWidget *dockWidget=new QDockWidget("这是一个浮动窗口",this);
    addDockWidget(Qt::BottomDockWidgetArea,dockWidget);//默认停靠下方
    dockWidget->setAllowedAreas(Qt::BottomDockWidgetArea|Qt::TopDockWidgetArea);//只能上下停靠
    //dockWidget->setAcceptDrops(false);//不接受拖拽

铆接部件是一个浮动窗口

ee002bff562c412db6ab95f9a63b11a9.png

如果在浮动窗口中加入一些功能,是不是感觉布局与VS有点像了呢?当然了,只是现在界面外表低配,只有实现connect以及自定义或提供的一些方法信号才能实现更强大的功能。


感谢观看

标签: c++ 开发语言 后端

本文转载自: https://blog.csdn.net/U2396573637/article/details/143152196
版权归原作者 Stark、 所有, 如有侵权,请联系我们删除。

“QT界面开发--我的第一个windows窗体【菜单栏、工具栏、状态栏、铆接部件、文本编辑器、按钮、主界面】”的评论:

还没有评论