基于Qt的app开发第十四天

写在前面

"Tick-Task"APP已经做了做完基础功能了，还差两个板块的数据传输，现在我的任务就是优化前端，因为系统风格的界面实在是太丑了，所以需要想一些创意优化界面，而这也不影响后端功能的实现

本篇博客是我已经做完了前端之后才写的，思路会比前几篇边做边写的更顺畅，技术栈涉及<QPaintEvent>重写的绘制函数修改背景图片、样式表的QSS语言、设计里布局控件的进阶使用、弹簧控件的使用、Qt插入资源文件的方法、QFrame控件的使用。基本上纯是前端方面的知识了

设计思路

根据最初的界面来思考界面的优化方法

图为原登陆注册界面，可以说很难看了，主打一个能用就行，但是无论是标签、输入框，还是按钮、背景，都是可以改动的。下面说说设计思路：

背景图片：笔者是长安大学的大一学生，所以可以添加更多长安大学的元素，背景图片就可以找一张逸夫图书馆的照片，注意要和窗口大小时刻保持契合，能做到自适应

Title标签：图中的"Tick-Task"标签笔者最后改到了主界面里，使用图片存艺术字表现的，登录界面为了让背景图片更明显就没加入Title标签

提示词标签：参考我们学校的登录界面，我发现在输入框里已经有了提示词的时候，把开头的提示词删掉，直接出一个输入框会更好看一点，所以我把登录界面的提示词标签也删掉了，注册界面的还是要留下来，因为输入框的内容并不能很好的起到提示作用，不过要把标签字体、字号、颜色都改掉，能更好的契合背景图片

按钮：登录界面的按钮不是我的创意，是直接把我们学校官网登录界面的按钮给抄过来了，整体还是比较简约大气的

图为原主界面，它的缺点有很多了：首先是太大太空，一个主界面只有切换界面的功能，整这么大干啥，感觉就是为了使用而使用，其次是按钮很丑，这种基础按钮看的人很恶心，最后还有提示词很傻很呆了。我想到的设计思路是：

Title标签：使用带艺术字的图片，作为我们app的logo

提示词标签：把它删掉，明眼人能看出这是干啥的

按钮：每个按钮都各自使用渐变颜色，五个按钮五个颜色，再放大

其他功能：因为界面太空了，所以要加点展示功能，我的创意是把当天时间的展示移动到主界面，再把当前账号登录次数、各个功能使用次数都统计出来，然后展示

图为原待办界面及其子界面，这个都已经喷不动了，纯是能用就行的标准，设计思路：

首先安排一个背景图片，这里我还是觉得登录界面那张图很好看，所以就决定所有界面都用那张图

其次是占主体的表，这张表我最后决定的风格是简洁明了，设计为半透明、圆角，内部的线都取消，交替行颜色略有区别，这样的话有一些青春的感觉

接着是下边导航栏的五个按钮，这五个按钮的设计我觉得是整个前端最好的，展示出的按钮特别可爱。主要就是圆角白框、浅灰色低、白字、加一个从网上找到图标，效果很好

然后是三个功能按钮，这三个按钮使用了半透明浅绿色，去边框，白字，还是主打一手简洁清晰，关键是放大了，搭配按钮来看是很清晰

子界面的设计思路：

让前边的提示词标签更明显一点，输入框要简洁大气，应用和取消按钮要轻松

（其实还是偷的学校官网的设计风格）

图为原打卡界面及其子界面，这个界面可以说是包含元素最多的了，尽管把当天日期移到了主界面，它还包括连续达标天数、当天总时长、是否达标选择、主体表、功能按钮、导航栏按钮。

功能按钮和导航栏按钮直接照抄待办界面，做的就是风格统一

让人头疼的在于展示出的内容，因为背景图片的存在，它可能会因为颜色与背景图片不匹配而显示不清，这里笔者想到的方法就是用QFrame控件给它们加一个边框和底纹，这样它们就不透明了，但是起码能清楚地展示

展示出来的内容是清楚了，但是输出日期原理是用的LineEdit控件，如果显示的时候真的把这框展示出来，那可以说是很难看了，逼格一下就降到了负的，所以要把输入框给藏掉，只要展示里边的内容就可以了

QComBox控件也可以优化，最后做成了和底部导航栏一个风格的

子界面的设计思路：

与待办板块一样的

规划板块经过我们的讨论，最终决定推倒重做，使用QTreeView控件。如果感兴趣的话可以看看我的《基于Qt的app开发第八天》，这篇记录了我规划板块的第一次尝试

图为笔记界面及其子界面

笔记的表格和待办做成一样的就行，这个板块重要的是子界面

标题采用和登录界面一样的提示词放在输入框内部，但是输入框改为纯白色背景，不透明的，显得有力量

字体字号的输入和前边的做成差不多的就可以

按钮可以改一改，，加上图标，并做成有底色的

应用取消按钮和前几个板块一样就行

图为资料库界面及其子界面

这个板块不需要创新了，直接和前几个板块一样就行

最后还有一些总的要求（所有界面都要符合的要求）：

界面内的控件必然要与窗口相适配，窗口放大缩小控件要跟着窗口一起动
按钮的修饰作用很重要，把鼠标放上去要实现变成手型、按钮颜色要加深、点击按钮再加深
每个界面下边导航栏的按钮，要凸显出自己所处界面，即当前界面下的当前切换按钮应该是与众不同的

具体操作

（1）登录注册界面

其实我的QSS代码全是AI写的，我所做的就是为它提供模板、提供资源图片、提供创意，所以QSS语言我是讲不了什么有价值的内容的。

不过我可以讲讲Qt如何使背景图片可以完美自适应窗口大小，我在CSDN找了很久这个问题的解答，都不能完美适配，学长将他过去的课设给我看了一眼，我认为他处理的方法很好

cpp 复制代码

//初始化背景图片的函数
void Login::paintEvent(QPaintEvent*)
{
    QPainter myPainter(this);
    myPainter.setOpacity(0.9);          //背景图片透明度
    myPainter.drawPixmap(0,0,this->width(),this->height(),QPixmap(":/images/image/LoginBackground.png"));
}

类重写paintEvent函数，就按这个格式来写，运行起来背景图片和窗口大小就是完美适配的，原理是不断重绘，窗口大小改变它就重绘一次

接下来再讲一下如何向Qt中添加资源文件：

右键点击文件栏，添加新文件，选择Qt选项里的qrc后缀文件