1.QT开始

1. 下载安装QT creator

Index of /new_archive/qt/5.9/5.9.6

image-20240429210834199

选择必要的组件，安装。

2. 设置编译的输出路径

image-20240429214600932

image-20240429214621470

image-20240429214424475

3. 设置源码路径

image-20240429214912236

4. 设置桌面快捷方式

image-20240429215110149

2. 创建项目

1. 登录界面

image-20240429223824058

文件说明

项目配置文件

image-20240429224132314

image-20240429224404327

CTRL+B：构建

CTRL+R：运行

2. 设计窗口图

image-20240429225756410

• 输入框：lineedit
• 标签：label
• 按钮：pushbutton

1. 给窗口设置背景图

1. 使用一个label给窗口添加背景图，首先给窗口放置一个label标签，将label的文本删除，将label的大小设置成与label一样大。

2. 添加资源文件，将图片文件拷贝到源代码的文件目录中，然后点击qt的编辑，右击项目文件夹，选择添加文件，选择QT-> 资源文件。

3. 

   image-20240430000008681

image-20240429230428029

image-20240429230513544

image-20240429230524900

image-20240429230533927

image-20240429230550648

image-20240429230612647

再次点击添加文件，然后点击添加文件

image-20240429230655988

ctrl+s 保存图片。

image-20240429230937538

image-20240429230957554

image-20240429231114254

把我们的按钮挡住了，调整一下顺序，将其置于最底层

image-20240429231801225

2. 设置窗口和图片一样大

LoginDialog::LoginDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::LoginDialog)
{

    // 初始化界面信息
    ui->setupUi(this);


    // 包含内容，设置为填充
    ui->image_label->setScaledContents(true);

    // 设置窗体的宽高,和标签的宽高一样
    this->resize(ui->image_label->width(), ui->image_label->height());
}

3. 设置窗口风格

3. 实现登录功能

3.1 创建账号目录文件

zhangsan 123456
lisi 456123
wangwu 666555

image-20240429233030308

给登录按钮添加事件响应

image-20240429233244459

选择click信号

image-20240429233308373

qt自动给我们创建了一个函数

image-20240429233323527

添加了槽函数的定义

image-20240429233734330

添加一个消息提示框，验证一下，点击登录按钮是否会调用这个函数

/**
 * 登录按钮的槽函数
 * 按住F2按钮，可以切换定义和声明。
 * @brief LoginDialog::on_pushButton_clicked
 */
void LoginDialog::on_pushButton_clicked()
{
    QMessageBox::information(this,"消息框", "你点击了登录按钮");
}