上一章中,我们已经可以弹出一个默认的界面,上面显示了Hello World。高兴之余,我们可能会觉得有那么一点点枯燥,如果能增加一些交互就更好了。例如,界面上有一个按钮,我们点击按钮之后,能够显示另外一个界面。这很简单,本章的内容就来实现这个需求。
主界面上增加一个按钮
上一章中,我们粗略的讲过如何在界面增加一个控件,这里再提一遍,加深一下大家的印象。从左边的控件栏中找到Push Button,然后选中拖到界面,然后修改显示的文字,我们就添加成功了。
保存之后,我们点击运行按钮,我们就能在界面上看到新加的按钮。
另外一个界面
回想一下我们的目的,我们想点击这个测试按钮之后,弹出另外一个界面。所以我们下一步就把另外一个界面画出来。回到编辑栏,然后在Sources或者Headers节点下点击鼠标右键,在弹出的右键菜单中点击添加新文件...,我们可以看到如下界面。
我们选择Qt 设计师界面类,点击选择。在新的界面我们选择Dialog without Buttons,点击下一步。 修改新界面的类名,这里修改为 QDemoButtonClickedDlg,然后点击下一步到完成。
点击完成之后,会自动进入到界面设计栏,我们在界面上添加一些控件。我们将所有添加的控件都修改一个名字,这是一个好习惯,请务必保持。
在当前界面按Alt + Shift + R键可以预览展示的效果。
绑定界面
回到编辑栏,我们可以看到刚刚添加的三个文件 qdemobuttonclickeddlg.cpp、 qdemobuttonclickeddlg.cpp 、qdemobuttonclickeddlg.cpp。接下来我们就可以建立主界面的按钮和新界面的关系了。我们在qdemomainwindow.h和qdemomainwindow.cpp中分别添加如下内容。
点击执行按钮,或者Ctrl + R 执行程序。然后点击测试按钮,就可以弹出新的界面。
至此,我们关联了一个界面和另一个界面,但是有几个问题还没有解释,我们放到下一章做具体说明。第一个问题是,关联实际上是绑定信号槽,这个可以说是Qt最重要的概念了,这里没有说明。第二个问题是,当我们调整界面大小的时候,控件没有随着界面大小变化而调整,这样很不好看,所以我们应该对控件做布局。
如果需要相关的代码,请转到Gitee,希望能帮到大家https://gitee.com/missing_me/qdemo/tree/master/day2-qhelloqtworld