高仿富途牛牛-组件化(三)-界面美化
目录
- 四、组件模板工具栏
一、概述
今天是组件化的第三篇文章了,前两篇文章主要是以功能为主,分别讲解了 和,其中也不乏有一些小的bug,不过这些都不是问题。
之前的效果展示只是为了表达意思,界面是真的丑,标准的程序员审美,哈哈哈。今天这篇文章主要是对之前的程序进行了美化,并且进行了一些bug的修改。
效果美化是参照富途牛牛做的,虽然不是一模一样,但是确实比之前的效果好了一些,喜欢的同学可以参考下。
文章最后会把描述显示效果的qss文件贴上,希望可以帮到大家
二、效果展示
下面个gif图,录制的时间比较长,大家可以仔细看下,交互效果完全是参照富途牛牛做的,如有问题,欢迎提出。感谢!!!
欢迎大家提出问题,交互、配色都可以
三、工具箱
工具箱是一个很重要的功能。我们的每一个独立组件模板都拥有一个工具箱。
- 工具箱自身支持移动
- 组件模板移动时 会联动工具箱移动(工具箱和组件模板的相对位置不变)
下面我们来分析下工具箱是怎么做的
1、布局
首先,从界面布局上我们先来说下,工具箱从整体颜色划分上,可以分为两个部分:标题栏和客户区窗口。
a、标题栏
标题栏我们是一个窗口的眼睛,通过标题栏的命名我们可以看到这个窗口是干什么的,例如展示图中所示,交易、迷你报价、自选股、今日统计等等。
除此之外,标题栏还提供了一个很灵活的操作:移动窗口,我们可以通过鼠标按下标题栏来进行窗口拖拽
这里我们为了实现这个功能,重写了qwidget的三个接口,实现内容都比较简单,这里就不做说明了,有兴趣的自行百度,网上一大堆。
virtual void mousepressevent(qmouseevent *) override; virtual void mousemoveevent(qmouseevent *) override; virtual void mousereleaseevent(qmouseevent *) override;
最后也是很重要的一点,那就是标题栏还支持关闭窗口,我们通过点击标题栏上的关闭按钮,可以关闭当前窗口。
对于工具箱来说,我们也可以通过点击组件模板工具栏上的按钮进行关闭
b、客户区
一个窗口除过标题栏以为剩下的就是客户区了,客户端使我们展示展示数据的主要地方,展示效果中的工具箱里边包含了很多工具按钮,包括通用页签下的迷你报价、自选股、短线精灵,和港股页签下的迷你报价、交易、账户等等。
工具箱的客户端我们这里是只有一个qtabwidget类,而通用和港股页签就是qtabwidget下的两个页签。
每个页签里边都是一个qlistwidget,我给qlistwidget设置了图表展示模式,让他有了一个钟按钮的显示风格。
2、功能详解
上边我们主要分析了工具箱的一个组成部分,接下来我将会从更为详细的代码层面说明工具箱的实现过程,其中可能会包含一些qss样式表,全部的样式表将会在文章最后贴出
上边已经提供到两个页签里边的工具按钮都是包含在qlistwidget控件中的,下面我直接贴出页签初始化的关键代码
void toolboxdialog::initializetools(int start, int end, const qstring & title) { qlistwidget * normalwidget = new qlistwidget; normalwidget->setverticalscrollbarpolicy(qt::scrollbaralwaysoff); normalwidget->sethorizontalscrollbarpolicy(qt::scrollbaralwaysoff); connect(normalwidget, &qlistwidget::itemclicked, this, &toolboxdialog::itemclicked); normalwidget->setdragenabled(false); normalwidget->setviewmode(qlistview::iconmode); normalwidget->setresizemode(qlistview::adjust); normalwidget->setspacing(3); for (int i = start; i < end; ++i) { normalwidget->additem(createitem(toolnames[i], tooltypes[i])); } m_ptabwidget->addtab(normalwidget, title); }
从上边代码可以看出,我们的列表使用了图标(qlistview::iconmode)显示模式,并且设置了图标项不可以拖拽。
最后我们使用一个循环构造了很多item,插入到了qlistwidget控件中
样式美化代码如下,不了解qss语法的可以参考这篇文章,我以前写的,比较详细。
qdialog#toolboxdialog qtabwidget::pane { border-top: 1px solid #2b3236; } qdialog#toolboxdialog qtabwidget::tab-bar { top:1px;} qdialog#toolboxdialog qtabbar::tab { background:#1d2224;border-bottom: 1 solid #2b3236; min-width: 20ex; padding: 4px; color:#919aa3; } qdialog#toolboxdialog qtabbar::tab:selected { border-bottom: 1 solid #ff9900; } qdialog#toolboxdialog qtabbar::tab:hover { border-bottom: 1 solid #ffb700; } qdialog#toolboxdialog qtabbar::tab:!selected:!hover { border-bottom: 1 solid #2b3236; } qdialog#toolboxdialog qlistview{border:0px solid blue;margin-top:12px;margin-left:12px;outline:none;} qdialog#toolboxdialog qlistview::item{padding-top:10px;border:1 solid transparent;} qdialog#toolboxdialog qlistview::item:hover{color:#ff9900;background:#6b7276;}
最后也是最重要的一点,item我们是怎么构造的
static qlistwidgetitem * createitem(const qstring & text, subwindownormaltype type) { qlistwidgetitem * item = new qlistwidgetitem; item->setsizehint(qsize(72, 72));//设置项大小 item->setflags(item->flags() & ~qt::itemisselectable);//设置项不可以被选中 item->settext(text); item->setdata(usertype, type); item->seticon(qpixmap("./image/mainwindow/tquant-btn_normal.png"));//设置图标 return item; }
代码比较简单,但是需要特别注意,代码中调用的每一个接口,都是必不可少的。
四、组件模板工具栏
关于工具栏的实现,我们可以参考这篇文章,今天这篇文章我们只讲解怎么美化,虽然美化效果没有很明显,我们还是凑合着看吧。
这里同样也是使用了qt的动态属性功能,这真是qt的一个很强大的能力,有了动态属性,我们可以很容易的做出一些交互上比较复杂的效果。
鼠标hover时的文字颜色就是使用了动态属性来实现。仔细看如下qss样式表,当qlabel的hovered属性为true时(实际上qlabel并没有达到hover,这里我们是模拟了hover行为),我们启用了一种新的文字颜色。
tabbutton#tab_button:hover{border-bottom:1 solid #ffb700;} tabbutton#tab_button[selected=true]{border-bottom:1 solid #ff9900;color:#ff9900;} tabbutton#tab_button qlabel[hovered=true]{color:#ff9900;} tabbutton#tab_button qlabel[selectedcolor=true]{color:#ff9900;} tabbutton#tab_button qtoolbutton{border:0px;border-image:url(./image/common/titlebar_normal.png) 0 0 0 78;} tabbutton#tab_button qtoolbutton:hover{border:0px;border-image:url(./image/common/titlebar_hover.png) 0 0 0 78;}
再看实现代码,当我们的鼠标移入自定义的标签页按钮时,给子控件(文本控件)设置了动态属性,并刷新了界面。
void tabbutton::enterevent(qevent * event) { m_ptitle->setproperty("hovered", "true"); m_ptitle->style()->unpolish(m_ptitle); m_ptitle->style()->polish(m_ptitle); __super::enterevent(event); }
自定义的页签按钮,本身是一个qwidget,他内部包含了qlabel文本和qtoolbutton关闭按钮,为了让qlabel还没有hover的时候,我们给他制造一种hover假象,我们使用了动态属性。
这个组件化demo中使用动态属性的地方其实比较多,这里就不一一例举出来了,说明一个,大家知道有这么会事,自己也学会使用即可
五、其他界面美化
讲完和组件模板工具栏美化之后,其他界面的美化就比较简单了。
剩下的就是subpanel和小窗口的美化,这里我重点说下小窗口的美化,有一个边框颜色的改变这个地方。
当小窗口获取焦点时,边框是黄色的,失去焦点时边框是灰色的
实现方式如下,这里我重写了窗口获取焦点和失去焦点的接口,并且进行设置了qt内置的动态属性,然后在qss中对属性进行了样式配置
代码如下
//获取焦点时 void smallwidget::focusinevent(qfocusevent * event) { setproperty("selectedwidget", "true"); style()->unpolish(this); style()->polish(this); __super::focusinevent(event); } //失去焦点时 void smallwidget::focusoutevent(qfocusevent * event) { setproperty("selectedwidget", "false"); style()->unpolish(this); style()->polish(this); __super::focusoutevent(event); }
qss样式如下
qwidget#small_widget_title { border-bottom:1 solid #2b5470;background:#292f33; } qwidget#smallwidget { border:1 solid #474f57;background:#1d2224; } qwidget#smallwidget[selectedwidget=true] { border:2 solid #ffe100; }
是不是很简单,哈哈哈哈。
最后我贴出完整的qss样式表,为了显示更多内容,这里我把多余的换行符都去掉了。
qdialog{ border:1px solid #7b8187} qwidget{ background:#28323f;color:#dddddd;} qwidget#small_widget_title{ border-bottom:1 solid #2b5470;background:#292f33;} qwidget#smallwidget{ border:1 solid #474f57;background:#1d2224;} qwidget#smallwidget[selectedwidget=true]{ border:2 solid #ffe100;} qwidget#dragtoolbar{ background:#1d2224;border-bottom:1 solid #2b3236;} qwidget#toolboxtitle{ border-bottom:1 solid #2b5470;background:#292f33;} qwidget#toolboxdialog{ background:#28323f;border:1 solid #474f57;} tabbutton#tab_button:hover{border-bottom:1 solid #ffb700;} tabbutton#tab_button[selected=true]{border-bottom:1 solid #ff9900;color:#ff9900;} tabbutton#tab_button qlabel[hovered=true]{color:#ff9900;} tabbutton#tab_button qlabel[selectedcolor=true]{color:#ff9900;} tabbutton#tab_button qtoolbutton{border:0px;border-image:url(./image/common/titlebar_normal.png) 0 0 0 78;} tabbutton#tab_button qtoolbutton:hover{border:0px;border-image:url(./image/common/titlebar_hover.png) 0 0 0 78;} qdialog#toolboxdialog qtabwidget::pane { border-top: 1px solid #2b3236; } qdialog#toolboxdialog qtabwidget::tab-bar { top:1px;} qdialog#toolboxdialog qtabbar::tab { background:#1d2224;border-bottom: 1 solid #2b3236; min-width: 20ex; padding: 4px; color:#919aa3; } qdialog#toolboxdialog qtabbar::tab:selected { border-bottom: 1 solid #ff9900; } qdialog#toolboxdialog qtabbar::tab:hover { border-bottom: 1 solid #ffb700; } qdialog#toolboxdialog qtabbar::tab:!selected:!hover { border-bottom: 1 solid #2b3236; } qdialog#toolboxdialog qlistview{border:0px solid blue;margin-top:12px;margin-left:12px;outline:none;} qdialog#toolboxdialog qlistview::item{padding-top:10px;border:1 solid transparent;} qdialog#toolboxdialog qlistview::item:hover{color:#ff9900;background:#6b7276;}
六、使用qss文件
设置外部qss文件的流程如下:
- 找到qss文件
- 加载qss文件
- 通过qapplication::setstylesheet设置样式表
这样是一种比较冷通的设置方式,一旦qss文件比较大,会出现这句代码卡顿的情况。如果想要更好的性能,qss建议还是分开来写,至于怎么合理的拆分qss文件,可以根据自己的需求来拆分
这里提供我之前使用过的两种方式
- 控件级别,每个控件对应一个qss文件
- 功能级别,一个功能模块一个qss文件
拆分的好处我就不多说了,谁用谁知道!!!
话不多说,直接上代码了。
setcurrentdirectory(a.applicationdirpath().tostdwstring().c_str()); qstring qssfile = a.applicationdirpath() + "\\templatelayout.qss"; qfile qss(qssfile); qss.open(qfile::readonly); if (qss.isopen()) { qstring btnstylesheet = qobject::tr(qss.readall()); a.setstylesheet(btnstylesheet); qss.close(); }
七、相关文章
以上的内容,基本上就是本篇文章的内容所有内容啦!美化功能基本完成,希望可以帮到大家。
最后再说一句,美化是永无止境的,今天虽说是讲解界面美化,不过现在这个效果也不是专业美化后的,只能说是比之前的效果稍微好一些。这里也是抛砖引玉,说明美化的方式和技巧,要想有更好的美化效果,还是得有专业的设计师同学进行设计
转载声明:本站文章无特别说明,皆为原创,版权所有,转载请注明: or twowords