目录
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将对应的图片绘制在窗口上
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);
}
3.登录界面的设计
3.1 登录按钮的设计
初始的登录按钮转换为上面的情况:
1.在按钮处,右击鼠标,进入改变样式表:
2.在添加资源中选择 border-image ,再选择对应的图片资源:
3.点击按钮的属性,设置按钮的最小的宽度和高度:
3.2 "没有账号,立即注册"的按钮设计
初始的状态:该按钮也是一个Tool Button:
1.点击按钮,进入右侧框中的属性框中,找到autoRaise属性:
2.进入按钮的样式表, 改变字体的颜色和形状
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);
}