對(duì)于現(xiàn)在做前端開發(fā)人員來說，F(xiàn)latUI肯定不陌生，最近幾年扁平化的設(shè)計(jì)越來越流行，大概由于現(xiàn)在PC端和移動(dòng)端的設(shè)備的分辨率越來越高，扁平化反而看起來更讓人愉悅，而通過漸變色產(chǎn)生的質(zhì)感色彩反而沒有扁平化來得親切。
Flat UI是基于Bootstrap之上進(jìn)行二次開發(fā)的扁平化前端框架，他提供了動(dòng)感、時(shí)尚的風(fēng)格色調(diào)搭配，簡潔、炫麗的功能組件，同時(shí)還提供了更為平滑的js交互動(dòng)畫，可以稱得上前端扁平化設(shè)計(jì)框架的優(yōu)秀代表之一。
既然是扁平化設(shè)計(jì)框架的優(yōu)秀代表，當(dāng)然需要在自己項(xiàng)目中應(yīng)用應(yīng)用，本人最早使用VB開發(fā)，而后轉(zhuǎn)為C#開發(fā)，最后轉(zhuǎn)為Qt開發(fā)，都是因?yàn)楣卷?xiàng)目需要，根據(jù)需要不斷學(xué)習(xí)新的編程框架，語言都是相通的，舉一反三，以前用C#寫的vista時(shí)鐘控件和vista日歷控件，稍微改改就轉(zhuǎn)移成了Qt寫的對(duì)應(yīng)控件，非常方便，只要掌握了思想，熟練了一門語言和框架之后，其他的學(xué)起來特別快。
Qt中的qss機(jī)制，和css極為相似，感覺就是脫胎于css，用qss來實(shí)現(xiàn)Qt界面樣式不是一般的方便，而是相當(dāng)?shù)乃诳吹紽latUI這樣的精美的扁平化設(shè)計(jì)樣式后，難以抑制手癢癢，就想用qss實(shí)現(xiàn)類似的風(fēng)格。
第一步：實(shí)現(xiàn)按鈕風(fēng)格
按鈕在大部分的可視化界面的項(xiàng)目中，出現(xiàn)的頻率不是第一也是第二，所以首先來實(shí)現(xiàn)按鈕對(duì)應(yīng)的flat UI 扁平化風(fēng)格。
根據(jù)官網(wǎng)的效果看，基本上要實(shí)現(xiàn)的就三種狀態(tài)（正常狀態(tài)+鼠標(biāo)懸停狀態(tài)+鼠標(biāo)按下）（還有一種禁用狀態(tài)）的兩種顏色（背景色+前景色）的設(shè)置，前景色一般指的是文字顏色。
將改變對(duì)應(yīng)按鈕樣式風(fēng)格封裝成一個(gè)函數(shù)，這樣每次調(diào)用只需傳入對(duì)應(yīng)參數(shù)即可。
網(wǎng)友評(píng)論 |
