【QT实战】 |
您所在的位置:网站首页 › 如何更改文件创建的时间 › 【QT实战】 |
目录 1.界面需求分析 2.主界面的设计 2.1 自定义标题栏 2.2 设置窗口的背景 3.登录界面的设计 3.1 登录按钮的设计 3.2 "没有账号,立即注册"的按钮设计 4 QstackWidget界面 4.1 QstackWidget添加多个页面 4.2 实现登录页面与注册页面的转换 4.3 实现登录页面与设置页面的转换 图片文件以及源代码链接 1.界面需求分析打开程序,显示的界面如下: 登录界面:点击右下角的 "没有账号,立即注册" 按钮,切换到 注册界面。 注册界面:点击左下角的 "已有账号,返回登录" 按钮,切换到登录界面 登录界面:点击右上角的原点按钮,切换到服务器设置界面 服务器设置界面:点击 "返回登录界面" 按钮,切换到登录界面 界面需要选择 QDialog的窗口: 1.在项目中创建一个新的widget文件,步骤如下 2.在新的ui界面中设计自定义标题栏 步骤: 1.点击窗口,在属性表中设置宽度。 2.将控件拖放到窗口上,并对其水平布局,并删除掉按钮的文本 3.进入各个按钮的样式表,将图片的 设置进 图片中; 4.最终形成自定义标题框 5.将标题框设置进主界面中 将自定义的标题栏的类名 设置进去。 选择对应的类,最后点击提升即可。 点击运行代码,发现原先的标题栏还存在 所以需要在构造函数加入去除标题栏的代码: this->setWindowFlags(Qt::FramelessWindowHint | windowFlags()); 2.2 设置窗口的背景
1.重载PaintEvent函数,因为在窗口显示的时候会触发PaintEvent。 2.使用QPainter将对应的图片绘制在窗口上 3.登录界面的设计初始的登录按钮转换为上面的情况: 1.在按钮处,右击鼠标,进入改变样式表: 2.在添加资源中选择 border-image ,再选择对应的图片资源: 3.点击按钮的属性,设置按钮的最小的宽度和高度: 初始的状态:该按钮也是一个Tool Button: 1.点击按钮,进入右侧框中的属性框中,找到autoRaise属性: 2.进入按钮的样式表, 改变字体的颜色和形状 窗口中间的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备15022753号-3 |