Qt美化界面的心得整理

最近在美化QT,一直對純代碼編寫和美化界面能力拙急。網上搜了很多很多資料,但由於那個龐大的工程還沒完成,先將網上的資料整理一下,有一些沒用到的,留着以後看。等我的界面美化完之後再po上來~
/**********************************轉載分割線**********************************/
Qt 的一些心得
本文來自:http://blog.csdn.net/lpt19832003/archive/2010/03/15/5381095.aspx


一. 背景刷成黑色,前景色設爲白色。 
方法一、paltette方式,經測試,該方法不會影響到其他控件,推薦使用

點擊(此處)摺疊或打開

  1. QPalette bgpal = palette();
  2. bgpal.setColor (QPalette::Background, QColor (0, 0 , 0, 255));
  3. //bgpal.setColor (QPalette::Background, Qt::transparent);
  4. bgpal.setColor (QPalette::Foreground, QColor (255,255,255,255)); setPalette (bgpal);

方法二、stylesheet方式 
影響子控件的方法是

點擊(此處)摺疊或打開

  1. setStyleSheet ("background-color: rgb(0,0,0);color: rgb(255,255,255);");

不影響子控件的方法是:

點擊(此處)摺疊或打開

  1. setStyleSheet ("venus--TitleBar {background-color: rgb(0,0,0);color: rgb(255,255,255);}");

點擊(此處)摺疊或打開

  1. this->setObjectName("pw");// 設置對象句,相當於css裏的id
  2. this->setStyleSheet("#pw {border-image: url(:/new/prefix1/Pic/54.png);}");// 設置id對應元素的背景色

二. 圓角控件 用stylesheet方式


點擊(此處)摺疊或打開

  1. setStyleSheet ("border:2px groove gray;border-radius:10px;padding:2px 4px;");



三. 圓角窗口

點擊(此處)摺疊或打開

  1. RoundRectWin::RoundRectWin() 
  2. { 
  3.     QPalette p = palette(); 
  4.    QPixmap img("roundrect.png");
  5.     QBitmap mask("roundrect_mask.png");
  6.     p.setBrush(QPalette::Window, QBrush(img));
  7.     setPalette(p);
  8.     setMask(mask);
  9.     resize(img.size());
  10.     //setWindowFlags(Qt::FramelessWindowHint);//這句會去掉標題欄 } 注意:mask的圖多餘部分設爲白色
  11.  }



四. 半透明窗口

1.窗口整體透明,但是窗體上的控件不透明。 通過設置窗體的背景色來實現,將背景色設置爲全透。

點擊(此處)摺疊或打開

  1. QPalette pal = palette(); 
  2. pal.setColor(QPalette::Background, QColor(0x00,0xff,0x00,0x00)); 
  3. setPalette(pal);

  注:窗體標題欄不透明,窗體客戶區上的控件不透明,QLabel控件只是字顯示,控件背景色透明; 窗體客戶區完全透明。
  另外從網上看到的方法: 


點擊(此處)摺疊或打開

  1. setAttribute(Qt::WA_TranslucentBackground, true);
試驗的結果是類似於上面的方法,但有時候窗體會被一些雜色斑點填充,未找到原因。



2.窗口及其上面的控件都半透明:


點擊(此處)摺疊或打開

  1. setWindowOpacity(0.7);
試驗效果:窗口及控件都半透明。注意不能夠setWindowFlags(Qt::FramelessWindowHint);要不就不起作用



3.窗口整體不透明,局部透明:

在Paint事件中使用Clear模式繪圖。


點擊(此處)摺疊或打開

  1. void TestWindow::paintEvent( QPaintEvent* ) 
  2. { 
  3.    QPainter p(this); 
  4.     p.setCompositionMode( QPainter::CompositionMode_Clear ); 
  5.     p.fillRect( 10, 10, 300, 300, Qt::SolidPattern ); 
  6. }


試驗效果:繪製區域全透明。如果繪製區域有控件不會影響控件。

以上實驗均是基於Directfb的Qte測試。在Linux下及Windows下效果會略有不同。 
比如在Windows下第3個實驗,繪製區域就是一個黑窟窿,如果Window本身半透,則是Window下面的內容加上半透效果,不是全透明效果。

 

五. 控制QPixmap的alpha

