使用Qt designer设计UI界面入门

使用Qt designer设计UI界面入门
下面是程序的运行结果：
在新窗口中打开(O) 取消加星(S)
步骤
1.创建项目
2.创建和初始化子控件，布局
3.设置子控件的tab顺序和控件之间的伙伴关系
4.创建信号和槽函数，并建立连接
5.实现对话框自己的槽函数的设计
1.创建一个项目
打开Qt creator，选择Application­>Qt Widgets Application创建一个工程文件：
2.打开mainwindow.ui文件创建子控件
在对话框窗口创建两个标签（label），两个行编辑器（Line Edit），和两个按钮
（PushButton），位置可以先摆放在大致位置即可，在用Ctrl键选中所有控件进行 栅格布
局。使用属性编辑器设置每一个子控件的属性：
1.单击第一个文本标签设置它的objectName属性为“label1”，text属性设置
为“User&Name”另一个分别为“label2”和“&Password”
2.单击第一个行编辑器和第二个设置它们的objectName分别
为“userNameLEdit”和“passwordLEdit”
3.将第一个按钮的objectName设置为“loginButton”将它的“enable”属性设置为false ，text属
性设置为”&Login”,再将它的default属性设置成“true”。第二个按钮的objectName设置
为“clearButton”，将它的Text设置为“&Clear”。
3.设置子控件的tab顺序和控件之间的伙伴关系
点击编辑→Edit buddies设置伙伴关系，单击第一个文本标签，按住左键将红色箭头拖到第
一个行编辑器上释放鼠标按键同样完成第二个。
点击编辑→Edit Tab Order编辑Tab键顺序。单击编辑→Edit Widgets离开此模式。
4.创建信号和槽函数，并建立连接
接下来建立信号—槽函数的连接，在这个程序中，有两个我自己定义的槽函数：login（）和
enableLoginButton（QString &）函数，为了能连接着两个槽函数我先声明它。函数中是在
mainwindow.h中（private slots：）声明：
在“编辑窗口部件”的模式下，右键单击窗口空白的地方（因为这两个槽函数是属于对话框主
窗体的，所以在窗体上右键单击，如果是声明其他部件的槽函数，就在该部件上右键单
击），在弹出的右键菜单中选择“改变信号/槽”，弹出编辑mainwindow信号和槽的对话框，
在槽（slots）部分单击那个加号，添加这两个函数：
然后就是连接信号与槽函数了，为了当passwordLEdit输入密码是能让Login按钮可以被
enable，我们用enableLoginButton函数去实现，首先得让passwordLEdit的Textchanged信
号与这个enableLoginButton函数连接起来。点击编辑→Edit Widgets，单击passwordLEdit
行编辑器按住左键拖动到空白处释放（因为enableLoginButton函数属于主窗体）。在弹出
来的“配置连接”对话框选择信号textChanged（QString）与右边的槽函数
enableLoginButton（QString）：
按照同样的方式连接信号与槽函数：
5.编写对应的槽函数的代码
1.打开mainwindow.h文件在槽函数声明区增加槽函数的声明：
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include "ui_mainwindow.h"
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow, public Ui::MainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private slots:
void enableLoginButton(const QString &);//槽函数声明
void login();
//void on_loginButton_clicked();
private:
Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
2.main.cpp文件
3.mainwindow.cpp文件
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include"QMessageBox"
#include <QtDebug>
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent),ui(ne
w Ui::MainWindow)
{
ui->setupUi(this);
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::enableLoginButton(const QString &text)
{
this->ui->loginButton->setEnabled(!text.isEmpty());
// this->ui->loginButton->setEnabled(false);
}
void MainWindow::login()
{
QString userName = this->ui->userNameLEdit->text();
QString password = this->ui->passwordLEdit->text();
qDebug()<<userName<<endl;
//QMessageBox::warning(this,tr("警告"),tr((char *)userName),QMes
sageBox::Yes);
if("888"==userName){
if("888"==password){
QMessageBox::information(this,tr("Congratulation"),tr("welc
ome!"));
}
else
QMessageBox::information(this,tr("warning"),tr("password inv
alide!"));
}
else
QMessageBox::information(this,tr("warning"),tr("the user is not
exist !"));
}
//void MainWindow::on_loginButton_clicked()
//{
// QString userName = userNameLEdit->text();
// QString password = passwordLEdit->text();
// if("888888"==userName){
// if("888888"==password){
// QMessageBox::information(this,tr("Congratulation"),tr("we
lcome!"));
// }
// else
// QMessageBox::information(this,tr("warning"),tr("password i
nvalide!"));
//}
// else
// QMessageBox::information(this,tr("warning"),tr("the user is n
ot exist !"));
// qDebug()<<"123"<<endl;
//}
//void MainWindow::on_passwordLEdit_cursorPositionChanged(int arg1,
int arg2)
//{
//因为刚才空间找不到相应的控件，所以才报错，加上this->ui->
这里很重要就是
this->ui->loginButton->setEnabled(!text.isEmpty());
QString userName = this->ui->userNameLEdit->text();
QString password = this->ui->passwordLEdit->text();
这三句都要加上this­>ui­>，之前没加这里出错，折腾了好久。