高仿富途牛牛-组件化(三)-界面美化

目录

  • 一、概述
  • 二、效果展示
  • 三、工具箱
    • 1、布局
    • 2、功能详解
  • 四、组件模板工具栏
  • 五、其他界面美化
  • 六、使用qss文件
  • 七、相关文章

一、概述

今天是组件化的第三篇文章了，前两篇文章主要是以功能为主，分别讲解了 高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具和高仿富途牛牛-组件化(二)-磁力吸附，其中也不乏有一些小的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语法的可以参考qt 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文件的流程如下：

  1. 找到qss文件
  2. 加载qss文件
  3. 通过QApplication::setStyleSheet设置样式表

这样是一种比较冷通的设置方式，一旦qss文件比较大，会出现这句代码卡顿的情况。如果想要更好的性能，qss建议还是分开来写，至于怎么合理的拆分qss文件，可以根据自己的需求来拆分

这里提供我之前使用过的两种方式

  1. 控件级别，每个控件对应一个qss文件
  2. 功能级别，一个功能模块一个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


高仿富途牛牛-组件化(三)-界面美化

原文地址：https://www.cnblogs.com/swarmbees/p/11048378.html

时间： 2024-10-09 10:11:03

高仿富途牛牛-组件化(三)-界面美化的相关文章

高仿富途牛牛-组件化(四)-优秀的时钟

目录 一.概述 1.窗口外壳 2.标题栏 3.客户区 二.效果展示 三.小窗口 1.修改鼠标状态 2.修改大小 四.时钟窗口 五.相关文章 一.概述 最近一直在仿照富途牛牛做组件化功能,目前已经有了初步的效果. 组件化基础的功能已经有了,接下来就是一些细节上的处理了,比如说加载模板.保存模板.标签页修改名称等等,细节上的问题我们在后续的文章中都会一一做以介绍 最近打算把组件化中的工具箱相关功能做以实现.比如说迷你报价.自选股.小时钟这些窗口. 仔细观察了牛牛的小窗口,无非就是一个窗口外壳,标题栏

高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具

目录 一.概述 二.效果展示 三.实现方案分析 1.第一阶段 2.第二阶段 3.第三阶段 一.概述 好久没有做业务相关的UI功能了,比较炫酷的交互效果也写的少了,最近花了2天时间写了一个简易的高仿富途牛牛组件化的功能,当然了这只是一个初步的效果,而且没有做贴图.美化等工作,但是基本的功能已经有了.本篇文章只是作为组件化的一个开始,后续还会陆续引入更多关于组件化的介绍,相信功能也会越来越丰富.除此之外,富途牛牛的一些其他高级功能也会陆续引入,不乏有k线.分时.五日.指标.自选这样的复杂功能. 自选

高仿富途牛牛-组件化(二)-磁力吸附

目录 一.概述 二.效果展示 三.磁力吸附 1.限制鼠标区域 2.修正窗口可以移动的区域 3.获取最邻近的可被吸附的窗口 四.其他 五.相关文章 一.概述 上一篇文章高仿富途牛牛-组件化(一)-支持页签拖拽.增删.小工具我们讲述了组件化的一些基础东西,并有了一个基本的雏形,使用过富途牛牛的同学应该对其中的gif图比较熟悉了.虽然效果糙了一点儿,但是该有的基础功能是已经有了. 工具栏页签拖拽 工具栏之间页签拖拽 小工具 多页签架构 小窗口 上述几个功能在上一篇文章中都已经有了,今天我们来讲述下第二

【Qt编程】基于Qt的词典开发系列&lt;三&gt;--界面美化设计

本文讲一讲界面设计,作品要面向用户,界面设计的好坏直接影响到用户的体验.现在的窗口设计基本都是扁平化的,你可以从window  XP与window 8的窗口可以明显感觉出来.当然除了窗口本身的效果,窗口中各种控件的特效也是特别重要的一环.下面讲讲我在词典软件中的一些设计:说到界面美化的设计,不得不提到美工,一个好的美工是想当的重要!软件毕竟少不了图标,而不懂美工的我,也就只能在网上使用别人的图标了. 如何得到网上的图标? 直接百度就可以了,当然还有另一种方法:就是从别人的文件中提取这些图标文件.

Spring Cloud--鸿鹄Cloud分布式微服务云系统—组件化(三)

Spring Cloud集成项目有很多,下面我们列举一下和Spring Cloud相关的优秀项目,我们的企业架构中用到了很多的优秀项目,说白了,也是站在巨人的肩膀上去整合的.在学习Spring Cloud之前大家必须了解一下相关项目,希望可以帮助到大家.Spring Cloud Config配置管理工具包,让你可以把配置放到远程服务器,集中化管理集群配置,目前支持本地存储.Git以及Subversion.Spring Cloud Bus事件.消息总线,用于在集群(例如,配置变化事件)中传播状态变

Spring Cloud--Honghu Cloud分布式微服务云系统—组件化(三)

摘要: Spring Cloud集成项目有很多,下面我们列举一下和Spring Cloud相关的优秀项目,我们的企业架构中用到了很多的优秀项目,说白了,也是站在巨人的肩膀上去整合的.在学习Spring Cloud之前大家必须了解一下相关项目,希望可以帮助到大家. Spring Cloud集成项目有很多,下面我们列举一下和Spring Cloud相关的优秀项目,我们的企业架构中用到了很多的优秀项目,说白了,也是站在巨人的肩膀上去整合的.在学习Spring Cloud之前大家必须了解一下相关项目,希

&nbsp; &nbsp; 专业办理克隆高仿银行承兑汇票【TEL130-4887-8727】百度知道

专业办理克隆高仿银行承兑汇票[TEL130-4887-8727]百度知道 本公司专业克隆制作银行承兑汇票,原版的纸张,过硬的技术,保证质量,可以电话查验,上网查验,验货后付款,面向全国,顶级克隆技术我们一直以来以最优的诚信服务待人.需要的客户可以随时和我们联系!TEL130-4887-8727 商业承兑汇票和银行承兑汇票的区别 商业承兑汇票和银行承兑汇票的承兑人不同,决定了商业承兑汇票是商业信用,银行承兑汇票是银行信用.目前银行承兑汇票一般由银行签发并承兑,而商业承兑汇票可以不通过银行签发并背书

Android高仿微信图片选择上传工具

源码托管地址:https://github.com/SleepyzzZ/photo-selector 话不多说,先上效果图(高仿微信图片选择器): 图片选择界面: 图片预览界面: 批量上传图片: 实现的功能介绍: 1.图片异步加载,使用Glide开源库实现加载; 2.图片的预览界面,支持左右滑动,双击放大浏览; 3.图片批量上传,使用OkHttp来实现与Servlet服务器的通信; 使用方法(Android Studio): 新建工程,File->New->Import Module导入pho

安卓开发复习笔记——Fragment+ViewPager组件(高仿微信界面)

什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再重复. 什么是Fragment? Fragment是Android3.0后新增的概念,Fragment名为碎片,不过却和Activity十分相似,具有自己的生命周期,它是用来描述一些行为或一部分用户界面在一个Activity中,我们可以合并多个Fragment在一个单独的activity中建立多个UI面板,或