點擊(此處)摺疊或打開

  1.    QPixmap temp(pixmapTop.size()); temp.fill(Qt::transparent);
  2.     QPainter p(&temp);
  3.     p.setCompositionMode(QPainter::CompositionMode_Source);
  4.     p.drawPixmap(0, 0, pixmapTop);
  5.     p.setCompositionMode(QPainter::CompositionMode_DestinationIn);
  6.     p.fillRect(temp.rect(), QColor(0, 0, 0, alpha)); //--lable顯示前景圖片 ui->label->setScaledContents(true);
  7.     ui->label->setPixmap(temp);


六. layout 的邊界

點擊(此處)摺疊或打開

  1. layout->setMargin (0);



終於把qt半透明搞定了

本文來自http://hi.baidu.com/sszllx/blog/item/ab833a59ea98622f2934f001.html

點擊(此處)摺疊或打開

  1. QFrame *frame = new QFrame();
  2. QPixmap grabPixmap = QPixmap::grabWindow( frame->winId(), 20, 0, 100, 100 );
  3. frame->setGeometry( 20, 20, 100, 100 );
  4. frame->hide();

  5. QPixmap pixmap = Resource::loadPixmap( "qpelogo" );

  6. QImage image = pixmap.convertToImage();
  7. //image.convertDepth( 32 );
  8. image.setAlphaBuffer( true );
  9. QImage bgImage = grabPixmap.convertToImage();
  10. //bgImage.convertDepth( 32 );
  11.     bgImage.setAlphaBuffer( true );

  12.     double k = 0.5;
  13. QRgb *rgbpos1 = image.colorTable();
  14. QRgb *rgbpos2 = bgImage.colorTable();
  15. for( int y = 0; y < 80; y++ )
  16.    for( int x = 0; x < 80; x++ )
  17.     {
  18. #if 1
  19.        uint rgb1 = image.pixel( x, y );
  20.      uint rgb2 = bgImage.pixel( x, y );
  21.      unsigned int red = qRed(rgb1);
  22.      unsigned int green = qGreen(rgb1);
  23.      unsigned int blue = qBlue(rgb1);
  24.      unsigned int bgred = qRed(rgb2);
  25.      unsigned int bggreen = qGreen(rgb2);
  26.      unsigned int bgblue = qBlue(rgb2);
  27.      red = k * red + ( 1 - k ) * bgred;
  28.      green = k * green + ( 1 - k ) * bggreen;
  29.      blue = k * blue + ( 1 - k ) * bgblue;
  30.      //red = red << 4;
  31.      //green = green << 4;
  32.      //blue = blue << 4;
  33. #endif
  34.      //color = QColor( red, green, blue );
  35.      //unsigned int myrgb = color.rgb();
  36.      //image.setPixel( x, y, myrgb );
  37.      uint *= (uint *)image.scanLine(y) + x;
  38.                 *= qRgb( red, green, blue );
  39.     
  40.     }

  41. qWarning("%d %d", image.depth(), bgImage.depth());
  42. grabPixmap.convertFromImage( image );

  43. frame->setBackgroundPixmap( grabPixmap );
  44. frame->show();
  45. #endif

窗口嵌入桌面

ps:這兒用上了前面一文提到的函數findDesktopIconWnd()。
本文來自http://mypyg.blog.51cto.com/820446/263369

一、將Qt窗口嵌入到桌面中。
聲明一個最簡單的類:

點擊(此處)摺疊或打開

  1. class Dialog : public QDialog
  2. {
  3.         Q_OBJECT

  4. public:
  5.         Dialog(QWidget *parent = 0);
  6.         ~Dialog();
  7. }
函數實現:

點擊(此處)摺疊或打開

  1. Dialog::Dialog(QWidget *parent) : QDialog(parent)
  2. {
  3.         //創建個LineEdit用來測試焦點
  4.         QLineEdit* le = new QLineEdit(this);
  5. }

  6. Dialog::~Dialog()
  7. {
  8. }
主函數:

點擊(此處)摺疊或打開

  1. int main(int argc, char *argv[])
  2. {
  3.         QApplication a(argc, argv);
  4.         Dialog w;

  5.         HWND desktopHwnd = findDesktopIconWnd();
  6.         if(desktopHwnd) SetParent(w.winId(), desktopHwnd);

  7.         w.show();
  8.         return a.exec();
  9. }
有個窗口嵌入了桌面。按win+D組合鍵可以看到此窗口在桌面上。運行效果:


