导语:

最近在学习Qt到布局管理,标签,对话框这部分的时候忽然感觉脑子好混乱的感觉。分开模块看的时候好像都可以理解,但是真的静下来去想一下大体的 界面应该怎么设计 的时候,感觉脑子有点乱乱的,理不清楚的感觉。在网上也搜索了很多相关的文章解惑,结果看的人是血脉喷张——都是不知道哪里拼凑的东西,写的乱七八糟,完全没有一丝能够有助于自己理解的地方,真的气愤无奈。

所以这一节主要会说明一些在这段的学习环节中可能会疑问的问题以及实例代码会多一些,希望能够提示自己同时也可以对别人有所帮助。有什么不足的地方也希望大家可以在评论区指正。ok,下面开始进入正题。

1.布局的使用

之前提到有一个名词叫做——布局管理器详情点击这里) 布局管理的作用就是:设置界面上控件的相对位置,窗口变大变小时,各部件会自动的按照设置规则变化。达到自适应的目的。布局管理是设置一个区域,把控件放在区域内,直接拖进去就可以,在区域内进行排序。

我们是怎么使用的呢?看看之前的代码:

    
    QHBoxLayout *layout = new QHBoxLayout;
	layout->addWidget(spinBox);
	layout->addWidget(slider);
	window.setLayout(layout);

我们先是在堆上new了一个QHBoxlayout对象。

QHBoxlayout描述:是水平布局控件,是一个用于构建横向放置布局对象;继承QBoxLayout。

QHBoxLayout::QHBoxLayout()构造一个新的水平布局管理器,将它添加到另一个布局管理器中

QHBoxLayout::QHBoxLayout(QWidget *parent)构造一个父对象的顶级水平管理器

QHBoxLayout::~QHBoxLayout()构这布局管理器,但布局中的控件不会被破坏

然后调用addwidget()将之前创建的spinbox和slider添加,接着调用setlayout,将布局设置到这个window窗口中去。最后window.show() ,得出我们设计好的界面布局,如图:
在这里插入图片描述
QBoxLayout可以在水平方向或垂直方向上排列控件,由QHBoxLayout、QVBoxLayout所继承。

QHBoxLayout:水平布局,在水平方向上排列控件,即:左右排列。
QVBoxLayout:垂直布局,在垂直方向上排列控件,即:上下排列。
上边的布局方式就是采取的水平布局的方式。
 

2.对话框的使用

1.根据自己的想发写出对应的Qt代码实现
详情点击这里
 
2.利用窗口的布局管理实现对话框形式的显示:


    QWidget*window=new QWidget();
	window->setWindowTitle("代码制作的对话框");
	QHBoxLayout *layout = new QHBoxLayout;
	//在布局中添加button控件和对话框控件
    // QDialog* p1=new QDialog(this);
    //p1->setWindowTitle(tr("Hello, dialog!"));
	
	QPushButton* p2=new QPushButton("true");
    QPushButton* p3=new QPushButton("false");
	
	//layout->addWidget(p1);
	layout->addWidget(p2);
	layout->addWidget(p3);
	window->setLayout(layout);
	window->show();

 

3.利用标准对话框QMessageBox——Qt内置的一系列对话框实现

所谓标准对话框,是 Qt 内置的一系列对话框,用于简化开发。事实上,有很多对话框都是通用的,比如打开文件、设置颜色、打印设置等。这些对话框在所有程序中几乎相同,因此没有必要在每一个程序中都自己实现这么一个对话框。

Qt 的内置对话框大致分为以下几类:

QColorDialog:选择颜色;
QFileDialog:选择文件或者目录;
QFontDialog:选择字体;
QInputDialog:允许用户输入一个值,并将其值返回;
QMessageBox:模态对话框,用于显示信息、询问问题等;
QPageSetupDialog:为打印机提供纸张相关的选项;
QPrintDialog:打印机配置;
QPrintPreviewDialog:打印预览;
QProgressDialog:显示操作过程。

这里我们简单地介绍一下标准对话框QMessageBox的使用。在前面有了关于对话框的基础之上,应该可以结合文档很轻松地学习如何使用 Qt 的标准对话框。其它种类的标准对话框,我们将在后面的章节中再一一介绍。

QMessageBox用于显示消息提示。我们一般会使用其提供的几个 static 函数:

