什么是扁平化

这里的扁平化指的是交互设计方面的一种风格。

扁平化是随着极简注意的风潮流行起来的,这个概念最核心的地方就是放弃一切装饰效果,诸如阴影。透视,纹理,渐变等等能做出3D效果的元素一概不用。全部的元素的边界都干净利落,没有不论什么羽化。渐变,或者阴影。从比較早的windows 8的Metro,

windows8

ios7

android4.0

都后面Android4.0的Holo Style,还有iOS7的“Ivy style” 的扁平化设计。

那之后,感觉一切都被拍扁了。

今天从技术的角度来看看怎么让Qt程序扁平化。

终于的效果是这种(一个图片浏览器)

扁平化。走你!

自己定义扁扁的按钮

QWidget w;
w.show().

上面的代码会生成一个Qt的Widget,然后显示出来,这种窗体会带上系统自带的外框,也包括有最大化,最小化之类的按钮,可是这种按钮并非我们须要的style,并且我们也无法控制,所以我们须要自己实现右上角的窗体控制按钮,创建一个pushbutton类,继承自QPushButton。

pushbutton.h

#ifndef PUSHBUTTON_H
#define PUSHBUTTON_H #include <QPushButton>
#include <QMouseEvent>
#include <QPainter>
#include <QDebug> class PushButton : public QPushButton
{
Q_OBJECT public:
PushButton(QWidget *parent = 0);
~PushButton();
void loadPixmap(QString pic_name); protected:
void enterEvent(QEvent *);
void leaveEvent(QEvent *);
void mousePressEvent(QMouseEvent *event);
void mouseReleaseEvent(QMouseEvent *event);
void paintEvent(QPaintEvent *); private:
enum ButtonStatus{NORMAL, ENTER, PRESS, NOSTATUS};
ButtonStatus status;
QPixmap pixmap; int btn_width;
int btn_height;
bool isPressed;
}; #endif // PUSHBUTTON_H

pushbutton.cpp

#include "pushbutton.h"

PushButton::PushButton(QWidget *parent)
:QPushButton(parent)
{
status = NORMAL;
isPressed = false;
} PushButton::~PushButton()
{ } void PushButton::loadPixmap(QString pic_name)
{
pixmap.load(pic_name);
//QSize picSize(96, 32);
pixmap = pixmap.scaledToHeight(30);
btn_width = pixmap.width()/3;
btn_height = pixmap.height();
setMinimumSize(btn_width, btn_height);
} void PushButton::enterEvent(QEvent *)
{
status = ENTER;
update();
} void PushButton::mousePressEvent(QMouseEvent *event)
{
if (event->button() == Qt::LeftButton)
{
isPressed = true;
status = PRESS;
update();
}
} void PushButton::mouseReleaseEvent(QMouseEvent *)
{
if(isPressed)
{
isPressed = false;
status = ENTER;
update();
emit clicked();
}
} void PushButton::leaveEvent(QEvent *)
{
status = NORMAL;
update();
} void PushButton::paintEvent(QPaintEvent *)
{
QPainter painter(this);
painter.drawPixmap(rect(), pixmap.copy(btn_width * status, 0, btn_width, btn_height));
}

须要准备一张button的图片。包括button的各个状态,依据button不同的状态在paintEvent函数中绘制图片不同的部分。

去除边框加上widget投影

去除系统自带的边框仅仅须要一行代码就能够了。

setWindowFlags(Qt::FramelessWindowHint);

给widget加入投影的方法卡了我两天。网上现存的有两种方法,一种是先准备好一些阴影的图片,然后手动在paintEvent中把阴影一个部分一个部分画出来。

这个方案费时费力,不灵活,效果也不太好。

还有一种方法是stackoverflow上的,加入一个widget,把全部窗体控件放到这个widget中,给这个widget加入阴影效果,然后放在一个透明的widget上。这个我试了非常久,效果也不太好。

最后给出我的解决方法.

自己定义widget继承自QWidget,构造函数中

	this->setWindowFlags(Qt::FramelessWindowHint);
this->setAttribute(Qt::WA_TranslucentBackground);

用一个layout装下全部控件,然后

#define SHADOW_WIDT  5

mainLayout->setContentsMargins(SHADOW_WIDTH, SHADOW_WIDTH, SHADOW_WIDTH, SHADOW_WIDTH);
this->setLayout(mainLayout);

在main.cpp中

	MainWindow w;
QGraphicsDropShadowEffect *wndShadow = new QGraphicsDropShadowEffect;
wndShadow->setBlurRadius(5.0);
wndShadow->setOffset(0);
wndShadow->setColor(QColor("#017acc"));
w.setGraphicsEffect(wndShadow);
w.show();

效果还算完美^.

设置widget背景

两种方法。第一。使用QPalette

m_pMyWidget = new QWidget(this);
m_pMyWidget->setGeometry(0,0,300,100);
QPalette Pal(palette());
// set black background
Pal.setColor(QPalette::Background, Qt::black);
m_pMyWidget->setAutoFillBackground(true);
m_pMyWidget->setPalette(Pal);
m_pMyWidget->show();

另外一种,使用css

m_pMyWidget = new QWidget(this);
m_pMyWidget->setGeometry(0,0,300,100);
m_pMyWidget->setStyleSheet("background-color:black;");
m_pMyWidget->show();

就像用css来修饰Html一样,css也能够用来定义widget的样式,Qt中使用样式表的文档能够參考这里这里