二、讓窗口全透明:
2.1最容易想到的就是setWindowOpacity()函數了。

點擊(此處)摺疊或打開

  1. w.setWindowOpacity(0.5);
運行:結果杯具了,此函數完全無效,因爲其父窗口特殊,這個函數內部使用的系統窗口標誌不被支持。
2.2

點擊(此處)摺疊或打開

  1. w.setAttribute(Qt::WA_TranslucentBackground, true);
全透明ok。如果其父窗口爲空的話,透明的地方會成爲黑塊。運行效果:



三、讓窗口半透明
3.1

點擊(此處)摺疊或打開

  1. w.setAttribute(Qt::WA_TranslucentBackground, true) + 背景調色板
運行效果仍然是全透明,因爲TranslucentBackground爲true,根本不畫背景。
3.2單純的背景調色板:

點擊(此處)摺疊或打開

  1. QPalette pal = w.palette();
  2. pal.setColor(QPalette::Background, QColor(100,100,100,50));
  3. w.setPalette(pal);
  4. w.setAutoFillBackground(true);
運行效果出現了半透明:

但是還沒大功告成,不停點擊桌面,再點擊這個窗口,會發現這個窗口越來越不透明,直至完全不透明瞭。不知道是不是qt的bug。
ps:加一句 w.setAttribute(Qt::WA_OpaquePaintEvent,true); 窗口就能夠一直保持這個效果了。即這個方案可行。
pps:此方案在XP也是黑色底塊。
3.3轉戰paintEvent()

點擊(此處)摺疊或打開

  1. void Dialog::paintEvent(QPaintEvent *e)
  2. {
  3.         QPainter p(this);
  4.         p.fillRect(rect(), QColor(0,0xff,0,30));
  5. }
用一個帶有alpha值的顏色填充背景,運行效果發現顏色確實有alpha值,但是桌面的內容透不過來。
3.4setAttribute(Qt::WA_TranslucentBackground, true) + paintEvent()
得到了設想中的效果。運行效果:


最終的主函數代碼:

點擊(此處)摺疊或打開

  1. int main(int argc, char *argv[])
  2. {
  3.         QApplication a(argc, argv);
  4.         Dialog w;

  5.         HWND desktopHwnd = findDesktopIconWnd();
  6.         if(desktopHwnd) SetParent(w.winId(), desktopHwnd);

  7.         w.setAttribute(Qt::WA_TranslucentBackground, true);

  8.         w.show();
  9.         return a.exec();
  10. }
最終的dialog實現代碼:

點擊(此處)摺疊或打開

  1. Dialog::Dialog(QWidget *parent) : QWidget(parent)
  2. {
  3.         //創建個LineEdit用來測試焦點
  4.         QLineEdit* le = new QLineEdit(this);
  5. }

  6. Dialog::~Dialog()
  7. {
  8. }

  9. void Dialog::paintEvent(QPaintEvent *e)
  10. {
  11.         QPainter p(this);
  12.         p.fillRect(rect(), QColor(0,0xff,0,30));
  13. }
PS:
經測試此代碼在XP運行不正常。窗口成爲黑色背景塊。只能是顏色半透明瞭。
還有就是圖標會被蓋住。只能把w.setAttribute(Qt::WA_TranslucentBackground, true);註釋掉,有半透明顏色,無法看到桌面。

在QT中自繪控件的方法說明
本文來自http://blog.csdn.net/dotboy/archive/2009/06/22/4287805.aspx

首先給出在QT中進行標題欄自繪的方法(兩個網址給出了方法和參考代碼)

litterflybug的專欄 ::http://blog.csdn.net/litterflybug/archive/2009/05/07/4157482.aspx

QT官方FAQ: http://www.qtsoftware.com/developer/faqs/faq.2007-04-25.2011048382

其次,做一點關於在windows平臺下將頂級窗口透明化的說明

1.在4.5版本以前,要實現Top level窗口的透明化,需要使用setMask方法,該方法有兩個重載,一個是QRegion定義一個區域表明這一區域是要被繪製的區域,在該區域以外的地方是不需要繪製的.第二個重載版本是需要一個QBitmap,這個QBitmap只需要一張單色位圖就可以了(另外,一張帶有透明效果的PNG圖片被讀入QPixmap中以後,可以使用函數mask()返回一張與原圖對應的單色位圖,這很方便實際使用),白色部分表示是不透明要被繪製的區域,黑色部分表示該區域不應該被繪製(能實現透明的效果).