void about(QWidget * parent, const QString & title, const QString & text):显示关于对话框。这是一个最简单的对话框,其标题是 title,内容是 text,父窗口是 parent。对话框只有一个 OK 按钮。
void aboutQt(QWidget * parent, const QString & title = QString()):显示关于 Qt 对话框。该对话框用于显示有关 Qt 的信息。
StandardButton critical(QWidget * parent, const QString & title, const QString & text, StandardButtons buttons = Ok, StandardButton defaultButton = NoButton):显示严重错误对话框。这个对话框将显示一个红色的错误符号。我们可以通过 buttons 参数指明其显示的按钮。默认情况下只有一个 Ok 按钮,我们可以使用StandardButtons类型指定多种按钮。
StandardButton information(QWidget * parent, const QString & title, const QString & text, StandardButtons buttons = Ok, StandardButton defaultButton = NoButton):QMessageBox::information()函数与QMessageBox::critical()类似,不同之处在于这个对话框提供一个普通信息图标。
StandardButton question(QWidget * parent, const QString & title, const QString & text, StandardButtons buttons = StandardButtons( Yes | No ), StandardButton defaultButton = NoButton):QMessageBox::question()函数与QMessageBox::critical()类似,不同之处在于这个对话框提供一个问号图标,并且其显示的按钮是“是”和“否”两个。
StandardButton warning(QWidget * parent, const QString & title, const QString & text, StandardButtons buttons = Ok, StandardButton defaultButton = NoButton):QMessageBox::warning()函数与QMessageBox::critical()类似,不同之处在于这个对话框提供一个黄色叹号图标。

我们可以通过下面的代码来演示下如何使用QMessageBox:(这部分代码是对应的是鼠标点击之后的SLOT槽函数,若需要完整演示代码可以文底留言)

if (QMessageBox::Yes == QMessageBox::question(this,
                                              tr("Question"),
                                              tr("Are you OK?"),
                                              QMessageBox::Yes | QMessageBox::No,
                                              QMessageBox::Yes)) {
    QMessageBox::information(this, tr("Hmmm..."), tr("I'm glad to hear that!"));
} else {
    QMessageBox::information(this, tr("Hmmm..."), tr("I'm sorry!"));
}

我们使用QMessageBox::question()来询问一个问题。这个对话框的父窗口是 this,也就是我们的 MainWindow(或者其他 QWidget 指针)。QMessageBox是QDialog的子类,这意味着它的初始显示位置将会是在 parent 窗口的中央(我们在前面的章节中提到过这一点)。第二个参数是对话框的标题。第三个参数是我们想要显示的内容。这里就是我们需要询问的文字。下面,我们使用或运算符(|)指定对话框应该出现的按钮。这里我们希望是一个 Yes 和一个 No。最后一个参数指定默认选择的按钮。这个函数有一个返回值,用于确定用户点击的是哪一个按钮。按照我们的写法,应该很容易的看出,这是一个模态对话框,因此我们可以直接获取其返回值。如果返回值是 Yes,也就是说用户点击了 Yes 按钮,我们显示一个普通消息对话框,显示“I’m glad to hear that!”,否则则显示“I’m sorry!”。运行一下我们的程序片段,就可以看到其中的不同:

程序运行:在这里插入图片描述选择Yes:
在这里插入图片描述选择No:
在这里插入图片描述 
 
QMessageBox类的 static 函数优点是方便使用。缺点也很明显:非常不灵活。我们只能使用简单的几种形式。为了能够定制QMessageBox细节,我们必须使用QMessageBox的属性设置 API。如果我们希望制作一个询问是否保存的对话框,我们可以使用如下的代码:

QMessageBox msgBox;
	msgBox.setText(tr("The document has been modified."));
	msgBox.setInformativeText(tr("Do you want to save your changes?"));
	msgBox.setDetailedText(tr("Differences here..."));
	msgBox.setStandardButtons(QMessageBox::Save
		| QMessageBox::Discard
		| QMessageBox::Cancel);
	msgBox.setDefaultButton(QMessageBox::Save);
	int ret = msgBox.exec();
	switch (ret) {
	case QMessageBox::Save:
		qDebug() << "Save document!";
		break;
	case QMessageBox::Discard:
		qDebug() << "Discard changes!";
		break;
	case QMessageBox::Cancel:
		qDebug() << "Close document!";
		break;
	}			   //

msgBox 是一个建立在栈上的QMessageBox实例。我们设置其主要文本信息为“The document has been modified.”,informativeText 则是会在对话框中显示的简单说明文字。下面我们使用了一个detailedText,也就是详细信息,当我们点击了详细信息按钮时,对话框可以自动显示更多信息。我们自己定义的对话框的按钮有三个:保存、丢弃和取消。然后我们使用了exec()是其成为一个模态对话框,根据其返回值进行相应的操作。

运行结果
在这里插入图片描述

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