注。不论什么自己定义继承子QWidget的Widget,想要使用样式表,都要手动实现paintevent函数,代码例如以下:

void CustomWidget::paintEvent(QPaintEvent *)
{
QStyleOption opt;
opt.init(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}

小结

相比于使用Qt自带的窗体管理,自己定义的扁平化窗体看上肯定高大上很多。但随之而来的是开发成本和设计成本,由于全部的widget如今都须要自己管理(大小,颜色等),所以在开发之前一定要做好权衡。

扁平化你的Qt应用程序的更多相关文章

  1. C# winform 界面美化技巧(扁平化设计)

    关于C#界面美化的一些小技巧 在不使用第三方控件如 IrisSkin 的前提下,依然可以对winform做出让人眼前一亮的美化 首先,我们先来实现主界面的扁平化 此处分为两个步骤,第一步是更改winf ...

  2. 1.AutoMapper核心:扁平化

    对象 - 对象映射的一个常见用法是获取一个复杂的对象模型,并将其展开成一个更简单的模型. 您可以采取复杂的模型,如: public class Order { private readonly ILi ...

  3. IT传统组织结构及新型扁平化组织

    如今互联网企业正凶猛的改变人们衣食住行的方方面面,衣->淘宝,蘑菇街;食->大众点评,口碑;住->去哪,途牛:行->12306, 多次听到互联网的同行介绍他们就是要“快”,快速 ...

  4. Bootflat – 基于 Bootstrap CSS 框架的扁平化界面

    Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架.它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途 ...

  5. 16个时髦的扁平化设计的 HTML5 & CSS3 网站模板

    创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序.所以,今天这篇文章给大家带来的是16款基于 HTML5 & CSS3 的精美的扁平风格网站模板,大家可以借助这些优秀的网站 ...

  6. 怎样做出优秀的扁平化设计风格 PPT 或 Keynote 幻灯片演示文稿?(装)

    不知道你有没有想过,为什么很人多的扁平化 PPT 是这个样子: 或者是这样: 然而,还有一小撮人的扁平化 PPT 却拥有那么高颜值: 为什么会产生这么大的差距呢?丑逼 PPT 应该如何逆袭成为帅逼呢? ...

  7. 【Qt开发】关于Qt应用程序中的堆栈、静态存储区的使用错误

    [Qt开发]关于Qt应用程序中的堆栈.静态存储区的使用错误 标签:[Qt开发] 最近终于又碰到了这个问题,想在main函数中定义一个局部大的数组,结果运行就报错,尼玛!刚开始真的不知道到发生了什么,后 ...

  8. 02.AutoMapper 之扁平化(Flattening)

    https://www.jianshu.com/p/65099590c930   扁平化(Flattening) 对象映射器的常见用法是将一个复杂对象模型扁平化为一个简单模型.例如您有一个以下复杂模型 ...

  9. JavaScript数组常用方法解析和深层次js数组扁平化

    前言 数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等. 注:文章结尾处附深层次数组扁平化方法操作. 作为引用数据类型的一种,在处 ...

随机推荐

  1. Ubuntu 12.04安装和设置SSH服务

    OpenSSH 是 SSH (Secure SHell) 协议的免费开源实现.SSH协议族可以用来进行远程控制, 或在计算机之间传送文件.而实现此功能的传统方式,如telnet(终端仿真协议). rc ...

  2. hdoj1171 Big Event in HDU

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  3. Oracle PLSQL Demo - 18.01管道function[查询零散的字段组成list管道返回]

    --PACKAGE CREATE OR REPLACE PACKAGE test_141213 is TYPE type_ref IS record( ENAME ), WORK_CITY ), SA ...

  4. mysql show variables

    1. back_log 指定MySQL可能的连接数量.当MySQL主线程在很短的时间内得到非常多的连接请求,该参数就起作用,之后主线程花些时间(尽管很短)检查连接并且启动一个新线程. back_log ...

  5. SharePoint自动化系列——通过Coded UI录制脚本自动化创建SharePoint Designer Reusable Workflow

    Coded UI非常好,我开始还在想,怎么样能让一个通过SharePoint Designer创建的Workflow publish三百五十次?想不到一个好的方法,也不知道SharePoint Des ...

  6. 跨服务器sql操作

    1.打开跨服务器功能 exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'Ad Hoc Distrib ...

  7. C语言 · 数字三角形

    算法训练 数字三角形   时间限制:1.0s   内存限制:256.0MB      问题描述 (图3.1-1)示出了一个数字三角形. 请编一个程序计算从顶至底的某处的一条路 径,使该路径所经过的数字 ...

  8. java日期工具类DateUtil

    一名优秀的程序员,不仅需要有着丰富解决问题的方案,还需要的便是代码的沉淀,这不仅有助于自己快速的开发程序,也有利于保证程序的健壮.那如何才能沉淀自己的”代码“呢?从自己编写util开始其实就是一个不错 ...

  9. 百兆千兆网口100Base-TX/1000Base-T

    100Base-TX快速以太网目前制定的三种有关传输介质的标准之一. 另外两种是100Base-T4,100Base-FX. 100标识传输速率为100Mbit/s. base标识采用基带传输. T代 ...

  10. Entity Framework应用:使用Code First模式管理视图

    一.什么是视图 视图在RDBMS(关系型数据库管理系统)中扮演了一个重要的角色,它是将多个表的数据联结成一种看起来像是一张表的结构,但是没有提供持久化.因此,可以将视图看成是一个原生表数据顶层的一个抽 ...