资讯中心 | ![]() |
目录 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将对应的图片绘制在窗口上 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); } 图片文件以及源代码链接 Cloud-disk/logindialog at master · sjp1237/Cloud-disk · GitHub |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备16040606号-1 |