目录
- 一、概述
- 二、效果展示
- 三、工具箱
- 1、布局
- 2、功能详解
- 四、组件模板工具栏
- 五、其他界面美化
- 六、使用qss文件
- 七、相关文章
一、概述
今天是组件化的第三篇文章了，前两篇文章主要是以功能为主，分别讲解了 高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具和高仿富途牛牛-组件化(二)-磁力吸附，其中也不乏有一些小的bug，不过这些都不是问题。
之前的效果展示只是为了表达意思，界面是真的丑，标准的程序员审美，哈哈哈。今天这篇文章主要是对之前的程序进行了美化，并且进行了一些bug的修改。
效果美化是参照富途牛牛做的，虽然不是一模一样，但是确实比之前的效果好了一些，喜欢的同学可以参考下。
文章最后会把描述显示效果的qss文件贴上，希望可以帮到大家
二、效果展示
下面个gif图，录制的时间比较长，大家可以仔细看下，交互效果完全是参照富途牛牛做的，如有问题，欢迎提出。感谢！！！
欢迎大家提出问题，交互、配色都可以
从上边代码可以看出，我们的列表使用了图标(QListView::IconMode)显示模式，并且设置了图标项不可以拖拽。
最后我们使用一个循环构造了很多item，插入到了QListWidget控件中
样式美化代码如下，不了解Qss语法的可以参考qt qss这篇文章，我以前写的，比较详细。
最后也是最重要的一点，item我们是怎么构造的
代码比较简单，但是需要特别注意，代码中调用的每一个接口，都是必不可少的。
四、组件模板工具栏
关于工具栏的实现，我们可以参考高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具这篇文章，今天这篇文章我们只讲解怎么美化，虽然美化效果没有很明显，我们还是凑合着看吧。
这里同样也是使用了Qt的动态属性功能，这真是Qt的一个很强大的能力，有了动态属性，我们可以很容易的做出一些交互上比较复杂的效果。
鼠标hover时的文字颜色就是使用了动态属性来实现。仔细看如下qss样式表，当QLabel的Hovered属性为true时（实际上QLabel并没有达到hover，这里我们是模拟了hover行为），我们启用了一种新的文字颜色。
再看实现代码，当我们的鼠标移入自定义的标签页按钮时，给子控件（文本控件）设置了动态属性，并刷新了界面。
自定义的页签按钮，本身是一个QWidget，他内部包含了QLabel文本和QToolButton关闭按钮，为了让QLabel还没有hover的时候，我们给他制造一种hover假象，我们使用了动态属性。
这个组件化demo中使用动态属性的地方其实比较多，这里就不一一例举出来了，说明一个，大家知道有这么会事，自己也学会使用即可
五、其他界面美化
讲完工具箱和组件模板工具栏美化之后，其他界面的美化就比较简单了。
剩下的就是subPanel和小窗口的美化，这里我重点说下小窗口的美化，有一个边框颜色的改变这个地方。
当小窗口获取焦点时，边框是黄色的，失去焦点时边框是灰色的
实现方式如下，这里我重写了窗口获取焦点和失去焦点的接口，并且进行设置了Qt内置的动态属性，然后在qss中对属性进行了样式配置
代码如下
qss样式如下
来源：weixin_33705053
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！