QT Implementation Flatui style (open source)

For now to do front-end developers, Flatui certainly not unfamiliar, the recent years of flat design more and more popular, probably because the PC and mobile devices now more and more high resolution, flat instead of looking more enjoyable, and through the gradual discoloration produced by the texture of the color is not flat to come in kind.

The Flat UI is a flat front-end framework based on the two development of the bootstrap, which provides a sporty, stylish palette of tones, concise, and glamorous functional components, as well as a smoother JS interactive animation that can be called one of the best representatives of the front-end flat design framework.

Since it is a flat design framework of excellent representatives, of course, I need to apply the application in their own projects, I first use VB development, and then to C # development, and finally to QT development, are because of the company's project needs, according to the need to constantly learn new programming framework, language is interlinked, extrapolate, used in C # Write the Vista clock control and Vista Calendar control, slightly changed to transfer to the QT write the corresponding control, very convenient, as long as mastered the idea, proficiency of a language and framework, the others learn particularly fast.

QT QSS mechanism, and CSS very similar, feel is born out of CSS, with QSS to achieve QT interface style is not general convenience, but rather cool, in see flatui such exquisite flat design style, difficult to suppress hand itch, want to use QSS to achieve similar style.

First step: Implement button style

button in most of the visual interface of the project, the frequency of occurrence is not the first and second, so first to implement the button corresponding to the flat UI flat style.

According to the effect of the official website, basically to achieve the three states (normal state + mouse hover state + mouse Press) (there is a disabled state) of the two colors (background color + foreground color) of the settings, the foreground color is generally refers to the text color.

Encapsulates the change of the corresponding button style style into a function so that each invocation simply passes in the corresponding parameter.

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 (""));}

Invoke when used:

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");

Step two: Implement the style of the text input box

Based on the effect of the official website, it is basically the setting of two colors (border color + text color) of two states (normal state + get focus state).

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 (""));}

Invoke when used:

SETTXTQSS (UI->TXT1,"#DCE4EC","#34495E"); Settxtqss (UI->TXT2,"#DCE4EC","#1ABC9C"); Settxtqss (UI->TXT3,"#DCE4EC","#3498DB"); Settxtqss (UI->TXT4,"#DCE4EC","#E74C3C");

Step three: Implement the style of the progress bar

According to the effect of the official website, basically is the two colors (normal background color + current value background color) settings.

voidFRMMAIN::SETBARQSS (Qprogressbar *Bar, QString NormalColor, QString chunkcolor) {    intBarheight =8; intBarradius =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 (""));}

Invoke when used:

" #E8EDF2 " " #E74C3C " ); Setbarqss (UI"#E8EDF2""#1ABC9C") ;

Fourth step: Implement the slider bar style

Based on the effect of the official website, basically is the setting of three colors (default background color + Current value background color + slider color).

In order to look good here, the slider is deliberately changed to a circle, so it looks better.

voidFRMMAIN::SETSLIDERQSS (Qslider *Slider, QString normalcolor, QString groovecolor, QString handlecolor) {         intSliderheight =8; intSliderradius =4; intHandlewidth = -; intHandleradius =6; intHandleoffset =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 (""));}

Invoke when used:

" #E8EDF2 " " #1ABC9C " " #1ABC9C " ); Setsliderqss (UI"#E8EDF2""#E74C3C"  "#E74C3C");

In turn, you can also implement styles for controls such as a radio box, a check box, and a toggle button.

In fact, in the whole process and the interface design effect, there is a core is the color collocation, many people may ask, how do I know the color value is how much, recommend a tool, green small pollution-free, called screen color picker, is to hold the straw to the page where you see move past, will automatically be the value of the color of the display. I myself used QT to implement a similar gadget.

Eventually:

Full source Download: http://download.csdn.net/detail/feiyangqingyun/9708136

In addition to the QSS style control appearance, there is also a way to achieve similar effects, and more flexible, that is, custom control, with Qpainter to redraw the appearance, especially the high-level control QSS is difficult to implement, the following is some of the custom controls I redraw.

QT Implementation Flatui style (open source)