Qt实现FlatUI样式(开源)

对于现在做前端开发人员来说，FlatUI肯定不陌生，最近几年扁平化的设计越来越流行，大概由于现在PC端和移动端的设备的分辨率越来越高，扁平化反而看起来更让人愉悦，而通过渐变色产生的质感色彩反而没有扁平化来得亲切。

Flat UI是基于Bootstrap之上进行二次开发的扁平化前端框架，他提供了动感、时尚的风格色调搭配，简洁、炫丽的功能组件，同时还提供了更为平滑的js交互动画，可以称得上前端扁平化设计框架的优秀代表之一。

既然是扁平化设计框架的优秀代表，当然需要在自己项目中应用应用，本人最早使用VB开发，而后转为C#开发，最后转为Qt开发，都是因为公司项目需要，根据需要不断学习新的编程框架，语言都是相通的，举一反三，以前用C#写的vista时钟控件和vista日历控件，稍微改改就转移成了Qt写的对应控件，非常方便，只要掌握了思想，熟练了一门语言和框架之后，其他的学起来特别快。

Qt中的qss机制，和css极为相似，感觉就是脱胎于css，用qss来实现Qt界面样式不是一般的方便，而是相当的爽，在看到FlatUI这样的精美的扁平化设计样式后，难以抑制手痒痒，就想用qss实现类似的风格。

第一步：实现按钮风格

按钮在大部分的可视化界面的项目中，出现的频率不是第一也是第二，所以首先来实现按钮对应的flat UI 扁平化风格。

根据官网的效果看，基本上要实现的就三种状态（正常状态+鼠标悬停状态+鼠标按下）（还有一种禁用状态）的两种颜色（背景色+前景色）的设置，前景色一般指的是文字颜色。

将改变对应按钮样式风格封装成一个函数，这样每次调用只需传入对应参数即可。

void frmMain::setBtnQss(QPushButton *btn,

                        QString normalColor, QString normalTextColor,

                        QString hoverColor, QString hoverTextColor,

                        QString pressedColor, QString pressedTextColor)

{

         QStringList qss;

         qss.append(QString("QPushButton{border-style:none;padding:10px;border-radius:5px;color:%1;background:%2;}").arg(normalTextColor).arg(normalColor));

         qss.append(QString("QPushButton:hover{color:%1;background:%2;}").arg(hoverTextColor).arg(hoverColor));

         qss.append(QString("QPushButton:pressed{color:%1;background:%2;}").arg(pressedTextColor).arg(pressedColor));

         btn->setStyleSheet(qss.join(""));

}

使用时调用：

setBtnQss(ui->btn1, "#34495E", "#FFFFFF", "#4E6D8C", "#F0F0F0", "#2D3E50", "#B8C6D1");

setBtnQss(ui->btn2, "#1ABC9C", "#E6F8F5", "#2EE1C1", "#FFFFFF", "#16A086", "#A7EEE6");

setBtnQss(ui->btn3, "#3498DB", "#FFFFFF", "#5DACE4", "#E5FEFF", "#2483C7", "#A0DAFB");

setBtnQss(ui->btn4, "#E74C3C", "#FFFFFF", "#EC7064", "#FFF5E7", "#DC2D1A", "#F5A996");

第二步：实现文本输入框的风格

根据官网的效果看，基本上就是两种状态（正常状态+获得焦点状态）的两种颜色（边框颜色+文字颜色）的设置。

void frmMain::setTxtQss(QLineEdit *txt, QString normalColor, QString focusColor)

{

         QStringList qss;

         qss.append(QString("QLineEdit{border-style:none;padding:6px;border-radius:5px;border:2px solid %1;}").arg(normalColor));

         qss.append(QString("QLineEdit:focus{border:2px solid %1;}").arg(focusColor));

         txt->setStyleSheet(qss.join(""));

}

使用时调用：

setTxtQss(ui->txt1, "#DCE4EC", "#34495E");

setTxtQss(ui->txt2, "#DCE4EC", "#1ABC9C");

setTxtQss(ui->txt3, "#DCE4EC", "#3498DB");

setTxtQss(ui->txt4, "#DCE4EC", "#E74C3C");

第三步：实现进度条的风格

