【QT实战】——如何设计一个美观的登录界面（手把手教学）

目录

1.界面需求分析

2.主界面的设计

 2.1 自定义标题栏

 2.2 设置窗口的背景

 3.登录界面的设计

3.1 登录按钮的设计

3.2 "没有账号，立即注册"的按钮设计

4 QstackWidget界面

4.1 QstackWidget添加多个页面

4.2 实现登录页面与注册页面的转换

4.3 实现登录页面与设置页面的转换 

图片文件以及源代码链接 ​​​​​

---

1.界面需求分析

打开程序，显示的界面如下：

登录界面：点击右下角的 "没有账号，立即注册" 按钮，切换到 注册界面。

注册界面：点击左下角的 "已有账号，返回登录" 按钮，切换到登录界面

 

 登录界面：点击右上角的原点按钮，切换到服务器设置界面

服务器设置界面：点击 "返回登录界面" 按钮，切换到登录界面

2.主界面的设计

界面需要选择 QDialog的窗口：

 2.1 自定义标题栏

1.在项目中创建一个新的widget文件，步骤如下

2.在新的ui界面中设计自定义标题栏

步骤：

1.点击窗口，在属性表中设置宽度。

2.将控件拖放到窗口上，并对其水平布局，并删除掉按钮的文本

 

3.进入各个按钮的样式表，将图片的 设置进 图片中;

4.最终形成自定义标题框 

 

 5.将标题框设置进主界面中

将自定义的标题栏的类名 设置进去。

 

 选择对应的类，最后点击提升即可。

点击运行代码，发现原先的标题栏还存在

所以需要在构造函数加入去除标题栏的代码：

 this->setWindowFlags(Qt::FramelessWindowHint | windowFlags());

 

 

 2.2 设置窗口的背景

如何给窗口设置一个背景色 

1.重载PaintEvent函数，因为在窗口显示的时候会触发PaintEvent。

2.使用QPainter将对应的图片绘制在窗口上

 3.登录界面的设计

3.1 登录按钮的设计

初始的登录按钮转换为上面的情况：

1.在按钮处，右击鼠标，进入改变样式表：        

2.在添加资源中选择 border-image ，再选择对应的图片资源： 

 

 3.点击按钮的属性，设置按钮的最小的宽度和高度：

3.2 "没有账号，立即注册"的按钮设计

初始的状态：该按钮也是一个Tool Button：

 1.点击按钮，进入右侧框中的属性框中，找到autoRaise属性：

 ​​

 2.进入按钮的样式表， 改变字体的颜色和形状

void Dialog::paintEvent(QPaintEvent*)
{
    QPainter* painter=new QPainter(this);
    QPixmap pixmap;
    pixmap.load(":/res/login_bk.jpg");
    painter->drawPixmap(0,0,this->width(),this->height(),pixmap);
}

4 QstackWidget界面

4.1 QstackWidget添加多个页面

窗口中间的QStackWidget它可以存放多个页面，包括登录界面，注册界面，服务器设置界面。

 那么如何在QstackWidget添加多个页面：

 点击对应的界面就可以进行转换。

4.2 实现登录页面与注册页面的转换

 登录界面，注册界面，设置界面都是在stackedWidget里面

我们可以给“没有账号，立即注册” 这个按钮设置一个信号和槽，当我们点击该按钮的时候，就会触发槽函数去调用stackedWidget中的setCurrentWidget函数去显示注册页面。

同样，注册界面转换到登录界面也是这个原理。

void Dialog::on_register_toolButton_clicked()
{
    //显示注册页
    //setCurrentWidget设置当前页面
    ui->stackedWidget->setCurrentWidget(ui->register_page);
}

4.3 实现登录页面与设置页面的转换 

 由于设置按钮是在titleWidget窗口上，与stackWidget不是同一个窗口，不能使stackWidget直接切换窗口。

所以当点击设置按钮的时候，就会让titleWidget发出一个switchSetting信号，Dialog去接收这个信号，并调用相对应的槽函数去切换窗口。

实现步骤：

//titleWidget.cpp函数

//点击按钮将switchSettingPage信号发送出去
void titleWidget::on_set_but_clicked()
{
    emit switchSettingPage();
}

//将titleWidget::switchSettingPage与Dialog::switchSettingPage关联起来
connect(ui->widget,&titleWidget::switchSettingPage,
          this,&Dialog::switchSettingPage);


//Dialog::switchSettingPage槽函数的实现
 void Dialog::switchSettingPage()
 {
     //切换到设置页
     ui->stackedWidget->setCurrentWidget(ui->set_page);
 }

图片文件以及源代码链接
 ​​​​​

Cloud-disk/logindialog at master · sjp1237/Cloud-disk · GitHub