2.4.5版本發行以後,可以設置窗口屬性Qt::WA_TranslucentBackground來設定該窗口透明顯示,但是有一個問題,就是如果該窗口是個top level窗口,就會有標題欄(title bar), 在windows平臺下,如果不把這個標題欄去掉(設置Qt::FramelessWindowHint 標誌位就會去掉標題欄),那麼將不會是透明效果,而是背景爲全黑(我的實驗結果是這樣)


qt 設置子控件爲半透明和背景色問題

本文來自http://bbs.csdn.net/topics/370078118

在子widget的構造函數裏添加如下幾句:

點擊(此處)摺疊或打開

  1. QPalette myPalette;
  2. QColor myColor(0,0,0);
  3. myColor.setAlphaF(0.2);
  4. myPalette.setBrush(backgroundRole(),myColor);
  5. this->setPalette(myPalette);
  6. this->setAutoFillBackground(true);
原理是:改子widget的背景色+修改alpha值(設置半透明)

改子widget的背景色 :

點擊(此處)摺疊或打開

  1. QPalette myPalette;
  2. QColor myColor(0,0,0);
  3. myPalette.setBrush(backgroundRole(),myColor);
  4. this->setPalette(myPalette);
  5. this->setAutoFillBackground(true);//這句很關鍵,缺少的話,背景色修改不成功

修改alpha值:

點擊(此處)摺疊或打開

  1. myColor.setAlphaF(0.2);//通過設置alpha值來改變透明度

qt 窗口圓角問題
本文來自http://blog.csdn.net/fariel_zhang/article/details/6315463

最近在用qss做界面美化的工作,發現一個問題就是qss不能對頂級窗口設置邊角圓弧,於是得另闢蹊徑。據網上搜索可得到的方法我實現了三種:

1.

點擊(此處)摺疊或打開

  1. setWindowFlags(Qt::FramelessWindowHint); 
  2.     QBitmap bmp(this->size()); 
  3.     bmp.fill(); 
  4.     QPainter p(&bmp); 
  5. // p.setPen(Qt::NoPen); 
  6. // p.setBrush(Qt::black); 
  7.     p.setRenderHint(QPainter::Antialiasing); 
  8.     //p.drawRoundedRect(bmp.rect(), 20, 20); //四個角都是圓弧 
  9.     //只要上邊角圓弧 
  10.     int arcR = 20; 
  11.     QRect rect = this->rect(); 
  12.     QPainterPath path; 
  13.     //逆時針 
  14.     path.moveTo(arcR, 0); 
  15.     path.arcTo(0, 0, arcR * 2, arcR * 2, 90.0f, 90.0f); 
  16.     path.lineTo(0, rect.height()); 
  17.     path.lineTo(rect.width(), rect.height()); 
  18.     path.lineTo(rect.width(), arcR); 
  19.     path.arcTo(rect.width() - arcR * 2, 0, arcR * 2, arcR * 2, 0.0f, 90.0f); 
  20.     path.lineTo(arcR, 0); 
  21.     p.drawPath(path); 
  22.     p.fillPath(path, QBrush(Qt::Red)); //arm和windows平臺沒有這行代碼將顯示一個透明的空空的框 
  23.     setMask(bmp);

2.

構造函數中

點擊(此處)摺疊或打開

  1.     setAttribute(Qt::WA_TranslucentBackground, true); 
  2.     setWindowFlags(Qt::Window | Qt::FramelessWindowHint | Qt::WindowSystemMenuHint 
  3.                    | Qt::WindowMinimizeButtonHint | Qt::WindowMaximizeButtonHint);
重載paintEvent

點擊(此處)摺疊或打開

  1. QPainter p(this); 
  2. p.drawRoundedRect(0, 0, width() - 1, height() - 1, 20, 20);

3.背景圖片

點擊(此處)摺疊或打開

  1. QPixmap pixmap(":/images/*.png"); 
  2.   setMask(pixmap.mask()); 
  3. QPalette palette; 
  4. palette.setBrush(QPalette::Background, QBrush( pixmap ) ); 
  5. setPalette(palette); 
  6. resize( pixmap.size() ); 
  7. setMask(pixmap.mask());
同樣的一個setMask();在三個不同的平臺上區別倒是很大,很是奇怪。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章