根据官网的效果看，基本上就是两种颜色（正常背景色+当前值背景色）的设置。

void frmMain::setBarQss(QProgressBar *bar, QString normalColor, QString chunkColor)

{

    int barHeight = 8;

    int barRadius = 8;

         QStringList qss;

    qss.append(QString("QProgressBar{font:9pt;height:%2px;background:%1;border-radius:%3px;text-align:center;border:1px solid %1;}").arg(normalColor).arg(barHeight).arg(barRadius));

    qss.append(QString("QProgressBar:chunk{border-radius:%2px;background-color:%1;}").arg(chunkColor).arg(barRadius));

         bar->setStyleSheet(qss.join(""));

}

使用时调用：

setBarQss(ui->bar1, "#E8EDF2", "#E74C3C");

setBarQss(ui->bar2, "#E8EDF2", "#1ABC9C");

第四步：实现滑块条的风格

根据官网的效果看，基本上就是三种颜色（默认背景色+当前值背景色+滑块颜色）的设置。

这里为了好看，特意将滑块改成圆形，这样更好看些。

void frmMain::setSliderQss(QSlider *slider, QString normalColor, QString grooveColor, QString handleColor)

{

         int sliderHeight = 8;

    int sliderRadius = 4;

         int handleWidth = 13;

         int handleRadius = 6;

         int handleOffset = 3;

         QStringList qss;

         qss.append(QString("QSlider::groove:horizontal,QSlider::add-page:horizontal{height:%2px;border-radius:%3px;background:%1;}").arg(normalColor).arg(sliderHeight).arg(sliderRadius));

         qss.append(QString("QSlider::sub-page:horizontal{height:%2px;border-radius:%3px;background:%1;}").arg(grooveColor).arg(sliderHeight).arg(sliderRadius));

         qss.append(QString("QSlider::handle:horizontal{width:%2px;margin-top:-%3px;margin-bottom:-%3px;border-radius:%4px;"

                            "background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 #FFFFFF,stop:0.8 %1);}")

                    .arg(handleColor).arg(handleWidth).arg(handleOffset).arg(handleRadius));

    slider->setStyleSheet(qss.join(""));

}

使用时调用：

setSliderQss(ui->slider1, "#E8EDF2", "#1ABC9C", "#1ABC9C");

setSliderQss(ui->slider2, "#E8EDF2", "#E74C3C", "#E74C3C");

依次下去，还可以实现单选框、复选框、开关按钮等控件的样式。

其实在整个过程中和界面设计效果看，有一个核心就是颜色的搭配，很多人可能会问，我怎么知道那个颜色值是多少，推荐一个工具，绿色小巧无污染，叫屏幕拾色器，是要按住吸管往你看到的页面地方移动过去，就会自动将该颜色的值吸过来显示。我自己也用Qt实现过类似的这样一个小工具。

最终效果图：

完整源码下载：http://download.csdn.net/detail/feiyangqingyun/9708136

除了qss样式控制外观外，还有一种办法也可以实现类似效果，而且更灵活，那就是自定义控件，用Qpainter重绘外观，尤其是高级控件的话用qss就很难实现，下面就是我重绘的一些自定义控件。

时间： 2024-10-25 00:29:05

Qt实现FlatUI样式(开源)的相关文章

Qt控件样式之QSS

QSS常用于Qt的控件样式美化,合理地使用Qss可以完成在不改动代码的情况下改变Qt界面的样式. 官方提供的例子: http://qt-project.org/doc/qt-4.8/stylesheet-examples.html 这个是官方提供的例子,只有qt-4.8的,目前Qt最新版本是Qt5.4,但似乎在qss这块没有较大的更新,同时有关帮助手册可以在Qt Assistant中寻找. 在这个Qt Style Sheets Reference中有QSS所支持的所有属性.状态,QSS是参照CS

QT表单样式规则

1.全局匹配: *,匹配所有的Widgets 2.类型匹配:QPushButton.QComboBox等,匹配该类的示例及其子类 3.属性匹配:通过属性来作为过滤选项,对指定的属性(可以是动态属性,例如QObject的setProperty接口),例如 QLineEdit[readOnly="true"] 对于QLineEdit只读的控件来自定义表单样式.也可以使用~=符号来对属性进行限制: 使用~=来测试是否一个QT属性QStringList包含一个执行的QString,例如: *[

Qt的Qss样式

http://www.cnblogs.com/coffeegg/archive/2011/11/15/2249452.html(转) http://blog.csdn.net/cgzhello1/article/details/8514113 加载Qss文件http://www.tuicool.com/articles/fAF7zq Qss 实例http://blog.csdn.net/sdljlcming/article/details/8602659 将文件添加到树形工程中:http://b

Qt 自定义 滚动条 样式（模仿QQ）

今天是时候把软件中的进度条给美化美化了,最初的想法就是仿照QQ. 先前的进度条是这样,默认的总是很难受欢迎的:美化之后的是这样,怎么样?稍微好看一点点了吧,最后告诉你实现这个简单的效果在Qt只需要加几句简单的样式.下面就来吐槽吐槽,关于进度条样式的设置问题,欢迎评论交流,高手勿喷. Qt设置样式的方式有两种,一种直接在程序中写,适用于样式不多的情况:另一种,写入到文件中,适用用样式较大且需要提供换肤功能的情况. 1.写入到文件中,新建个xx.qss,然后复制一下内容 // 设置垂直滚动条基本样式

Qt 自定义 滚动条 样式

今天是时候把软件中的进度条给美化美化了,最初的想法就是仿照QQ. 先前的进度条是这样,默认的总是很难受欢迎的:美化之后的是这样,怎么样?稍微好看一点点了吧,最后告诉你实现这个简单的效果在Qt只需要加几句简单的样式.下面就来吐槽吐槽,关于进度条样式的设置问题,欢迎评论交流,高手勿喷. Qt设置样式的方式有两种,一种直接在程序中写,适用于样式不多的情况:另一种,写入到文件中,适用用样式较大且需要提供换肤功能的情况. 1.写入到文件中,新建个xx.qss,然后复制一下内容 // 设置垂直滚动条基本样式

Qt控件样式 Style Sheet Demo

迟来的笔记,作为一个程序员每日记事已养成习惯,离开许久,不知不觉已喜欢用文字表达对技术的热爱,学无止境! Qt – 一个跨平台应用程序和UI开发框架:它包括跨平台类库.集成开发工具和跨平台 IDE,使用 Qt 您只需一次性开发应用程序,无须重新编写源代码,便可跨不同桌面和嵌入式操作系统部署这些应用程序:深感强大的功能就是支持校本化和样式文件化,对于做web开发的同学能很快上手,强烈推荐.以下是Qt部分控件的样式写法例子,仅作参考,看着跟css3是不是很像. 1 *{font-size:15px;

Qt Quick自定义样式一套

弄了几个月的Qt,基本上以写上位机程序和工厂用的一些工具为主.老大的要求是快速.稳定.不出问题,不过他嫌.net要安装.还有升级(刚开始的时候由于这个出了些小问题),MFC开发东西又实在费劲,就让我找个轻量级又好用又方便部署的框架,找来找去实在找不到,干脆就用Qt了,至少这东西比MFC开发方便多了.在此之前花了点时间写了套UI,同时整了些能copy的代码.有了基本的代码积累,现在写起工具来也省事很多了,基本上就是copy.改改,写写逻辑.这里将UI发出来,谁要用的上尽管拿去修改,呵呵,咱也没啥时

qt QTableView/QTableWidget样式设置

转载请注明出处:http://www.cnblogs.com/dachen408/p/7591409.html 选中设置: QTableView::item:selected { background:rgb(0,0,100); color:white; } 表头设置: QHeaderView::section:first { border-image: url(:/images/expand/tempUser_headBg2.png); height: 30px; font: 11pt "微软

值得研究的开源QT项目

QT值得学习的开源项目 图像处理:Kritadigikam 编辑器:LiteIDEQDevelperKDeveloperMonkey StudioTeXstudio 绘图:ZeGrapherQtiPlotqcustomplotQWTHotShotsInkscape 三维建模:QCADFreeCAD 音乐:MuQtAVvlc-qt-master 游戏:Nem-Nem 界面:LTFrameLomoXyanhubin 控件:勇往直前wwWidgets 云:DropCloud 官方:qt-solutio